/**
 * Cheralis Resources Content — component styles
 * Rich article components: tables, figures, charts, callouts, FAQ, takeaways.
 * Brand: navy #1A2B3C · gold #E8912D · green #2E7D5A · cream #F6ECD9.
 * Type: Playfair Display (display) + DM Sans (body).
 * Designed fresh for Cheralis — not shared with any other site.
 */

.article-body{
  --cr-navy:#1A2B3C;
  --cr-navy-2:#2D4356;
  --cr-gold:#E8912D;
  --cr-gold-2:#F5A84D;
  --cr-gold-dk:#C77A1F;
  --cr-green:#2E7D5A;
  --cr-green-2:#3D9B72;
  --cr-cream:#F6ECD9;
  --cr-cream-2:#FBF6EC;
  --cr-ink:#28313B;
  --cr-mute:#6C757D;
  --cr-line:#E4E7EB;
  --cr-red:#B3402F;
  --cr-radius:14px;
  --cr-shadow:0 10px 30px -14px rgba(26,43,60,.28);
  --cr-disp:'Playfair Display',Georgia,serif;
  --cr-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* give every block room to breathe */
.article-body .cr-tw,
.article-body .cr-fig,
.article-body .cr-bars,
.article-body .cr-note,
.article-body .cr-tip,
.article-body .cr-warn,
.article-body .cr-myth,
.article-body .cr-take,
.article-body .cr-chips,
.article-body .cr-faq,
.article-body .cr-sources{ margin:2rem 0; }

/* ============================================================= TABLES */
.article-body .cr-tw{
  overflow-x:auto;
  border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);
  box-shadow:var(--cr-shadow);
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.article-body .cr-tw table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--cr-body);
  font-size:.95rem;
  margin:0;
}
.article-body .cr-tw caption{
  caption-side:top;
  text-align:left;
  font-family:var(--cr-body);
  font-weight:600;
  color:var(--cr-navy);
  padding:1rem 1.15rem .9rem;
  border-left:4px solid var(--cr-gold);
  background:var(--cr-cream-2);
  font-size:.9rem;
  line-height:1.4;
}
.article-body .cr-tw thead th{
  background:var(--cr-navy);
  color:#fff;
  font-weight:600;
  text-align:left;
  padding:.8rem 1.1rem;
  font-size:.82rem;
  letter-spacing:.02em;
  white-space:nowrap;
  border:none;
}
.article-body .cr-tw thead th.num{ text-align:right; }
.article-body .cr-tw tbody th[scope=row]{
  text-align:left;
  font-weight:600;
  color:var(--cr-navy);
  padding:.75rem 1.1rem;
  border-top:1px solid var(--cr-line);
}
.article-body .cr-tw tbody td{
  padding:.75rem 1.1rem;
  border-top:1px solid var(--cr-line);
  color:var(--cr-ink);
  vertical-align:top;
}
.article-body .cr-tw td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.article-body .cr-tw tbody tr:nth-child(even) th[scope=row],
.article-body .cr-tw tbody tr:nth-child(even) td{ background:var(--cr-cream-2); }
.article-body .cr-tw tbody tr.is-hi th[scope=row],
.article-body .cr-tw tbody tr.is-hi td{ background:rgba(232,145,45,.12); }
.article-body .cr-tw tbody tr.is-hi th[scope=row]{ box-shadow:inset 4px 0 0 var(--cr-gold); }

/* status tags inside tables */
.article-body .cr-tag{
  display:inline-block;
  padding:.18em .6em;
  border-radius:999px;
  font-size:.74rem;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
  background:var(--cr-navy);
  color:#fff;
}
.article-body .cr-tag--good{ background:rgba(46,125,90,.15); color:#1f5e42; }
.article-body .cr-tag--warn{ background:rgba(232,145,45,.18); color:#9a5b11; }
.article-body .cr-tag--info{ background:rgba(26,43,60,.1); color:var(--cr-navy); }
.article-body .cr-tag--bad{ background:rgba(179,64,47,.14); color:#8a2e20; }

/* ============================================================= FIGURES (SVG) */
.article-body .cr-fig{
  background:#fff;
  border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);
  box-shadow:var(--cr-shadow);
  padding:1.1rem 1.1rem .4rem;
}
.article-body .cr-fig > svg{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  overflow:hidden;
}
.article-body .cr-cap{
  font-family:var(--cr-body);
  font-size:.82rem;
  color:var(--cr-mute);
  margin:.7rem .2rem .6rem;
  line-height:1.5;
}
.article-body .cr-cap b{ color:var(--cr-gold-dk); }

/* ============================================================= CSS BAR CHART */
.article-body .cr-bars{
  background:var(--cr-cream-2);
  border:1px solid var(--cr-line);
  border-radius:var(--cr-radius);
  padding:1.3rem 1.4rem;
}
.article-body .cr-bars__title{
  font-family:var(--cr-body);
  font-weight:700;
  color:var(--cr-navy);
  margin:0 0 1rem;
  font-size:.98rem;
}
.article-body .cr-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:.45rem 0;
  padding:.55rem .8rem;
  border-radius:8px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--cr-line);
  overflow:hidden;
}
.article-body .cr-bar::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:calc(var(--v,50) * 1%);
  background:linear-gradient(90deg,var(--cr-navy),var(--cr-navy-2));
  opacity:.16;
  z-index:0;
}
.article-body .cr-bar--warn::before{ background:linear-gradient(90deg,var(--cr-gold),var(--cr-gold-2)); opacity:.22; }
.article-body .cr-bar--good::before{ background:linear-gradient(90deg,var(--cr-green),var(--cr-green-2)); opacity:.2; }
.article-body .cr-bar--bad::before{ background:var(--cr-red); opacity:.14; }
.article-body .cr-bar span{ position:relative; z-index:1; color:var(--cr-ink); font-size:.9rem; }
.article-body .cr-bar b{
  position:relative; z-index:1;
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--cr-navy);
  white-space:nowrap;
}
.article-body .cr-bars__note{
  font-size:.8rem;
  color:var(--cr-mute);
  margin:1rem 0 0;
  line-height:1.5;
}

/* ============================================================= CALLOUTS */
.article-body .cr-note,
.article-body .cr-tip,
.article-body .cr-warn{
  border-radius:var(--cr-radius);
  padding:1.05rem 1.25rem;
  border-left:5px solid var(--cr-gold);
  background:var(--cr-cream-2);
}
.article-body .cr-note p,
.article-body .cr-tip p,
.article-body .cr-warn p{ margin:0; color:var(--cr-ink); line-height:1.6; }
.article-body .cr-note p strong,
.article-body .cr-tip p strong,
.article-body .cr-warn p strong{
  display:block;
  font-family:var(--cr-body);
  color:var(--cr-navy);
  margin-bottom:.25rem;
  letter-spacing:.01em;
}
.article-body .cr-tip{ border-left-color:var(--cr-green); background:rgba(46,125,90,.07); }
.article-body .cr-tip p strong{ color:var(--cr-green); }
.article-body .cr-warn{ border-left-color:var(--cr-red); background:rgba(179,64,47,.06); }
.article-body .cr-warn p strong{ color:var(--cr-red); }

/* ============================================================= MYTH / FACT */
.article-body .cr-myth{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-radius:var(--cr-radius);
  overflow:hidden;
  box-shadow:var(--cr-shadow);
  border:1px solid var(--cr-line);
}
.article-body .cr-myth>div{ padding:1.15rem 1.3rem; }
.article-body .cr-myth>div:first-child{ background:var(--cr-navy); }
.article-body .cr-myth>div:last-child{ background:#fff; }
.article-body .cr-myth p{ margin:.5rem 0 0; line-height:1.55; }
.article-body .cr-myth>div:first-child p{ color:rgba(255,255,255,.92); }
.article-body .cr-myth>div:last-child p{ color:var(--cr-ink); }
.article-body .cr-myth__lbl{
  display:inline-block;
  font-family:var(--cr-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.2em .7em;
  border-radius:999px;
}
.article-body .cr-myth>div:first-child .cr-myth__lbl{ background:rgba(232,145,45,.22); color:var(--cr-gold-2); }
.article-body .cr-myth>div:last-child .cr-myth__lbl{ background:rgba(46,125,90,.15); color:var(--cr-green); }
@media(max-width:560px){ .article-body .cr-myth{ grid-template-columns:1fr; } }

/* ============================================================= KEY TAKEAWAYS */
.article-body .cr-take{
  background:linear-gradient(135deg,var(--cr-navy),var(--cr-navy-2));
  border-radius:var(--cr-radius);
  padding:1.5rem 1.6rem;
  box-shadow:var(--cr-shadow);
  position:relative;
}
.article-body .cr-take .cr-lbl{
  font-family:var(--cr-disp);
  color:var(--cr-gold-2);
  font-size:1.25rem;
  margin:0 0 .85rem;
  font-weight:700;
}
.article-body .cr-take ul{ margin:0; padding:0; list-style:none; }
.article-body .cr-take li{
  color:rgba(255,255,255,.92);
  padding:.4rem 0 .4rem 1.7rem;
  position:relative;
  line-height:1.55;
  border:none;
}
.article-body .cr-take li::before{
  content:"";
  position:absolute;
  left:0; top:.78em;
  width:9px; height:9px;
  border-radius:2px;
  background:var(--cr-gold);
  transform:rotate(45deg);
}
.article-body .cr-take li strong{ color:#fff; }

/* ============================================================= STAT CHIPS */
.article-body .cr-chips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem;
}
.article-body .cr-chip{
  background:#fff;
  border:1px solid var(--cr-line);
  border-top:3px solid var(--cr-gold);
  border-radius:12px;
  padding:1.1rem 1.1rem;
  box-shadow:var(--cr-shadow);
  text-align:left;
}
.article-body .cr-chip b{
  display:block;
  font-family:var(--cr-disp);
  font-size:1.9rem;
  line-height:1;
  color:var(--cr-navy);
  font-weight:700;
  margin-bottom:.4rem;
}
.article-body .cr-chip span{
  display:block;
  font-size:.82rem;
  color:var(--cr-mute);
  line-height:1.45;
}

/* ============================================================= STEPS */
.article-body ol.cr-steps{
  list-style:none;
  counter-reset:cr;
  margin:1.6rem 0;
  padding:0;
}
.article-body ol.cr-steps li{
  counter-increment:cr;
  position:relative;
  padding:.3rem 0 1rem 3rem;
  line-height:1.6;
  color:var(--cr-ink);
  border:none;
}
.article-body ol.cr-steps li::before{
  content:counter(cr);
  position:absolute;
  left:0; top:0;
  width:2rem; height:2rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--cr-gold);
  color:#fff;
  font-family:var(--cr-body);
  font-weight:700;
  border-radius:50%;
  font-size:.9rem;
}
.article-body ol.cr-steps li:not(:last-child)::after{
  content:"";
  position:absolute;
  left:.97rem; top:2.2rem; bottom:.2rem;
  width:2px;
  background:var(--cr-line);
}
.article-body ol.cr-steps li strong{ color:var(--cr-navy); }

/* ============================================================= FAQ ACCORDION */
.article-body .cr-faq details{
  border:1px solid var(--cr-line);
  border-radius:10px;
  margin:.6rem 0;
  background:#fff;
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.article-body .cr-faq details[open]{ box-shadow:var(--cr-shadow); }
.article-body .cr-faq summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 3rem 1rem 1.15rem;
  font-weight:600;
  color:var(--cr-navy);
  position:relative;
  font-size:.98rem;
  line-height:1.45;
}
.article-body .cr-faq summary::-webkit-details-marker{ display:none; }
.article-body .cr-faq summary::after{
  content:"+";
  position:absolute;
  right:1.15rem; top:50%;
  transform:translateY(-50%);
  width:1.5rem; height:1.5rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--cr-gold);
  font-size:1.35rem;
  font-weight:400;
  line-height:1;
}
.article-body .cr-faq details[open] summary::after{ content:"\2212"; }
.article-body .cr-faq .cr-a{
  padding:0 1.15rem 1.1rem;
  color:var(--cr-ink);
}
.article-body .cr-faq .cr-a p{ margin:.4rem 0 0; line-height:1.6; }

/* ============================================================= SOURCES */
.article-body .cr-sources{
  border-top:2px solid var(--cr-line);
  padding-top:1.1rem;
  font-size:.84rem;
  color:var(--cr-mute);
}
.article-body .cr-sources p strong{
  font-family:var(--cr-body);
  color:var(--cr-navy);
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.article-body .cr-sources ol{ margin:.6rem 0 0; padding-left:1.3rem; }
.article-body .cr-sources li{ margin:.35rem 0; line-height:1.5; border:none; }
.article-body .cr-sources a{ color:var(--cr-green); word-break:break-word; }

/* ============================================================= CHIP ROW (inline keyword chips) */
.article-body .cr-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0; padding:0; list-style:none; }
.article-body .cr-pills li{
  background:var(--cr-cream);
  color:var(--cr-navy);
  border-radius:999px;
  padding:.35em .9em;
  font-size:.82rem;
  font-weight:600;
  border:none;
}