/*
 * "Liquidation Ave" theme — shared by the USDG monitor and the US500S/SPY spread site.
 * Dark grunge: charcoal panels, bone text, newspaper typewriter headings, film grain.
 *
 * Use:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Special+Elite&display=swap">
 *   <link rel="stylesheet" href="theme.css">
 *   <header class="hero"> ... </header>   (banner.webp next to this file)
 *
 * Chart colors: single series -> --line; two series -> --series-1 / --series-2
 * (validated for CVD + contrast on --surface); good/bad zones -> --good / --critical.
 */
:root {
  color-scheme: dark;
  --page: #0b0b0a;
  --surface: #141312;
  --surface-2: #1b1a18;
  --ink: #e6dfd0;
  --ink-2: #b3ab9b;
  --muted: #7d776c;
  --grid: #262421;
  --axis: #3a3733;
  --border: rgba(230, 223, 208, 0.10);
  --hover: rgba(230, 223, 208, 0.04);
  --selected: rgba(230, 223, 208, 0.08);
  --line: #d8cdb6;
  --series-1: #5a8fd0;
  --series-2: #c4852f;
  --good: #7fb069;
  --critical: #cf5c46;
  --good-text: #8fbf78;
  --critical-text: #e07a63;
  --good-wash: rgba(127, 176, 105, 0.08);
  --critical-wash: rgba(207, 92, 70, 0.08);
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(ellipse 120% 60% at 50% 0%, #161513 0%, var(--page) 70%) fixed, var(--page);
  font: 13px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* film grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* banner header */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  /* height, not aspect-ratio: a capped aspect-ratio also caps the width and the banner stops short of the cards */
  height: clamp(170px, 28vw, 250px);
  padding: 20px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(11, 11, 10, 0.15) 0%, rgba(11, 11, 10, 0.55) 55%, rgba(11, 11, 10, 0.92) 100%),
    url("banner.webp") center / cover no-repeat,
    var(--surface);
}
.hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -62%);
  margin: 0;
  font-size: clamp(26px, 5vw, 44px);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.8);
}
.hero .tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 70%);
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.hero-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* panels */
.card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.6);
}

/* buttons & segmented controls */
button { font: inherit; color: inherit; }
.btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: rgba(230, 223, 208, 0.25); }
.btn:disabled { color: var(--muted); cursor: default; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 4px 12px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
button:focus-visible, svg:focus-visible { outline: 1px dashed var(--ink); outline-offset: 3px; }

/* rubber-stamp status badge: <span class="stamp GOOD|OK|BAD">Good</span> */
.stamp {
  display: inline-block;
  padding: 0 6px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transform: rotate(-3deg);
  opacity: 0.92;
}
.stamp.GOOD { color: var(--good-text); }
.stamp.BAD { color: var(--critical-text); }

.tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  display: none;
  white-space: nowrap;
  background: #0f0e0d;
  color: var(--ink);
  border: 1px solid rgba(230, 223, 208, 0.18);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  font-size: 12px;
}

.chart svg text { font-family: var(--font-body); }

/* phones: title and tagline flow above the bar instead of floating over it */
@media (max-width: 640px) {
  .hero { height: auto; padding: 40px 16px 14px; gap: 4px; }
  .hero h1, .hero .tagline { position: static; transform: none; text-align: center; white-space: normal; }
  .hero .tagline { font-size: 10px; margin-bottom: 18px; }
}