/* Sijal design tokens shared by the homepage and the decision report. Gold = the ruling, steel = the case against. */
:root{
  --sj-charcoal:#161819;--sj-paper:#F4EEE2;
  --sj-card-dark:#1E2022;--sj-card-dark-b:#393833;--sj-card-white:#FFFFFF;--sj-card-white-b:#D9D0BC;
  --sj-ink:#111614;--sj-text-light:#3E4642;--sj-muted-light:#5A625E;--sj-muted-dark:#BDB7A8;
  --sj-gold:#D4A855;--sj-gold-text:#7A5A16;--sj-gold-deep:#8F6B1E;
  --sj-steel:#5F93B5;--sj-steel-light:#8DB7D4;--sj-steel-deep:#2F5D7A;
  --sj-line-light:#D9D0BC;--sj-line-dark:#333B37;--sj-mb-paper:#CDBF9F;--sj-mb-dark:#4A3F28;
  --sj-serif:'ThmanyahSerif',Georgia,serif;--sj-sans:'ThmanyahSans',system-ui,sans-serif;
}

/* Bands: the shared rhythm of every Sijal page. The first band is charcoal, then charcoal and paper alternate.
   A band sets the variables its content reads (text, muted text, hairline, card, side colours), so one component
   looks right on either. New pages use these classes; existing pages are not converted. */
.band{--band-pad:24px;padding:48px max(var(--band-pad),env(safe-area-inset-right)) 48px max(var(--band-pad),env(safe-area-inset-left))}
.band--charcoal{background-color:#161819;background-image:radial-gradient(rgba(244,238,226,0.05) 1px,transparent 1.3px);background-size:14px 14px;color:#F4EEE2;
  --b-bg:#161819;--b-text:#F4EEE2;--b-muted:#BDB7A8;--b-line:#333B37;--b-card:#1E2022;--b-card-line:#393833;--b-label:#D4A855;
  --b-for:#EDE6D6;--b-for-bg:rgba(237,230,214,.12);--b-against:#8DB7D4;--b-against-bg:rgba(141,183,212,.14);--b-ruling:#D4A855}
.band--paper{background-color:#F4EEE2;color:#111614;
  --b-bg:#F4EEE2;--b-text:#111614;--b-muted:#5A625E;--b-line:#D9D0BC;--b-card:#FBF8F1;--b-card-line:#D9D0BC;--b-label:#7A5A16;
  --b-for:#7A5A16;--b-for-bg:#F3E9D2;--b-against:#2F5D7A;--b-against-bg:#E3EBF1;--b-ruling:#8F6B1E}
@media (min-width:1440px){.band{--band-pad:64px}}