/* ==========================================================================
   HASH/DS - Components
   Requires tokens.css. Class prefix: hds-
   Fonts: load Fraunces (400 + italic), Inter (400/500/600), JetBrains Mono
   (400/500) before this file.
   ========================================================================== */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.hds {
  background: var(--hds-bg);
  color: var(--hds-ink);
  font-family: var(--hds-font-sans);
  font-size: var(--hds-fs-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.hds a { color: inherit; text-decoration: none; }
.hds button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.hds img, .hds svg { display: block; max-width: 100%; }
.hds :focus-visible { outline: 1px solid var(--hds-accent); outline-offset: 2px; }

/* Film grain: the analog texture over everything */
body.hds::before {
  content: '';
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layout ---- */
.hds-container {
  max-width: var(--hds-container);
  margin-inline: auto;
  padding-inline: var(--hds-gutter);
}
.hds-container-text { max-width: var(--hds-container-text); }

.hds-band {
  padding-block: var(--hds-band-pad);
  border-bottom: 1px solid var(--hds-line);
  position: relative;
}
.hds-band-tight { padding-block: 3.5rem; }

/* ---- Typography roles ---- */
.hds-mono {
  font-family: var(--hds-font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Kicker: mono uppercase eyebrow. .hds-kicker-live adds pulsing dot. */
.hds-kicker {
  font-family: var(--hds-font-mono);
  font-size: var(--hds-fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hds-cream);
  display: flex; align-items: center; gap: 0.5rem;
}
.hds-kicker.accent { color: var(--hds-accent); }
.hds-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hds-accent); flex: none;
}
.hds-kicker.live .dot { animation: hds-pulse 2s var(--hds-ease) infinite; }
@keyframes hds-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Display heading: Fraunces 400, tight tracking, terminal period.
   Wrap the accent phrase in <em class="hds-display-em">. */
.hds-display {
  font-family: var(--hds-font-serif);
  font-weight: 400;
  font-variation-settings: 'SOFT' 60;
  font-size: var(--hds-fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 24ch;
}
.hds-display-em, .hds-display em {
  font-style: italic;
  color: var(--hds-accent);
  font-variation-settings: 'SOFT' 100;
}
.hds-display-em.cream, .hds-display em.cream { color: var(--hds-cream); }

/* Standfirst under a display heading */
.hds-lead {
  font-family: var(--hds-font-serif);
  font-size: var(--hds-fs-lead);
  line-height: 1.5;
  color: var(--hds-ink-2);
  max-width: 56ch;
}
.hds-lead strong { color: var(--hds-ink); font-weight: 400; }

/* Section head: sans title + italic serif whisper + right slot, on a hairline */
.hds-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  padding-bottom: 0.875rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--hds-line);
}
.hds-section-hd h2 {
  font-size: var(--hds-fs-h2);
  font-weight: 500;
  letter-spacing: -0.022em;
}
.hds-whisper {
  font-family: var(--hds-font-serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'SOFT' 100;
  font-size: 1.0625rem;
  color: var(--hds-ink-3);
  margin-left: 0.625rem;
  letter-spacing: -0.015em;
}

.hds-prose { color: var(--hds-ink-2); max-width: 60ch; }
.hds-prose p + p { margin-top: 1rem; }
.hds-prose strong { color: var(--hds-ink); font-weight: 500; }

/* ---- Ticker tape ---- */
.hds-ticker {
  border-bottom: 1px solid var(--hds-line);
  overflow: hidden; white-space: nowrap;
  padding-block: 0.5rem;
  font-family: var(--hds-font-mono);
  font-size: 0.6875rem;
  font-feature-settings: 'tnum' 1;
}
.hds-ticker-track {
  display: inline-flex; gap: 3rem;
  animation: hds-marquee 45s linear infinite;
  will-change: transform;
}
.hds-ticker:hover .hds-ticker-track { animation-play-state: paused; }
@keyframes hds-marquee { to { transform: translateX(-50%); } }
.hds-tick { color: var(--hds-ink-2); }
.hds-tick b { color: var(--hds-ink); font-weight: 500; }
.hds-tick .up { color: var(--hds-accent); }
.hds-tick .down { color: var(--hds-red); }

/* ---- Nav ---- */
.hds-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 12, 13, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hds-line);
}
.hds-nav-inner { display: flex; align-items: center; gap: 2rem; height: 56px; }
.hds-brand { display: flex; align-items: baseline; gap: 0.625rem; font-weight: 600; }
.hds-brand .tag {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--hds-ink-3);
}
.hds-nav-links { display: flex; gap: 1.5rem; margin-left: auto; }
.hds-nav-links a {
  font-size: var(--hds-fs-ui); color: var(--hds-ink-2);
  transition: color var(--hds-fast) var(--hds-ease);
}
.hds-nav-links a:hover { color: var(--hds-ink); }
.hds-nav-links a.on { color: var(--hds-ink); box-shadow: 0 2px 0 var(--hds-accent); }
.hds-kbd {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  color: var(--hds-ink-4); margin-left: 0.25rem;
}

/* ---- Buttons ----
   Primary (accent), Solid (off-white), Ghost (hairline). Mono uppercase labels. */
.hds-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--hds-font-mono);
  font-size: var(--hds-fs-data);
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.875rem 1.75rem;
  border-radius: var(--hds-r-1);
  transition: background-color var(--hds-fast) var(--hds-ease),
              border-color var(--hds-fast) var(--hds-ease),
              color var(--hds-fast) var(--hds-ease),
              transform var(--hds-fast) var(--hds-ease);
}
.hds-btn-primary, .hds .hds-btn-primary { background: var(--hds-accent); color: var(--hds-bg); }
.hds-btn-primary:hover { background: var(--hds-cream); transform: translateY(-1px); }
.hds-btn-solid, .hds .hds-btn-solid { background: var(--hds-ink); color: var(--hds-bg); }
.hds-btn-solid:hover { background: #ffffff; }
.hds-btn-ghost { border: 1px solid var(--hds-line-2); color: var(--hds-ink); padding: 0.5rem 0.875rem; }
.hds-btn-ghost:hover { border-color: var(--hds-accent-dim); color: var(--hds-accent); }

/* Ghost text link: mono underline, hover to accent */
.hds-link {
  font-family: var(--hds-font-mono); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--hds-ink-2);
  border-bottom: 1px solid var(--hds-line-2);
  padding-bottom: 2px;
  transition: color var(--hds-fast) var(--hds-ease), border-color var(--hds-fast) var(--hds-ease);
}
.hds-link:hover { color: var(--hds-accent); border-color: var(--hds-accent-dim); }

/* ---- Stat band: cells split by vertical hairlines, serif numerals ---- */
.hds-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hds-line); }
.hds-stats.cols-6 { grid-template-columns: repeat(6, 1fr); }
.hds-stat { padding: 1.75rem 1.5rem 1.5rem; border-left: 1px solid var(--hds-line); }
.hds-stat:first-child { border-left: none; padding-left: 0; }
.hds-stat-value {
  font-family: var(--hds-font-serif);
  font-weight: 400;
  font-variation-settings: 'SOFT' 50;
  font-size: var(--hds-fs-stat);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hds-stat-value.accent { color: var(--hds-accent); }
.hds-stat-value.cream { color: var(--hds-cream); }
.hds-stat-label {
  margin-top: 0.625rem;
  font-family: var(--hds-font-mono);
  font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--hds-ink-3);
}

/* ---- Hairline grid: cells separated by 1px lines (grid gap trick) ---- */
.hds-grid {
  display: grid;
  gap: 1px;
  background: var(--hds-line);
  border: 1px solid var(--hds-line);
}
.hds-grid > * { background: var(--hds-bg); }
.hds-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.hds-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hds-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Cell / card: kicker, sans title, gray body, ghost Open affordance */
.hds-cell { padding: 1.75rem; transition: background-color var(--hds-fast) var(--hds-ease); position: relative; }
.hds-cell:hover { background: var(--hds-bg-2); }
.hds-cell .k {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--hds-ink-3);
  margin-bottom: 0.875rem;
}
.hds-cell h3 { font-size: var(--hds-fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.hds-cell p { margin-top: 0.5rem; font-size: var(--hds-fs-ui); color: var(--hds-ink-2); }
.hds-cell-open::after {
  content: 'Open \2192';
  display: block; margin-top: 1.25rem;
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--hds-ink-4);
  transition: color var(--hds-fast) var(--hds-ease);
}
.hds-cell-open:hover::after { color: var(--hds-accent); }

/* ---- Table (rankings style) ---- */
.hds-table { width: 100%; border-collapse: collapse; }
.hds-table th {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--hds-ink-3); font-weight: 400;
  text-align: left; padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--hds-line-2);
}
.hds-table td {
  padding: 1rem 0.875rem;
  border-bottom: 1px solid var(--hds-line);
  font-size: var(--hds-fs-ui);
  vertical-align: middle;
}
.hds-table tbody tr { transition: background-color var(--hds-fast) var(--hds-ease); }
.hds-table tbody tr:hover { background: var(--hds-bg-2); }
.hds-table .num {
  font-family: var(--hds-font-mono); font-feature-settings: 'tnum' 1, 'zero' 1;
  font-size: var(--hds-fs-data); text-align: right;
}
.hds-table .up { color: var(--hds-accent); }
.hds-table .down { color: var(--hds-red); }
.hds-roman {
  font-family: var(--hds-font-serif); font-style: italic;
  font-size: 1.0625rem; color: var(--hds-ink-3);
}
.hds-rowtitle { font-weight: 600; font-size: var(--hds-fs-body); }
.hds-rowmeta {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  color: var(--hds-ink-3); margin-top: 2px; letter-spacing: 0.04em;
}

/* ---- Badges / pills ---- */
.hds-pill {
  display: inline-block;
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--hds-r-pill);
  border: 1px solid var(--hds-line-2);
  color: var(--hds-ink-2);
}
.hds-pill.ok { color: var(--hds-accent); border-color: var(--hds-accent-dim); }
.hds-pill.warn { color: var(--hds-amber); border-color: var(--hds-amber-dim); }
.hds-pill.risk { color: var(--hds-red); border-color: var(--hds-red-dim); }

.hds-tag {
  display: inline-block;
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.1875rem 0.5rem;
  background: var(--hds-bg-3); color: var(--hds-ink-2);
  border-radius: var(--hds-r-1);
}

/* ---- Chips (filters) ---- */
.hds-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hds-chip {
  font-family: var(--hds-font-mono); font-size: 0.6875rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--hds-line-2); border-radius: var(--hds-r-2);
  color: var(--hds-ink-2);
  transition: all var(--hds-fast) var(--hds-ease);
  cursor: pointer;
}
.hds-chip:hover { border-color: var(--hds-ink-3); color: var(--hds-ink); }
.hds-chip.on { border-color: var(--hds-accent-dim); color: var(--hds-accent); }

/* ---- Accordion ---- */
.hds-acc { border-top: 1px solid var(--hds-line); }
.hds-acc-item { border-bottom: 1px solid var(--hds-line); }
.hds-acc-head {
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: center;
  width: 100%; padding: 1.25rem 0; text-align: left;
}
.hds-acc-head .idx {
  font-family: var(--hds-font-serif); font-style: italic;
  font-size: 1rem; color: var(--hds-ink-3);
}
.hds-acc-head .t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.hds-acc-head .x {
  font-family: var(--hds-font-mono); color: var(--hds-ink-3);
  transition: transform var(--hds-fast) var(--hds-ease), color var(--hds-fast) var(--hds-ease);
}
.hds-acc-head:hover .x { color: var(--hds-accent); }
.hds-acc-item.open .x { transform: rotate(45deg); }
.hds-acc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--hds-med) var(--hds-ease);
}
.hds-acc-body > div { overflow: hidden; }
.hds-acc-body p {
  padding: 0 0 1.25rem 3rem;
  font-size: var(--hds-fs-ui); color: var(--hds-ink-2); max-width: 58ch;
}
.hds-acc-item.open .hds-acc-body { grid-template-rows: 1fr; }

/* ---- Panel (chart / code frame) ---- */
.hds-panel {
  background: var(--hds-bg-2);
  border: 1px solid var(--hds-line);
  border-radius: var(--hds-r-1);
  padding: 1.5rem;
}
.hds-panel-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 1rem;
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--hds-ink-3);
}
.hds-code {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-data);
  line-height: 1.7; color: #d7dbd5;
  overflow-x: auto; white-space: pre;
}
.hds-code .c { color: var(--hds-ink-3); }
.hds-code .g { color: var(--hds-accent); }

/* ---- Forms (dark) ---- */
.hds-field { display: flex; flex-direction: column; gap: 0.5rem; }
.hds-field + .hds-field { margin-top: 1.5rem; }
.hds-field label {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--hds-ink-3);
}
.hds-field input, .hds-field select, .hds-field textarea {
  width: 100%;
  background: var(--hds-bg-2);
  border: 1px solid var(--hds-line-2);
  border-radius: var(--hds-r-1);
  padding: 0.75rem 0.875rem;
  color: var(--hds-ink);
  font: inherit; font-size: var(--hds-fs-body);
  transition: border-color var(--hds-fast) var(--hds-ease);
}
.hds-field input::placeholder, .hds-field textarea::placeholder { color: var(--hds-ink-3); }
.hds-field input:focus, .hds-field select:focus, .hds-field textarea:focus {
  outline: none; border-color: var(--hds-accent-dim);
}
.hds-field textarea { resize: vertical; min-height: 6rem; }

/* ---- Footer ---- */
.hds-footer { padding: 3rem 0 2rem; }
.hds-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.hds-footer h4 {
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--hds-ink-3);
  margin-bottom: 0.875rem; font-weight: 400;
}
.hds-footer a { color: var(--hds-ink-2); font-size: var(--hds-fs-ui); }
.hds-footer a:hover { color: var(--hds-ink); }
.hds-footer-legal {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--hds-line);
  font-size: 0.75rem; line-height: 1.6; color: var(--hds-ink-3); max-width: 76ch;
}
.hds-footer-meta {
  margin-top: 1rem;
  font-family: var(--hds-font-mono); font-size: var(--hds-fs-micro);
  color: var(--hds-ink-4); letter-spacing: 0.06em;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

/* ---- Sparkline ---- */
.hds-spark { stroke: var(--hds-accent); stroke-width: 1; fill: none; opacity: 0.9; }

/* ---- Reveal (progressive) ---- */
html.hds-js [data-hds-reveal] { opacity: 0; transform: translateY(10px); }
html.hds-js [data-hds-reveal].in {
  opacity: 1; transform: none;
  transition: opacity 500ms var(--hds-ease), transform 500ms var(--hds-ease);
}
html.hds-fallback [data-hds-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hds-ticker-track { animation: none; }
  html.hds-js [data-hds-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hds-band { padding-block: var(--hds-band-pad-m); }
  .hds-stats, .hds-stats.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .hds-stat { padding: 1.25rem 1rem; }
  .hds-stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .hds-grid.cols-3, .hds-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .hds-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hds-nav-links { display: none; }
  .hds-display { font-size: clamp(2.25rem, 8vw, 3rem); }
}
@media (max-width: 560px) {
  .hds-grid.cols-2, .hds-grid.cols-3, .hds-grid.cols-4 { grid-template-columns: 1fr; }
  .hds-stats, .hds-stats.cols-6 { grid-template-columns: 1fr; }
  .hds-stat { border-left: none; padding-inline: 0; }
  .hds-table .hide-m { display: none; }
}