/* ─────────────────────────────────────────────────────────────
   WHEEL.AI — Linear design language (authentic tokens)
   Source of truth: LINEAR.DESIGN.md
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces (luminance-stepped dark) ─────────────────────── */
  --bg:            #08090a;  /* Marketing black — canvas            */
  --bg-panel:      #0f1011;  /* Panel dark — sidebars, top bar      */
  --bg-elev:       #191a1b;  /* Level 3 — elevated cards, dropdowns */
  --bg-elev-2:     #28282c;  /* Secondary surface — hover states    */

  /* Translucent surfaces (Linear's native card background) */
  --surface-02:    rgba(255,255,255,0.02);
  --surface-04:    rgba(255,255,255,0.04);
  --surface-05:    rgba(255,255,255,0.05);
  --surface-08:    rgba(255,255,255,0.08);

  /* ── Borders (semi-transparent white, wireframe-in-moonlight) ─ */
  --border-subtle:   rgba(255,255,255,0.05);
  --border-standard: rgba(255,255,255,0.08);
  --border-solid-1:  #23252a;
  --border-solid-2:  #34343a;
  --border-solid-3:  #3e3e44;

  /* ── Text hierarchy (never pure white) ─────────────────────── */
  --text-primary:    #f7f8f8;  /* Default text                     */
  --text-secondary:  #d0d6e0;  /* Body copy, descriptions          */
  --text-tertiary:   #8a8f98;  /* Metadata, placeholders           */
  --text-quaternary: #62666d;  /* Timestamps, subtle labels        */

  /* ── Brand + Accent (only chromatic color in the system) ───── */
  --brand:        #5e6ad2;  /* Indigo — CTA buttons, brand marks   */
  --accent:       #7170ff;  /* Violet — links, active states       */
  --accent-hover: #828fff;  /* Lighter violet — hover on accents   */
  --accent-soft:  rgba(113,112,255,0.14);
  --accent-ring:  rgba(113,112,255,0.28);
  --brand-soft:   rgba(94,106,210,0.14);

  /* ── Status (used ONLY for financial signals) ──────────────── */
  --up:          #27a644;  /* Linear "in progress" green           */
  --up-bright:   #10b981;  /* Emerald — badges                     */
  --down:        #e55c5c;
  --warn:        #d4a548;
  --up-soft:     rgba(39,166,68,0.14);
  --down-soft:   rgba(229,92,92,0.14);
  --warn-soft:   rgba(212,165,72,0.14);
  --neutral-soft: rgba(138,143,152,0.12);

  /* ── Fonts ─────────────────────────────────────────────────── */
  --sans: "Inter Variable", "Inter", "SF Pro Display", -apple-system,
          BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* ── Motion ────────────────────────────────────────────────── */
  --tx: 120ms ease-out;

  /* ── Back-compat aliases ───────────────────────────────────────
     app.js has inline styles that reference the earlier token names.
     Keeping them mapped to the closest authentic Linear tokens so
     inline styles continue to resolve. Prefer the authentic names
     in new code.
     ──────────────────────────────────────────────────────────── */
  --text:           var(--text-primary);
  --text-dim:       var(--text-tertiary);
  --text-faint:     var(--text-quaternary);
  --bg-surface:     var(--bg-panel);
  --bg-surface-2:   var(--bg-elev);
  --bg-surface-3:   var(--bg-elev-2);
  --border:         var(--border-standard);
  --border-strong:  var(--border-solid-2);
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Global type base — the Linear signature ─────────────────── */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* cv01 + ss03 are non-negotiable — without them it's generic Inter */
  font-feature-settings: "cv01", "ss03";
  font-variant-ligatures: common-ligatures;
}

/* Numeric columns and price data */
.mono,
.kv-grid dd,
.price-hero .symbol,
.price-hero .price,
.price-hero .chg,
.trade-block .val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

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

code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--surface-05);
  color: var(--text-primary);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border-subtle);
}

/* ── Top bar ─────────────────────────────────────────────────── */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: rgba(8,9,10,0.75);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 510;             /* Linear's signature weight */
  letter-spacing: -0.01em;
  font-size: 13px;
  color: var(--text-primary);
}
.logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.brand-accent { color: var(--accent); }

/* Ghost icon button — classic Linear */
.icon-btn {
  background: var(--surface-02);
  border: 1px solid var(--border-solid-1);
  color: var(--text-secondary);
  width: 30px; height: 30px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--tx), color var(--tx), background var(--tx);
}
.icon-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-solid-2);
  background: var(--surface-05);
}

/* ── Layout ──────────────────────────────────────────────────── */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* Display-scale heading — aggressive negative tracking */
.hero h1 {
  font-size: 32px;
  font-weight: 510;
  letter-spacing: -0.704px;     /* matches Linear's H1 spec */
  line-height: 1.15;
  color: var(--text-primary);
  margin: 4px 0 10px;
}
.tagline {
  color: var(--text-secondary);
  font-size: 15px;
  letter-spacing: -0.165px;
  line-height: 1.5;
  margin: 0 0 22px;
  max-width: 58ch;
}

/* ── Search row ──────────────────────────────────────────────── */
.search-row {
  display: flex;
  gap: 8px;
}
.search-row input {
  flex: 1;
  min-width: 0;
  background: var(--surface-02);
  border: 1px solid var(--border-standard);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 0 14px;
  height: 38px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 510;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  transition: border-color var(--tx), box-shadow var(--tx), background var(--tx);
}
.search-row input::placeholder {
  color: var(--text-quaternary);
  letter-spacing: 2px;
  font-weight: 400;
}
.search-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: var(--surface-04);
}

/* ── Buttons ─────────────────────────────────────────────────── */

/* Primary brand button — #5e6ad2, hover #828fff */
.primary-btn {
  background: var(--brand);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 6px;
  height: 38px;
  padding: 0 18px;
  font-family: inherit;
  font-weight: 510;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--tx), transform 60ms ease-out;
}
.primary-btn:hover { background: var(--accent-hover); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled {
  background: var(--surface-05);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Ghost button — translucent, hairline border */
.ghost-btn {
  background: var(--surface-02);
  color: #e2e4e7;
  border: 1px solid var(--border-solid-1);
  border-radius: 6px;
  height: 34px;
  padding: 0 14px;
  font-weight: 510;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--tx), border-color var(--tx);
}
.ghost-btn:hover {
  background: var(--surface-05);
  border-color: var(--border-solid-2);
}

.helper-text {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 400;
}

/* ── Status bar ──────────────────────────────────────────────── */
.status {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-02);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
}
.status.error {
  border-color: rgba(229,92,92,0.3);
  color: var(--down);
  background: var(--down-soft);
}
.status.ok {
  border-color: rgba(39,166,68,0.3);
  color: var(--up);
  background: var(--up-soft);
}
.status.hidden { display: none; }

.loading-dots::after {
  content: ''; animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; } 25% { content: '.'; }
  50% { content: '..'; } 75% { content: '...'; }
}

/* Linear-style pill: transparent bg, solid hairline border, 9999px radius */
.cached-pill {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 510;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-solid-1);
  border-radius: 9999px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Cards ───────────────────────────────────────────────────── */
.results { margin-top: 16px; display: grid; gap: 12px; }

/* Translucent card — never solid opaque */
.card {
  background: var(--surface-02);
  border: 1px solid var(--border-standard);
  border-radius: 8px;
  overflow: hidden;
}
.card-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 590;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-04);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-body { padding: 14px; }

/* Hero price row — elevated surface */
.price-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: var(--surface-04);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.price-hero .symbol {
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -0.24px;
  color: var(--text-primary);
}
.price-hero .company {
  color: var(--text-tertiary);
  font-size: 12px;
  margin-top: 2px;
  font-family: var(--sans);
  font-weight: 400;
}
.price-hero .price {
  font-size: 22px;
  font-weight: 510;
  letter-spacing: -0.288px;
  text-align: right;
  color: var(--text-primary);
}
.price-hero .chg {
  font-size: 12px;
  font-weight: 510;
  text-align: right;
  margin-top: 2px;
}
.asof-line {
  padding: 8px 16px;
  color: var(--text-quaternary);
  font-size: 11px;
  font-weight: 400;
}

/* ── KV grid ─────────────────────────────────────────────────── */
.kv-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}
.kv-grid dt {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 400;
}
.kv-grid dd {
  margin: 0;
  font-size: 13px;
  font-weight: 510;
  text-align: right;
  word-break: break-word;
  color: var(--text-primary);
}

/* ── Pills (Linear style: 9999 radius, 510 weight, 12px) ──── */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 510;
  letter-spacing: -0.13px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.pill-up      { background: var(--up-soft);      color: var(--up);   border-color: rgba(39,166,68,0.22); }
.pill-down    { background: var(--down-soft);    color: var(--down); border-color: rgba(229,92,92,0.22); }
.pill-neutral { background: transparent;         color: var(--text-secondary); border-color: var(--border-solid-1); }
.pill-warn    { background: var(--warn-soft);    color: var(--warn); border-color: rgba(212,165,72,0.22); }

/* ── Prose helpers ───────────────────────────────────────────── */
.line { margin: 4px 0; color: var(--text-secondary); }
.line-label {
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 590;
  margin: 14px 0 6px;
}
.num-up   { color: var(--up); }
.num-down { color: var(--down); }

ul.bullets {
  margin: 4px 0 6px;
  padding-left: 18px;
  color: var(--text-secondary);
}
ul.bullets li { margin-bottom: 4px; }
ul.bullets.sources-list li {
  color: var(--text-tertiary);
  font-size: 12px;
}

/* ── Two-column ──────────────────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ── Trade blocks (small elevated cards) ─────────────────────── */
.trade-block {
  background: var(--surface-04);
  border: 1px solid var(--border-standard);
  border-radius: 6px;
  padding: 10px 12px;
}
.trade-block .label {
  color: var(--text-tertiary);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 590;
}
.trade-block .val {
  font-size: 18px;
  font-weight: 510;
  letter-spacing: -0.22px;
  margin-top: 2px;
  color: var(--text-primary);
}

/* ── Raw preview ─────────────────────────────────────────────── */
pre.raw {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-02);
  border: 1px solid var(--border-standard);
  border-radius: 6px;
  padding: 10px;
}

/* ── Disclaimer ──────────────────────────────────────────────── */
.disclaimer {
  max-width: 720px;
  margin: 8px auto 36px;
  padding: 12px 16px;
  background: var(--surface-02);
  border: 1px dashed var(--border-standard);
  border-radius: 8px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.55;
}
.disclaimer strong {
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 590;
  margin-right: 4px;
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);       /* Linear's overlay token */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  position: relative;
  width: min(440px, calc(100% - 24px));
  background: var(--bg-elev);
  border: 1px solid var(--border-standard);
  border-radius: 12px;
  /* Ring shadow (Linear's substitute for borders on elevated surfaces) */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2),
              0 24px 60px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.04);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 590;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.modal-body { padding: 16px; }
.modal-body label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 590;
}
.modal-body input {
  width: 100%;
  background: var(--surface-02);
  border: 1px solid var(--border-standard);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 0 12px;
  height: 36px;
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  transition: border-color var(--tx), box-shadow var(--tx);
}
.modal-body input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.modal-body .help {
  margin: 6px 0 0;
  color: var(--text-quaternary);
  font-size: 11.5px;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.mini-status {
  font-size: 12px;
  color: var(--text-tertiary);
}
.mini-status.ok  { color: var(--up); }
.mini-status.err { color: var(--down); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  color: var(--text-tertiary);
  padding: 32px 20px;
  font-size: 13px;
  line-height: 1.6;
}
.empty-state .big {
  display: flex;
  margin: 0 auto 14px;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--accent);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 590;
}

/* Small screens */
@media (max-width: 520px) {
  .container { padding: 20px 14px 40px; }
  .hero h1 { font-size: 26px; letter-spacing: -0.572px; }
  .price-hero .symbol { font-size: 18px; }
  .price-hero .price  { font-size: 20px; }
}