/* Shared components.
 *
 * Every class here was defined in 2-5 templates before extraction: .wrap in
 * five, .kicker in four, .card/.bicon/.brand in three, and the stance and
 * direction tokens in two each. Duplicating them is exactly how daily.html and
 * duck_symbol.html drifted apart.
 */

/* ---- page column ------------------------------------------------------- */
.wrap {
  max-width: var(--colw, 1060px);
  margin: 0 auto;
  padding: 0 20px var(--sp-7);
}

/* ---- section furniture -------------------------------------------------
 * The eyebrow IS the section separator. Sections are divided by whitespace
 * plus one of these, never by a rule — hairlines mean "these are peer rows".
 */
/* Colour is --duck-deep, not --dim: three of the four templates that carry
 * this class (about, welcome, settings) independently chose the brand green
 * for this exact role, matching --fs-0's own "eyebrow / kicker" comment.
 * daily.html is the deliberate outlier — see its own :root-adjacent rule for
 * why. */
.kicker {
  font-family: var(--mono);
  font-size: var(--fs-0);
  font-weight: var(--w-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--duck-deep);
  margin: var(--sp-1) 0 var(--sp-2);
}

/* max-width matches welcome.html's and settings.html's identical original
 * value; error.html's lede is genuinely bigger (--fs-4, 52ch) and keeps its
 * own override. */
.lede { font-size: var(--fs-3); color: var(--dim); max-width: 56ch; }
/* color is --dim, not --faint: both actual consumers (daily.html,
 * duck_symbol.html) independently chose the more legible grey for "nothing
 * here yet" copy, and font-style:italic is the one property both agreed on
 * that this rule was missing entirely. Padding stays out of this rule on
 * purpose — daily (10px) and duck_symbol (12px) don't even agree with each
 * other, so there is no consensus value to promote. */
.empty { font-size: var(--fs-2); color: var(--dim); font-style: italic; padding: var(--sp-4) 0; }

/* ---- surfaces ----------------------------------------------------------
 * background is --panel (not --paper): of the class's original sources,
 * about.html and duck_symbol.html both independently chose the same subtle
 * off-white (#fafbfc, exactly what --panel is for) over flat white — the
 * same surface daily.html's .analyst/.kpi/.livestrip and duck_admin.html's
 * .preview already use for this identical "raised card on a white page"
 * concept. */
.card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

/* ---- stance -----------------------------------------------------------
 * duck = bullish, cuck = bearish, sit = no edge. Per-symbol views are RAW:
 * "bull SQQQ" means buy SQQQ. Only market-direction AGGREGATES flip for
 * inverse ETFs, and that flip lives in the aggregate code, not here.
 */
.badge, .b-duck, .b-cuck, .b-sit {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: var(--w-bold);
  border-radius: var(--r-xs);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
.b-duck { background: var(--duck-bg); color: var(--duck-deep); }
.b-cuck { background: var(--cuck-bg); color: var(--cuck-deep); }
.b-sit  { background: var(--sit-bg);  color: var(--dim); }

/* ---- direction --------------------------------------------------------
 * Same raw-vs-aggregate rule as stance above. */
.up { color: var(--duck-deep); }
.dn { color: var(--cuck-deep); }

/* ---- chips ------------------------------------------------------------
 * Every .chip on the site sits on a DARK hero, so this is a dark-surface
 * pill by default — a light one would be styling for a case that does not
 * exist.
 *
 * This unifies two drifted implementations of the same pill: `.subbanner
 * .chip` (10.5px, border .25, padding 3px 10px) and four leaderboard-hero
 * chips that hardcoded the same component INLINE at 11.5px, border .2,
 * padding 4px 11px. Same pill, two sets of numbers, neither reusable.
 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-0);
  font-weight: var(--w-mid);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3);
}
/* The one chip that carries meaning rather than label. */
.chip--accent { color: #a7f3d0; }

/* ---- brand & icons ----------------------------------------------------- */
.brand {
  font-family: var(--display);
  font-size: var(--fs-4);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
/* Fixed px, not 1em: daily.html and duck_symbol.html carried byte-identical
 * local copies at 12px/-2px/3px margin — real, agreeing drift from this
 * rule's old 1em, not two independent choices. about.html's 15px is a
 * genuine third variant (a bigger inline mark next to its "Duck"/"Cuck"
 * explainer headings) and keeps its own override. fill:currentColor is kept
 * for robustness even though every current icon-duck/-cuck/-sit def already
 * colours its own paths, so it is a no-op today. */
.bicon { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; fill: currentColor; }

/* ---- buttons ----------------------------------------------------------- */
.gbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--body);
  font-size: var(--fs-2);
  font-weight: var(--w-bold);
  border: 0;
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
}

.sharebar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }