/* =========================================================
   THE CANADA LEDGER
   In-page module on /buying-the-wheel.
   Replaces the public-facing link to the unlisted MP brief.
   Documents the Canada vs US AI lobbying transparency gap.
   Uses tokens from style.css. Namespaced cl-*.
   ========================================================= */

.cl {
  background: var(--bg-elev-2);
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cl-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- HEADER ---------- */
.cl-head {
  max-width: 760px;
  margin: 0 0 32px;
}
.cl-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.cl-headline {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.cl-headline-strike {
  display: block;
  font-style: italic;
  color: var(--danger);
  font-size: 0.7em;
  margin-top: 8px;
  font-weight: 600;
}
.cl-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dim);
  margin: 0;
  max-width: 56ch;
}

/* ---------- $0 BIG STAT ---------- */
.cl-stat {
  margin: 0 0 40px;
  padding: 24px 28px;
  background: var(--bg);
  border-left: 4px solid var(--danger);
  border-radius: 0 8px 8px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.cl-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.cl-stat-num {
  font-family: var(--font-serif);
  font-size: clamp(56px, 9vw, 96px);
  font-weight: 800;
  line-height: 1;
  color: var(--danger);
  margin: 8px 0 4px;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}
.cl-stat-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 0;
}
.cl-stat-sub em {
  font-style: italic;
  color: var(--ink);
}

/* ---------- COMPARISON GRID ---------- */
.cl-grid {
  margin: 0 0 48px;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.cl-grid-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 16px;
}
.cl-grid-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cl-grid-head-ca { color: var(--accent); }
.cl-grid-head-us { color: var(--accent-2-deep); }
.cl-flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
}

.cl-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cl-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: stretch;
}
.cl-row:last-child { border-bottom: 0; }

.cl-row-dim {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  align-self: center;
  line-height: 1.35;
}

.cl-cell {
  position: relative;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid transparent;
}
.cl-cell-ca { border-left-color: var(--accent); }
.cl-cell-us { border-left-color: var(--accent-2); }

.cl-cell-num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}
.cl-cell-cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink-dim);
}
.cl-cell-zero .cl-cell-num { color: var(--danger); }

/* ---------- REDACTED BAR (the centerpiece treatment) ----------
   Now applied to both CA and US cells where the data is structurally
   absent from the disclosure regime. The two sides differ in WHAT is
   absent (CA hides money, US hides meeting substance), not in WHETHER
   something is absent. Monochrome stripe reads "this is a documented
   gap" without the alarm color that would imply active concealment. */
details.cl-cell-redacted {
  padding: 0;
  background: transparent;
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 6px;
  overflow: hidden;
}
.cl-cell-redacted summary.cl-redacted {
  position: relative;
  list-style: none;
  cursor: pointer;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  outline: none;
  transition: filter 150ms ease, box-shadow 150ms ease;
}
.cl-cell-redacted summary.cl-redacted::-webkit-details-marker { display: none; }
.cl-cell-redacted summary.cl-redacted::marker { content: ''; }

.cl-redacted-pat {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--rule) 0,
      var(--rule) 8px,
      var(--bg-elev) 8px,
      var(--bg-elev) 16px
    );
}
.cl-redacted-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
  background: var(--bg-elev);
  padding: 4px 10px;
  border-radius: 3px;
}
.cl-cell-redacted summary.cl-redacted:hover,
.cl-cell-redacted summary.cl-redacted:focus-visible {
  filter: brightness(1.04);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.cl-cell-redacted[open] summary.cl-redacted {
  border-radius: 6px 6px 0 0;
}
.cl-cell-body {
  padding: 14px 16px 16px;
  background: var(--bg);
  border-radius: 0 0 6px 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  animation: cl-fade-in 240ms ease;
}
.cl-cell-body p { margin: 0; }
.cl-cell-body strong { color: var(--danger); font-weight: 700; }
@keyframes cl-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cl-grid-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 16px 0 0;
  line-height: 1.55;
}

/* ---------- "WHAT REPLACES MONEY IN CANADA" CHANNELS ASIDE ----------
   Affirmative explainer that sits between the comparison grid and the
   concerns cards. Names the legal influence channels so no reader can
   infer the campaign is making an off-record corruption claim. Visually
   lower-key than .cl-concerns and .cl-reforms: this is context, not
   argument. */
.cl-channels {
  margin: 0 0 40px;
  padding: 20px 22px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}
.cl-channels .cl-eyebrow { margin-bottom: 8px; }
.cl-channels .cl-section-h {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.4vw, 24px);
}
.cl-channels-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 64ch;
}
.cl-channels-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cl-channels-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  padding-left: 16px;
  position: relative;
}
.cl-channels-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.cl-channels-list li strong {
  color: var(--ink);
  font-weight: 700;
}
.cl-channels-list li em {
  font-style: italic;
  color: var(--ink-faint);
}
.cl-channels-src {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.5;
  margin: 0;
}

/* ---------- CONCERN + REFORM CARDS ---------- */
.cl-section-h {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}
.cl-concerns,
.cl-reforms {
  margin-bottom: 40px;
}
.cl-reforms { margin-bottom: 24px; }
.cl-card-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cl-card {
  padding: 20px 22px;
  background: var(--bg-elev);
  border-radius: 8px;
  border-top: 3px solid;
  display: flex;
  flex-direction: column;
}
.cl-card-concern { border-top-color: var(--danger); }
.cl-card-reform  { border-top-color: var(--accent); }
.cl-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
.cl-card-concern .cl-card-num { color: var(--danger); }
.cl-card-reform  .cl-card-num { color: var(--accent); }
.cl-card-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cl-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin: 0 0 8px;
  flex-grow: 1;
}
.cl-card-src {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}

/* ---------- BOTTOM SOURCE LINE ---------- */
.cl-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.6;
  margin: 24px 0 0;
}
.cl-source em {
  font-style: italic;
  color: var(--ink-dim);
}

/* See-also pointer to the Great Transfer concept brief. Sits below cl-source. */
.cl-seealso {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  line-height: var(--lh-normal);
}
.cl-seealso strong { color: var(--ink); }
.cl-seealso a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

/* ---------- SCROLL-IN STAGGER (hooks .motion-in via revealOnScroll) ---------- */
.cl .cl-row,
.cl .cl-card,
.cl .cl-stat,
.cl .cl-head,
.cl .cl-channels {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.cl.motion-in .cl-row,
.cl.motion-in .cl-card,
.cl.motion-in .cl-stat,
.cl.motion-in .cl-head,
.cl.motion-in .cl-channels {
  opacity: 1;
  transform: none;
}
.cl.motion-in .cl-channels { transition-delay: 360ms; }
.cl.motion-in .cl-stat { transition-delay: 60ms; }
.cl.motion-in .cl-row:nth-child(2) { transition-delay: 80ms; }
.cl.motion-in .cl-row:nth-child(3) { transition-delay: 140ms; }
.cl.motion-in .cl-row:nth-child(4) { transition-delay: 200ms; }
.cl.motion-in .cl-row:nth-child(5) { transition-delay: 260ms; }
.cl.motion-in .cl-row:nth-child(6) { transition-delay: 320ms; }

/* ---------- RESPONSIVE: 720px tablet ---------- */
@media (min-width: 720px) {
  .cl-card-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .cl-channels-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
}

/* ---------- RESPONSIVE: 880px desktop ---------- */
@media (min-width: 880px) {
  .cl { padding: 80px 0; }
  .cl-grid { padding: 32px; }
  .cl-row { padding: 20px 0; }
  .cl-cell { padding: 14px 18px; }
  .cl-cell-num { font-size: 32px; }
  .cl-cell-redacted summary.cl-redacted { height: 64px; }
  .cl-card { padding: 24px 26px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .cl .cl-row,
  .cl .cl-card,
  .cl .cl-stat,
  .cl .cl-head,
  .cl .cl-channels {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cl-cell-body { animation: none; }
  .cl-cell-redacted summary.cl-redacted { transition: none; }
}

/* ---------- PRINT: collapse to plain text, force every reveal open ---------- */
@media print {
  .cl {
    background: #fff;
    border: 0;
    padding: 24px 0;
  }
  .cl-stat {
    background: #fff;
    border-left: 4px solid #000;
  }
  .cl-stat-num { color: #000; font-size: 48px; }
  .cl-cell-num { color: #000; }
  .cl-headline-strike { color: #000; }
  .cl-card-concern,
  .cl-card-reform {
    background: #fff;
    border: 1px solid #999;
    border-top-width: 3px;
    border-top-color: #000;
  }
  details.cl-cell-redacted { display: block; }
  details.cl-cell-redacted > summary.cl-redacted {
    display: none;
  }
  details.cl-cell-redacted > .cl-cell-body {
    display: block !important;
    padding: 8px 0;
    background: #fff;
    animation: none;
  }
  details.cl-cell-redacted > .cl-cell-body::before {
    content: 'NOT DISCLOSED IN CANADA: ';
    font-family: var(--font-mono);
    font-weight: 700;
    color: #000;
  }
  .cl-grid {
    background: #fff;
    border: 1px solid #999;
  }
}