/* Cancel Atlas — per-company page (c/<id>.html). Built ON the site's design tokens (defined in
   styles.css :root) so it reads as a first-class part of the site. CSP-safe: external stylesheet
   only, no inline styles; the score gauge uses SVG *presentation attributes* (stroke-dasharray),
   never style="". Human-elegant + AI-ready (semantic HTML + schema live in the markup). */

/* ---- breadcrumb ------------------------------------------------------------------------- */
.cc-crumbs { font-family: var(--sans); font-size: .8rem; letter-spacing: .01em;
  color: var(--ink-mute); margin: 1.2rem auto .4rem; }
.cc-crumbs a { color: var(--ink-mute); text-decoration: none; }
.cc-crumbs a:hover { color: var(--accent); }
.cc-crumbs [aria-current] { color: var(--ink-soft); }

/* ---- page shell ------------------------------------------------------------------------- */
/* Match the disclosure banner + breadcrumb (.wrap = var(--wrap)) so every block on the page shares
   the same left/right edges — the article no longer sits narrower than the band above it. */
.cc-page { max-width: var(--wrap); padding-bottom: 4rem; }

/* ---- hero: gauge + answer-first verdict ------------------------------------------------- */
.cc-hero { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding: clamp(1.4rem, 3vw, 2.2rem); margin: .5rem 0 2.5rem;
  background: var(--bg-elev); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.cc-hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: .15rem 0 .7rem; }
.cc-lead { font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.55;
  margin: 0; color: var(--ink-soft); }
.cc-lead strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-meta { font-family: var(--sans); font-size: .82rem; color: var(--ink-mute); margin: 1rem 0 0; }

/* score gauge (SVG; dasharray set as an attribute per company — CSP-safe) */
.cc-gauge-wrap { display: grid; place-items: center; }
.cc-gauge { width: 100%; max-width: 200px; height: auto; }
.cc-gauge-track { stroke: var(--line); }
.cc-gauge-arc { transition: none; }
.cc-arc-good { stroke: var(--val-good); }
.cc-arc-mid  { stroke: var(--val-mid); }
.cc-arc-bad  { stroke: var(--val-bad); }
.cc-gauge-score { font-family: var(--sans); font-weight: 720; font-size: 30px; fill: var(--ink);
  font-variant-numeric: tabular-nums; }
.cc-gauge-out { font-family: var(--sans); font-weight: 600; font-size: 12px; fill: var(--ink-mute);
  letter-spacing: .04em; }

@media (max-width: 640px) {
  .cc-hero { grid-template-columns: 1fr; text-align: left; gap: 1.2rem; }
  .cc-gauge-wrap { justify-items: start; }
  .cc-gauge { max-width: 140px; }
}

/* ---- two-column report layout: narrative (left) + sticky fact box (right) --------------- */
.cc-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem); align-items: start; margin-top: 2.6rem; }
.cc-main { min-width: 0; }
.cc-main h2 { font-size: 1.25rem; margin: 2.6rem 0 .3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cc-main h2:first-of-type { border-top: none; padding-top: 0; margin-top: 2.2rem; }
.cc-summary { font-size: 1.08rem; line-height: 1.7; margin: 0; color: var(--ink); }

/* fact box — scannable key facts (infobox pattern; great for AI extraction + citation) */
.cc-aside { min-width: 0; }
.cc-info { background: var(--bg-elev); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem 1.35rem 1.35rem; font-family: var(--sans); }
.cc-info .overline { margin: 0 0 .4rem; }
.cc-info dl { margin: 0; }
.cc-info dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.cc-info dl > div:last-of-type { border-bottom: none; }
.cc-info dt { color: var(--ink-mute); flex: 0 0 auto; }
.cc-info dd { margin: 0; text-align: right; color: var(--ink); font-weight: 600; }
.cc-info-links { margin: 1rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-mute); }

.cc-chip { display: inline-block; min-width: 1.5rem; text-align: center; padding: .06rem .5rem;
  border-radius: 6px; font-weight: 800; color: #fff; }
.cc-chip-good { background: var(--val-good); }
.cc-chip-mid  { background: var(--val-mid); }
.cc-chip-bad  { background: var(--val-bad); }

/* score-breakdown card (right rail, under the fact box) */
.cc-score-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.2rem 1.35rem; margin-top: 1.25rem; }
.cc-score-card .overline { margin: 0 0 .45rem; }
.cc-score-card .cc-method-note { margin: 0 0 .9rem; }
.cc-dimlist { list-style: none; margin: 0; padding: 0; font-family: var(--sans); }
.cc-dimlist > li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.cc-dimlist > li:last-child { border-bottom: none; }
.cc-dim-head { display: flex; justify-content: space-between; gap: .8rem; font-size: .9rem; font-weight: 620; color: var(--ink); }
.cc-dim-wt { color: var(--ink-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-dim-bar { display: flex; align-items: center; gap: .65rem; margin: .45rem 0 .15rem; }
.cc-dim-bar .cc-bar { flex: 1; width: auto; height: 8px; }
.cc-dim-bar .cc-v { margin: 0; min-width: 1.7rem; text-align: right; }
.cc-dimlist .cc-d { margin: 0; max-width: none; }
.cc-dim-total { display: flex; justify-content: space-between; gap: .8rem; font-weight: 720;
  font-size: .9rem; color: var(--ink); }
.cc-dim-total span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 860px) {
  .cc-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

.cc-how { list-style: none; padding: 0; margin: .8rem 0 0; }
.cc-how li { font-family: var(--sans); font-size: .94rem; line-height: 1.5; padding: .6rem 0;
  border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.cc-how li:last-child { border-bottom: none; }
.cc-how strong { color: var(--ink); font-weight: 620; }
.cc-how a, .cc-sources a { word-break: break-word; }

/* ---- score-breakdown table -------------------------------------------------------------- */
.cc-method-note { font-family: var(--sans); font-size: .85rem; color: var(--ink-mute); margin: .4rem 0 1rem; }
.cc-dims { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .9rem; }
.cc-dims th, .cc-dims td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cc-dims thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-mute); }
.cc-dims tbody td:first-child { color: var(--ink); font-weight: 600; }
.cc-d { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-mute); margin-top: .15rem; max-width: 34ch; }
.cc-wt { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; width: 1%; }
.cc-score-cell { white-space: nowrap; width: 1%; }
.cc-dims tfoot th { font-size: .9rem; font-weight: 720; border-bottom: none; padding-top: 1rem; color: var(--ink); }
.cc-dims tfoot th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* breakdown bar — track + fill, width via .cc-w-* classes (CSP-safe) */
.cc-bar { display: inline-block; vertical-align: middle; width: 96px; height: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink-mute) 22%, transparent); overflow: hidden; }
.cc-bar-fill { display: block; height: 100%; border-radius: 999px; }
.cc-bar-fill.val-good { background: var(--val-good); }
.cc-bar-fill.val-mid  { background: var(--val-mid); }
.cc-bar-fill.val-bad  { background: var(--val-bad); }
.cc-v { margin-left: .55rem; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

/* ---- evidence + scope ------------------------------------------------------------------- */
.cc-sources { list-style: none; padding: 0; margin: .6rem 0 0; font-family: var(--sans); font-size: .9rem; }
.cc-sources li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.cc-sources li:last-child { border-bottom: none; color: var(--ink-mute); }
.cc-scope { font-family: var(--sans); font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.cc-reply { font-family: var(--sans); font-weight: 600; }

/* cite-this — quiet bordered card, mono citation */
.cc-cite { margin-top: 2.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-band); font-family: var(--sans); font-size: .82rem; line-height: 1.55; color: var(--ink-soft); }
.cc-cite strong { color: var(--ink); }
.cc-back { font-family: var(--sans); font-size: .9rem; margin-top: 1.6rem; }

/* predefined width steps (0–100 by 5) — keeps the score bars CSP-safe (no inline style) */
.cc-w-0{width:0}.cc-w-5{width:5%}.cc-w-10{width:10%}.cc-w-15{width:15%}.cc-w-20{width:20%}
.cc-w-25{width:25%}.cc-w-30{width:30%}.cc-w-35{width:35%}.cc-w-40{width:40%}.cc-w-45{width:45%}
.cc-w-50{width:50%}.cc-w-55{width:55%}.cc-w-60{width:60%}.cc-w-65{width:65%}.cc-w-70{width:70%}
.cc-w-75{width:75%}.cc-w-80{width:80%}.cc-w-85{width:85%}.cc-w-90{width:90%}.cc-w-95{width:95%}.cc-w-100{width:100%}

/* Featured-supporter slot — ONE, FULL-WIDTH band after the two-column body (after evidence + score
   breakdown); labeled, score-independent, far from the grade. House promo (not entity-targeted). */
.cc-supporter { margin: 2rem 0; padding: 1.1rem 1.4rem; background: var(--bg-band);
  border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--sans);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem 1.4rem; }
.cc-adlabel { justify-self: start; grid-column: 1 / -1; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: .1rem .4rem; margin: 0 0 .25rem; }
.cc-supporter-body { grid-column: 1; margin: 0; font-size: .95rem; color: var(--ink-soft); }
.cc-supporter-cta { grid-column: 2; justify-self: end; white-space: nowrap; display: inline-block;
  border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: .42rem 1.05rem;
  font-weight: 600; font-size: .9rem; text-decoration: none; }
.cc-supporter-cta:hover { background: var(--accent); color: var(--accent-ink); }
.cc-supporter-note { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .75rem; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 540px) { .cc-supporter { grid-template-columns: 1fr; } .cc-supporter-cta { justify-self: start; } }

/* "Show your grade" badge + embed (A/B pages only) */
.cc-badge { margin: 2.2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.cc-badge-lead { font-family: var(--sans); font-size: .92rem; color: var(--ink-soft); margin: .2rem 0 .9rem; max-width: 60ch; }
.cc-badge-img { display: block; }
.cc-badge-note { font-family: var(--sans); font-size: .8rem; color: var(--ink-mute); margin: 1rem 0 .35rem; }
.cc-embed { margin: 0; padding: .8rem 1rem; background: var(--bg-band); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow-x: auto; }
.cc-embed code { font-family: var(--mono); font-size: .78rem; color: var(--ink-soft); white-space: pre; }