/* ===========================================================================
   FROTH TERMINAL — design tokens
   One place for colour, spacing, type. Every tab reads from here; nothing
   below this file should hard-code a hex value or a pixel gap.

   Principles this encodes:
   - Dark by default. Near-black ground, not grey-blue "dashboard" chrome.
   - ONE accent (Hyperliquid mint). Used for structure and emphasis only.
   - Red/green are RESERVED for directional data. If a colour means "up" or
     "down" it must never also mean "heading" or "border", or it stops meaning
     anything.
   - All figures use tabular lining numerals so columns align and digits do not
     jitter as values update.
   =========================================================================== */

:root {
  /* --- ground ---------------------------------------------------------- */
  --bg:            #07090c;   /* page */
  --bg-raised:     #0d1117;   /* cards */
  --bg-sunken:     #050709;   /* wells, table headers */
  --line:          #1b2430;   /* hairlines */
  --line-strong:   #2a3644;

  /* --- text ------------------------------------------------------------ */
  --fg:            #e8eef5;
  --fg-muted:      #8b9bb0;
  --fg-faint:      #566370;

  /* --- the single accent ----------------------------------------------- */
  --accent:        #4fe3c1;   /* Hyperliquid mint */
  --accent-dim:    #2b8f7c;
  --accent-wash:   rgba(79, 227, 193, 0.10);

  /* --- directional ONLY ------------------------------------------------ */
  --up:            #3fd07f;
  --down:          #ff5f56;
  --up-wash:       rgba(63, 208, 127, 0.12);
  --down-wash:     rgba(255, 95, 86, 0.12);

  /* --- froth bands ------------------------------------------------------ */
  --band-cold:     #4d9dff;
  --band-normal:   #3fd07f;
  --band-warm:     #f5a623;
  --band-hot:      #ff5f56;

  /* --- spacing scale (4px base) ---------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- radius ----------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* --- type scale ------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
              "Liberation Mono", monospace;

  --t-hero:  clamp(56px, 14vw, 84px);
  --t-xl:    28px;
  --t-lg:    20px;
  --t-md:    15px;
  --t-sm:    13px;
  --t-xs:    11px;

  --lh-tight: 1.1;
  --lh-body:  1.55;

  /* --- misc ------------------------------------------------------------- */
  --reading-width: 68ch;
  --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.4);
}

/* Light mode is a deliberate, minimal adaptation — the terminal is designed
   dark, so light stays quiet rather than trying to be a second design. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:          #f7f9fb;
    --bg-raised:   #ffffff;
    --bg-sunken:   #eef2f6;
    --line:        #dde4ec;
    --line-strong: #c6d0dc;
    --fg:          #0f1722;
    --fg-muted:    #55637a;
    --fg-faint:    #7b8798;
    --accent:      #12866f;
    --accent-dim:  #0c6353;
    --accent-wash: rgba(18, 134, 111, 0.09);
    --up:          #17914f;
    --down:        #cf3a30;
    --shadow:      0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  }
}

/* ===========================================================================
   BASE
   =========================================================================== */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  padding: var(--s5) var(--s4) var(--s8);
  max-width: 1080px;
  margin-inline: auto;
  -webkit-font-smoothing: antialiased;
}

/* Every figure in the app. Tabular so columns line up and digits do not
   shift width as numbers change. */
.num, .mono, table td.num, .stat b, .hero-score {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===========================================================================
   MASTHEAD + NAV
   =========================================================================== */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2);
}
.wordmark {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.updated { color: var(--fg-faint); font-size: var(--t-xs); font-family: var(--font-num); }

nav {
  display: flex; gap: var(--s1); margin: var(--s4) 0 var(--s5);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
nav::-webkit-scrollbar { display: none; }
nav button {
  flex: 0 0 auto;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-muted); font: inherit; font-size: var(--t-sm);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  cursor: pointer; white-space: nowrap; transition: color .12s, background .12s;
}
nav button:hover { color: var(--fg); background: var(--bg-raised); }
nav button.on {
  color: var(--bg); background: var(--accent); font-weight: 600;
}

/* ===========================================================================
   CARDS
   =========================================================================== */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin-bottom: var(--s4);
  box-shadow: var(--shadow);
}
.card-tight { padding: var(--s4); }

h2.card-title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-faint); font-weight: 600; margin: 0 0 var(--s4);
}

/* ===========================================================================
   HERO — the froth score is the one thing that must read from across a room
   =========================================================================== */
.hero { display: flex; gap: var(--s6); align-items: center; flex-wrap: wrap; }
.hero-score {
  font-size: var(--t-hero); font-weight: 600; line-height: var(--lh-tight);
  letter-spacing: -0.04em; margin: 0;
}
.hero-meta { flex: 1 1 260px; min-width: 0; }
.band {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em;
}
.band::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.band-Cold   { color: var(--band-cold);   background: color-mix(in srgb, var(--band-cold) 14%, transparent); }
.band-Normal { color: var(--band-normal); background: color-mix(in srgb, var(--band-normal) 14%, transparent); }
.band-Warm   { color: var(--band-warm);   background: color-mix(in srgb, var(--band-warm) 14%, transparent); }
.band-Hot    { color: var(--band-hot);    background: color-mix(in srgb, var(--band-hot) 14%, transparent); }
.hero .action { color: var(--fg-muted); margin-top: var(--s3); font-size: var(--t-md); }

/* Calibrating is a STATE, not an error. Quiet, deliberate, with progress. */
.calibrating {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-left: 2px solid var(--accent-dim);
  border-radius: var(--r-sm); background: var(--bg-sunken);
  color: var(--fg-muted); font-size: var(--t-sm);
}
.calibrating b { color: var(--fg); font-weight: 600; }
.progress { height: 3px; background: var(--line); border-radius: 2px; margin-top: var(--s2); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent-dim); }

/* ===========================================================================
   STATS ROW
   =========================================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); }
.stat span {
  display: block; color: var(--fg-faint); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s1);
}
.stat b { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }

/* ===========================================================================
   TABLES
   =========================================================================== */
.scroll-x { overflow-x: auto; margin-inline: calc(var(--s5) * -1); padding-inline: var(--s5); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th {
  text-align: left; color: var(--fg-faint); font-weight: 500;
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap; position: sticky; top: 0; background: var(--bg-raised);
}
td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-sunken); }
td.num, th.num { text-align: right; }

/* Directional colour. ONLY these two classes may use up/down colours. */
.up   { color: var(--up); }
.down { color: var(--down); }

/* ===========================================================================
   CHIPS + BARS
   =========================================================================== */
.chip {
  display: inline-block; font-size: var(--t-xs); font-family: var(--font-num);
  color: var(--fg-muted); background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1px var(--s2); margin-left: var(--s2); white-space: nowrap;
}
.chip-accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-wash); }
.chip-warn   { color: var(--band-warm); border-color: color-mix(in srgb, var(--band-warm) 40%, transparent); }

.bar { height: 4px; border-radius: 2px; background: var(--line); min-width: 60px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent-dim); }

/* ===========================================================================
   READING — a briefing page, not a table
   =========================================================================== */
.read-item { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.read-item:last-child { border-bottom: none; }
.read-title {
  color: var(--fg); font-weight: 600; font-size: var(--t-lg);
  line-height: 1.3; letter-spacing: -0.01em; text-decoration: none; display: block;
}
.read-title:hover { color: var(--accent); text-decoration: none; }
.byline {
  color: var(--fg-faint); font-size: var(--t-xs); margin: var(--s2) 0;
  font-variant-numeric: tabular-nums;
}
.byline .author { color: var(--fg-muted); font-weight: 500; }
.read-summary { color: var(--fg-muted); max-width: var(--reading-width); margin: var(--s2) 0 0; }
.score-chips { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }

/* ===========================================================================
   SPARKLINES
   =========================================================================== */
.spark { display: block; width: 100%; height: 28px; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark .fill { fill: var(--accent-wash); stroke: none; }

/* ===========================================================================
   SKELETONS — never show a blank pane
   =========================================================================== */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel {
  background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--line) 37%, var(--bg-sunken) 63%);
  background-size: 800px 100%; animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm); height: 12px; margin-bottom: var(--s3);
}
.skel-lg { height: 56px; }
.skel-w60 { width: 60%; } .skel-w40 { width: 40%; } .skel-w80 { width: 80%; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ===========================================================================
   MISC
   =========================================================================== */
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); font-size: var(--t-sm); }
.note { color: var(--fg-muted); font-size: var(--t-sm); margin-top: var(--s3); }
.lock { text-align: center; padding: var(--s7) var(--s4); color: var(--fg-muted); }
.lock input, .btn {
  font: inherit; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--bg-sunken); color: var(--fg);
}
.lock input { width: min(340px, 100%); font-family: var(--font-num); }
.btn { cursor: pointer; border-color: var(--accent-dim); color: var(--accent); background: var(--accent-wash); }
.btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ===========================================================================
   MOBILE — this gets checked from a phone daily, so it is a first-class layout
   =========================================================================== */
@media (max-width: 640px) {
  body { padding: var(--s4) var(--s3) var(--s7); }
  .card { padding: var(--s4); border-radius: var(--r-md); }
  .scroll-x { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .hero { gap: var(--s4); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .stat b { font-size: var(--t-lg); }
  .read-title { font-size: var(--t-md); }
  td, th { padding: var(--s2); }
  h2.card-title { margin-bottom: var(--s3); }
}