/* legal.css — TIER 3, NON-THEMEABLE legal furniture (ADR-027). Heartbeat, presence-only notice,
   OGL attribution + the loud sync-stale state: the legal-accuracy warranty surface (AGENTS.md).

   Packaged-only and served ONLY from the package StaticFiles mount — a firm's SUBSIDY_BRAND_CSS
   overrides brand.css, never this.

   HOW THE LOCK WORKS: the furniture rules live in a named cascade layer (@layer sl-legal). For
   `!important` declarations a named layer beats UNLAYERED styles regardless of selector specificity
   (CSS Cascade 5 — the layer order is reversed for important, and unlayered important ranks lowest).
   A firm's brand.css is an ordinary unlayered stylesheet, so even a higher-specificity unlayered
   !important rule cannot hide or recolour the furniture. (Mere source-order + flat-selector
   !important did NOT achieve this — a higher-specificity unlayered !important brand rule won on
   specificity. That was the defect this layer closes.) A firm has the
   source and could still edit THIS file, or deliberately declare its own earlier layer, to circumvent
   — that is a licence/warranty matter, not something CSS can prevent; the goal here is that ORDINARY
   re-branding never breaks the furniture by accident.

   SELF-CONTAINED: every --sl-* token used here is a --sl-legal-* token defined here
   (test_legal_css_is_self_contained), so replacing brand.css cannot remove a token the furniture
   depends on. */
:root {
  /* Locked legal palette (unchanged from the pre-split theme). Kept UNLAYERED — these tokens are
     uncontested (brand.css carries no --sl-legal-*, test-enforced), so they need no layer. */
  --sl-legal-text:  #212121;
  --sl-legal-muted: #5A6068;
  --sl-legal-ok:    #1B5E20; --sl-legal-ok-bg:#E8F5E9; --sl-legal-ok-bd:#A5D6A7;
  --sl-legal-warn:  #9B1C1C; --sl-legal-warn-bg:#FDE8E8; --sl-legal-warn-bd:#F0A8A8;
  /* Loud sync-stale state — must dominate. White text on deep red (7.6:1). */
  --sl-legal-stale:        #B3261E;
  --sl-legal-stale-strong: #8E1C16;
  --sl-legal-stale-bg:     #FBE9E7;
  --sl-legal-on-stale:     #FFFFFF;

  /* Self-contained layout/type — legal-local copies so a brand.css override cannot drop a token the
     furniture needs. Values mirror the shipped brand scale; the furniture renders in the brand font
     if present and falls back to the system stack. */
  --sl-legal-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sl-legal-surface: #FFFFFF;
  --sl-legal-border:  #E0E0DE;
  --sl-legal-space-2: 8px;
  --sl-legal-radius-sm:   4px;
  --sl-legal-radius-pill: 999px;
  --sl-legal-overline-tracking: 0.1em;
  --sl-legal-t-caption:  400 13px/18px var(--sl-legal-font);
  --sl-legal-t-body-sm:  400 14px/21px var(--sl-legal-font);
  --sl-legal-t-overline: 600 12px/16px var(--sl-legal-font);
}

/* The furniture lives in a named layer so its !important locks beat any unlayered brand override. */
@layer sl-legal {
  /* ---- Heartbeat banner (LEGAL FURNITURE — locked tier) ------------------------- */
  /* Sits full-width directly under the sticky header so a dead poller is loud on every screen.
     Healthy: a slim green strip. Stale/degraded/error: a dominant deep-red bar. Colours come ONLY
     from --sl-legal-* and display/colour are !important within @layer sl-legal, so no unlayered
     brand override can hide or recolour it. */
  .sl-heartbeat { display: block !important; width: 100% !important; font: var(--sl-legal-t-caption); }
  .sl-heartbeat__inner { display: flex; align-items: center; gap: var(--sl-legal-space-2); padding: 8px 1.5rem; }
  .sl-heartbeat__text { flex: 1; }
  .sl-heartbeat--ok {
    background: var(--sl-legal-ok-bg) !important; color: var(--sl-legal-ok) !important;
    border-bottom: 1px solid var(--sl-legal-ok-bd);
  }
  .sl-heartbeat--ok .sl-heartbeat__dot {
    width: 8px; height: 8px; border-radius: var(--sl-legal-radius-pill);
    background: var(--sl-legal-ok); flex: 0 0 auto;
  }
  .sl-heartbeat--stale {
    background: var(--sl-legal-stale-strong) !important; color: var(--sl-legal-on-stale) !important;
  }
  .sl-heartbeat--stale .sl-heartbeat__inner { padding-top: 10px; padding-bottom: 10px; font-weight: 600; }
  .sl-heartbeat--stale .sl-heartbeat__icon { font-size: 1rem; flex: 0 0 auto; }
  .sl-heartbeat--stale .sl-heartbeat__label {
    flex: 0 0 auto; border: 1px solid var(--sl-legal-on-stale); border-radius: var(--sl-legal-radius-pill);
    padding: 1px 8px; font: var(--sl-legal-t-overline); letter-spacing: var(--sl-legal-overline-tracking);
  }
  .sl-heartbeat--stale .sl-heartbeat__pulse {
    width: 9px; height: 9px; border-radius: var(--sl-legal-radius-pill);
    background: var(--sl-legal-on-stale); flex: 0 0 auto; animation: sl-pulse 1.6s ease-in-out infinite;
  }
  @keyframes sl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) { .sl-heartbeat__pulse { animation: none; } }

  /* ---- Presence-only notice (LEGAL FURNITURE) ----------------------------------- */
  /* Footnote, not a banner (#173): same position (top of every <main>, same reach as before) — only
     the visual treatment changed, from a callout box to a plain quiet line. No background fill, no
     accent border, caption-sized muted text (matches .sl-caveat's register elsewhere on the site). */
  .sl-presence {
    display: block !important;
    margin: 0.75rem 0; padding: 0;
    font: var(--sl-legal-t-caption); color: var(--sl-legal-muted) !important;
  }

  /* ---- Footer (OGL attribution — LEGAL FURNITURE) ------------------------------- */
  .sl-footer { display: block !important; margin-top: 2.5rem; border-top: 1px solid var(--sl-legal-border); background: var(--sl-legal-surface); }
  .sl-footer .sl-wrap { padding: 1.5rem; font: var(--sl-legal-t-caption); color: var(--sl-legal-muted); line-height: 1.7; }
  .sl-footer .ogl { color: var(--sl-legal-text) !important; }
}