/* ============================================================
   QUORUM — brand layer
   ------------------------------------------------------------
   Loaded AFTER style.css, on purpose. style.css still owns the
   whole research-terminal system (layout, tables, charts, auth
   cards); this file only carries what changed when the product
   was named and moved to quorum-signals.com:

     - the header/auth lockup (Q mark + QUORUM wordmark)
     - the site footer that signs the house
     - gold as the convergence accent
     - the convergence chip (QUORUM n/3)

   Nothing here introduces a colour that isn't already in the
   Mohawk Research palette. Gold (#d4b95a) was already in
   style.css as the favourites-star colour - it's promoted to a
   named token here and given its second job.
   ============================================================ */

:root {
  /* Named tokens for values style.css already used inline. */
  --gold: #d4b95a;
  --gold-bright: #e0c76e;
  --gold-dim: rgba(212, 185, 90, 0.35);
}

/* ---------- Header lockup ---------- */

/* The header mark is 34 px, which is below the 48 px floor for the
   twelve-member ring - so the header uses the reduced solid-ring form.
   Swapping quorum-mark.svg for quorum-monogram.svg here would break the
   brand rule and mush the members together. */
.brand-mark {
  height: 34px;
  width: 34px;
}

.brand-word { gap: 0.12rem; }

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.brand-tagline {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.17em;
  color: var(--muted);
  /* One line, always - the lockup breaks apart if the baseline wraps. */
  white-space: nowrap;
}

.brand:hover .brand-name { color: var(--fg); }

/* ---------- Auth card lockup ---------- */

/* 66 px - well above the 48 px floor, so the full member ring is used here. */
.auth-brand-mark {
  height: 66px;
  width: 66px;
  filter: none;                 /* the gold tail is the accent; no glow */
}

.auth-brand-name {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.auth-brand-house {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.55rem;
}

/* ---------- Site footer ---------- */

/* The product leads on screen; the house signs the page. Present on
   every view, including the auth pages. */
.site-footer {
  margin-top: 3.5rem;
  padding: 1.4rem clamp(1rem, 2.5vw, 2.75rem) 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer .footer-house { color: var(--muted); }
.site-footer .footer-note {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  opacity: 0.75;
}

/* ---------- Convergence chip ---------- */

/* Direction (bullish/neutral/bearish) is answered by .ai-rating, which
   style.css already owns. This is the OTHER question: how many of the
   three independent sources agree. Filled gold only at 3/3 - the chip is
   a count, never a score. */
.q-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.42rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.q-chip-3 {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg);
}
.q-chip-2 {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(212, 185, 90, 0.08);
}
.q-chip-1 { color: var(--muted); }

.q-col, .q-col-header { width: 4.25rem; text-align: center; }

/* The favourites star and the convergence chip are both gold on purpose:
   one meaning, "worth a second look". They stay told apart by shape -
   a star is user-owned, a chip is system-owned. */
.fav-star.is-fav { color: var(--gold); }
.fav-star.is-fav:hover { color: var(--gold-bright); }

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .brand-mark { height: 28px; width: 28px; }
  .brand-name { font-size: 0.94rem; }
  .brand-tagline { font-size: 0.5rem; letter-spacing: 0.12em; }
  .site-footer { font-size: 0.6rem; gap: 0.5rem 1rem; }
  .site-footer .footer-note { margin-left: 0; }
}