/* editorial-signal.css — the shared EditorialSignal "5-lens" card.
 *
 * ONE stylesheet for the Signal card wherever it renders: the public Research
 * Intelligence page (server-rendered via EditorialSignal.astro) AND the green
 * community reader (client-rendered via content/editorial-signal.mjs). Both build
 * the same `.esig-*` DOM, so this file is the single source of truth for the look.
 *
 * House-locked type (TEMPLATE-STANDARD.md): headlines = --font-display (Cormorant),
 * body = --font-body (EB Garamond), labels = --font-ui (DM Sans). Those vars come from
 * lc-standard.css, which both BaseLayout and MemberLayout already load.
 *
 * Colour: the Signal is an Intelligence / Labora Rounds product, so its accent is the
 * house gold by default (--esig-accent), overridable per host. Prose-level text inherits
 * the host body colour (dark ink on the public warm bg AND on the community cream), so
 * the card sits correctly on either background; carded elements carry their own surface.
 */
.esig {
  --esig-accent: var(--gold, #9E7D0A);
  --esig-surface: #ffffff;
  --esig-ink: #2a2320;
  --esig-muted: #6b5f56;
  --esig-line: rgba(0, 0, 0, 0.08);
  --esig-crisis: #b8443f;
  font-family: var(--font-body, 'EB Garamond', Georgia, serif);
  color: inherit;
}

/* Eyebrow + status */
.esig-eyebrow {
  display: block;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--esig-accent); margin: 0 0 0.75rem;
}
.esig-status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--esig-crisis); background: rgba(184, 68, 63, 0.1);
  border: 1px solid rgba(184, 68, 63, 0.32); border-radius: 999px; padding: 0.35rem 0.85rem;
  margin: 0 0 1.5rem;
}
.esig-status .esig-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--esig-crisis); }

/* Section labels — the through-line that structures the card */
.esig-slabel {
  display: block; font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--esig-accent); margin: 2.5rem 0 0.85rem;
}
.esig-slabel:first-child { margin-top: 0; }

/* Lead consequence + the "for everyone" hook (prose-level: inherit host colour) */
.esig-lead { font-size: 1.08rem; line-height: 1.75; margin: 0 0 1rem; }
.esig-h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; line-height: 1.2; margin: 0 0 1.1rem;
}
.esig-hook {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.2rem; line-height: 1.5; font-style: italic;
  border-left: 3px solid var(--esig-accent); padding: 0.3rem 0 0.3rem 1.2rem; margin: 0.5rem 0 0.25rem;
}

/* The 5 lenses — one card per audience */
.esig-aud {
  background: var(--esig-surface); color: var(--esig-ink);
  border: 1px solid var(--esig-line); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 0 0 0.85rem;
}
.esig-aud-label {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--esig-accent); margin: 0 0 0.5rem;
}
.esig-aud-text { font-size: 0.98rem; line-height: 1.7; }

/* Next steps — accent-numbered */
.esig-steps { counter-reset: esig; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.esig-steps li {
  position: relative; padding: 0.35rem 0 0.35rem 2.1rem; font-size: 0.98rem; line-height: 1.6;
}
.esig-steps li::before {
  counter-increment: esig; content: counter(esig);
  position: absolute; left: 0; top: 0.35rem; width: 1.45rem; height: 1.45rem;
  background: var(--esig-accent); color: #fff; border-radius: 50%;
  font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Sources & provenance — cited claims with optional verification screenshots */
.esig-cites { display: grid; gap: 1rem; margin-top: 0.5rem; }
.esig-cite {
  background: var(--esig-surface); color: var(--esig-ink);
  border: 1px solid var(--esig-line); border-left: 3px solid var(--esig-accent);
  border-radius: 8px; padding: 1rem 1.15rem;
}
.esig-cite-claim { font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.55rem; }
.esig-cite-links {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center;
  font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 0.76rem; font-weight: 600; margin: 0 0 0.4rem;
}
.esig-cite-links a { color: var(--esig-accent); text-decoration: none; }
.esig-cite-links a:hover { text-decoration: underline; }
.esig-cite-shot { display: block; width: 100%; max-width: 440px; border: 1px solid var(--esig-line); border-radius: 6px; margin-top: 0.5rem; }
.esig-cite-pending { font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 0.8rem; opacity: 0.75; }

.esig-source {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--esig-line);
  font-family: var(--font-ui, 'DM Sans', sans-serif); font-size: 0.82rem; line-height: 1.7;
}
.esig-source b { font-weight: 700; }