/* Money test — the ledger, the twist, and the honesty panel.
   Everything else comes from workstyle.css and pages.css. */

/* ---------------------------------------------------------------------------
   The money funnel's own accent. Raspberry rather than the site cobalt, so the
   two tests read as siblings rather than the same page twice.
   Not green and not amber on purpose: this test's ledger already uses green and
   apricot semantically for "counts for you" / "counts against you", and an
   accent in either family would fight its own chips.
   Dark values are set inside the same guards the base tokens use, or an explicit
   light choice on a dark OS would inherit the wrong pair.
   --------------------------------------------------------------------------- */
body.test-money {
  --accent:      #C42B6B;
  --accent-wash: #FBE4EE;
  --accent-ink:  #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.test-money {
    --accent:      #FF7BB0;
    --accent-wash: #3A1428;
    --accent-ink:  #0B0E1B;
  }
}
:root[data-theme="dark"] body.test-money {
  --accent:      #FF7BB0;
  --accent-wash: #3A1428;
  --accent-ink:  #0B0E1B;
}




/* the pre-lander's trait list has two columns, not three */
.pole-row.mn-pole { grid-template-columns: 1fr auto; }
.pole-row.mn-pole span:first-child { text-align: left; color: var(--ink); font-weight: 600; }

/* ---------- the ledger ---------- */
.rhero { padding: 42px 0 10px; }

/* Money headlines are whole sentences, not two-word archetype names, so they
   need a smaller scale than the work-style result's .rname. */
.rname { font-size: clamp(31px, 8.4vw, 46px); letter-spacing: -.035em; }

/* Verdict chips are personal. Before the ledger is hydrated there is nothing
   honest to put in them, so they stay invisible rather than showing a dash. */
.chip.chip-empty { visibility: hidden; }
.rsub { margin: 18px 0 0; font-size: 17px; color: var(--ink-soft); max-width: 33em; }

/* Each trait is its own card rather than a hairline-separated row. With five
   rows of identical colour it was hard to see which slider, which pole labels
   and which note belonged to which trait — the card encloses the whole group.
   Matches .pole-row / .testcard: card ground, 1px border, no shadow (a shadow
   on five stacked cards reads as noise). */
.ledger { margin: 34px 0 0; display: grid; gap: 12px; }
.lrow {
  padding: 16px 16px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ltrait { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.lwhat { font-size: 13.5px; color: var(--ink-faint); margin: 2px 0 12px; }
.lnote { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* Semantic colours, deliberately separate from the accent: the accent means
   "this is interactive", these mean "this is the finding". */
.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.chip.for     { background: var(--good-wash); color: var(--good); }
.chip.against { background: var(--bad-wash);  color: var(--bad); }
.chip.neutral { background: var(--card-2);    color: var(--ink-faint); }
.chip.weakish { background: transparent; color: var(--pop); border: 1px dashed var(--pop); }

.weak {
  margin: 10px 0 0; padding: 11px 13px; background: var(--card-2);
  border-radius: 10px; font-size: 13px; color: var(--ink-soft);
}
.weak b {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pop); display: block; margin-bottom: 3px;
}

/* ---------- the twist ---------- */
.twist {
  margin: 38px 0 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px; box-shadow: var(--shadow);
}
.twist .eyebrow { display: block; margin-bottom: 12px; }
.twist h2 { font-size: 25px; margin-bottom: 12px; }
.twist p { margin: 0 0 14px; }
.twist blockquote {
  margin: 16px 0; padding-left: 16px; border-left: 4px solid var(--pop);
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.02em; line-height: 1.3;
}
.twist cite {
  display: block; margin-top: 10px; font-family: var(--mono);
  font-size: 11px; font-style: normal; color: var(--ink-faint);
}

/* ---------- the honesty panel ---------- */
.reality { margin: 34px 0 0; background: var(--accent-wash); border-radius: 18px; padding: 24px; }
.reality .eyebrow { display: block; margin-bottom: 12px; color: var(--accent); }
.reality h2 { font-size: 25px; margin-bottom: 12px; }
.reality .big {
  font-family: var(--display); font-weight: 800; font-size: clamp(40px, 11vw, 62px);
  letter-spacing: -.04em; line-height: 1; color: var(--accent); margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.reality .biglabel { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.reality p { margin: 0 0 14px; }
.reality ul { margin: 14px 0 0; padding-left: 1.1em; font-size: 15.5px; }
.reality li { margin-bottom: 7px; }
.reality p:last-child { margin-bottom: 0; }

/* Money-only colouring for the shared summary block (base styles: pages.css). */
.vcol-against { border-top-color: var(--bad); }
.vcol-for     { border-top-color: var(--good); }
.vcol-weakish { border-top-color: var(--pop); }
.vcol-against .vcount { color: var(--bad); }
.vcol-for .vcount     { color: var(--good); }
/* The row the headline is about. Now that every row is a card this only needs
   to change the card's ground and border — the negative margins that used to
   bleed the highlight past the text column are gone. */
.lrow-lead {
  position: relative;
  background: var(--accent-wash);
  border-color: var(--accent);
}
.lrow-lead::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px 0 0 3px; background: var(--accent);
}
.readcard-lead { border-color: var(--accent); }
.readcard-lead i { color: var(--accent); }
/* .lwhat is --ink-faint, which is fine on the page ground but only 2.62:1 on
   the lead row's accent wash. Scoped to that row so the other four keep their
   existing hierarchy. */
.lrow-lead .lwhat { color: var(--ink-soft); }