/* ==========================================================================
   RW TOOLS — the reference card.
   One screen at the top of every tool page: the diagram and the protocol,
   designed to be screenshotted and carried into the moment. No JS, no inputs.
   ========================================================================== */
.rw-card {
  margin: 0 auto 40px;
  max-width: 760px;
  background: #0f1720;
  color: #e8edf2;
  border-radius: 16px;
  padding: 32px 28px 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.rw-card__eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #ffaa00; margin: 0 0 10px;
}
.rw-card__line {
  font-size: clamp(1.25rem, 3.2vw, 1.72rem); font-weight: 800;
  line-height: 1.25; margin: 0 0 22px; color: #fff;
}
.rw-card__grid { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.rw-card__fig { flex: 0 0 210px; margin: 0 auto; }
.rw-card__fig svg { width: 210px; height: 210px; display: block; }
.rw-card__steps { flex: 1 1 300px; min-width: 260px; margin: 0; padding: 0; list-style: none; }
.rw-card__steps li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 1.02rem; color: #e8edf2;
}
.rw-card__steps li:last-child { border-bottom: 0; }
.rw-card__n {
  flex: none; width: 30px; font-weight: 800; color: #ffaa00;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.rw-card__note {
  margin: 20px 0 0; padding-top: 16px; font-size: .94rem; line-height: 1.55;
  color: #9fb0c0; border-top: 1px solid rgba(255,255,255,.10);
}
.rw-card__note strong { color: #fff; }

/* the square: four sides, four counts, drawn not animated */
.rw-sq-side { stroke: #ffaa00; stroke-width: 7; fill: none; stroke-linecap: square; }
.rw-sq-dim  { stroke: rgba(255,255,255,.16); stroke-width: 7; fill: none; }
.rw-sq-lbl  { fill: #e8edf2; font: 700 15px Inter, sans-serif; }
.rw-sq-cnt  { fill: #ffaa00; font: 800 17px Inter, sans-serif;
              font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .rw-card { padding: 24px 18px; border-radius: 14px; }
  .rw-card__grid { gap: 20px; }
  .rw-card__fig, .rw-card__fig svg { width: 180px; flex-basis: 180px; height: 180px; }
}
@media print {
  .rw-card { background: #fff !important; color: #000 !important; box-shadow: none;
             border: 2px solid #000; page-break-inside: avoid; }
  .rw-card__line, .rw-card__steps li, .rw-card__note { color: #000 !important; }
  .rw-card__n, .rw-card__eyebrow { color: #000 !important; }
  .rw-sq-side { stroke: #000; } .rw-sq-dim { stroke: #bbb; }
  .rw-sq-lbl { fill: #000; } .rw-sq-cnt { fill: #000; }
}

/* the drill sits at the bottom of a light page: dark ink, white cards.
   This file loads after rw-tools.css, so it settles the earlier dark-theme
   colour that was leaking onto the light page. */
body.rw-tool-page .rw-drill { max-width: 760px; margin: 8px auto 40px; }
body.rw-tool-page .rw-drill__step {
  background: #fff !important;
  border: 1px solid rgba(10,20,30,.14) !important;
  border-radius: 10px;
}
body.rw-tool-page .rw-drill__step h3 { color: #1a1a2e !important; }
body.rw-tool-page .rw-drill__body p,
body.rw-tool-page .rw-drill__step p,
body.rw-tool-page .rw-drill__step span:not(.rw-drill__num) { color: #33414f !important; }
body.rw-tool-page .rw-drill__num {
  background: #ffaa00 !important; color: #14100a !important;
  border-radius: 999px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Specificity note: rw-tools.css carries
   `body.rw-tool-page .tcb-post-content .rw-drill__body p { color: var(--tool-text) !important }`
   from when the whole page was dark. Matching that chain exactly so source
   order decides, rather than piling on more !important. */
body.rw-tool-page .tcb-post-content .rw-drill__body p,
body.rw-tool-page .tcb-post-content .rw-drill p,
body.rw-tool-page .tcb-post-content .rw-drill li,
body.rw-tool-page .tcb-post-content .rw-drill__step p { color: #33414f !important; }
body.rw-tool-page .tcb-post-content .rw-drill__body h3 { color: #1a1a2e !important; }

/* The SEMANTIC LINK ENGINE injects anchors into any text it likes, including
   inside this card. On the dark card those inherited the site's navy link
   colour and vanished. Any link landing in here is forced legible. */
.rw-card a, .rw-card a:visited, .rw-card a:hover {
  color: #ffc451 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   Diagram primitives. Every tool page carries one authored figure — drawn,
   not photographed. Stock imagery was removed because keyword-matched photos
   said nothing about the tool; these say the whole thing in one look.
   ========================================================================== */
.rw-card__fig--wide { flex: 0 0 320px; }
.rw-card__fig--wide svg { width: 320px; height: 210px; }
@media (max-width: 600px) {
  .rw-card__fig--wide, .rw-card__fig--wide svg { width: 260px; flex-basis: 260px; height: 171px; }
}
.rw-dg-line   { stroke: #ffaa00; stroke-width: 6; fill: none; stroke-linecap: round; }
.rw-dg-thin   { stroke: #ffaa00; stroke-width: 3; fill: none; stroke-linecap: round; }
.rw-dg-dim    { stroke: rgba(255,255,255,.20); stroke-width: 3; fill: none; }
.rw-dg-dash   { stroke: rgba(255,255,255,.28); stroke-width: 2; fill: none; stroke-dasharray: 5 5; }
.rw-dg-fill   { fill: #ffaa00; }
.rw-dg-dimfl  { fill: rgba(255,255,255,.12); }
.rw-dg-panel  { fill: rgba(255,255,255,.06); }
.rw-dg-lbl    { fill: #e8edf2; font: 700 13px Inter, sans-serif; }
.rw-dg-cnt    { fill: #ffaa00; font: 800 15px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.rw-dg-sub    { fill: #8ea0b2; font: 600 10.5px Inter, sans-serif; letter-spacing: .08em; }
@media print {
  .rw-dg-line, .rw-dg-thin { stroke: #000; }
  .rw-dg-dim, .rw-dg-dash { stroke: #bbb; }
  .rw-dg-fill { fill: #000; } .rw-dg-dimfl, .rw-dg-panel { fill: #eee; }
  .rw-dg-lbl, .rw-dg-cnt { fill: #000; } .rw-dg-sub { fill: #555; }
}
.rw-dg-zone   { fill: rgba(255,170,0,.20); stroke: #ffaa00; stroke-width: 3; }
.rw-dg-zoff   { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.22); stroke-width: 2; }
@media print { .rw-dg-zone { fill:#eee; stroke:#000; } .rw-dg-zoff { fill:#fff; stroke:#bbb; } }

/* ---- FIX: the card was inheriting the article's serif reading type ------
   `.rw-card { font-family: Inter }` has no !important, so the theme's
   single-post rules for p/li won this and the card rendered in 18.5px serif.
   At that size the five procedure lines each wrapped to two, the card grew
   past a screen, and the figure floated in the middle of a column of empty
   space. The card is an instrument panel — it sets its own type. -------- */
body.rw-tool-page .tcb-post-content .rw-card,
body.rw-tool-page .tcb-post-content .rw-card p,
body.rw-tool-page .tcb-post-content .rw-card li,
body.rw-tool-page .tcb-post-content .rw-card span {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
body.rw-tool-page .tcb-post-content .rw-card__steps {
  list-style: none !important; padding-left: 0 !important; margin: 0 !important;
}
body.rw-tool-page .tcb-post-content .rw-card__steps li {
  font-size: 1rem !important; line-height: 1.45 !important;
  margin-bottom: 0 !important; padding: 9px 0 !important;
  display: flex !important; align-items: baseline; gap: 12px;
}
body.rw-tool-page .tcb-post-content .rw-card__steps li::marker { content: "" !important; color: transparent !important; }
body.rw-tool-page .tcb-post-content .rw-card__eyebrow { font-size: .72rem !important; line-height: 1 !important; }
body.rw-tool-page .tcb-post-content .rw-card__line {
  font-size: clamp(1.2rem, 2.8vw, 1.55rem) !important; line-height: 1.28 !important; font-weight: 800 !important;
}
body.rw-tool-page .tcb-post-content .rw-card__note { font-size: .94rem !important; line-height: 1.55 !important; }
body.rw-tool-page .tcb-post-content .rw-card__grid { align-items: flex-start; }
body.rw-tool-page .tcb-post-content .rw-card__fig svg { height: auto; }
/* SVG <text> is neither p, li nor span, so it slipped past the rule above and
   inherited the article's serif. Diagram labels are instrument labels. */
body.rw-tool-page .tcb-post-content .rw-card svg text {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
body.rw-tool-page .tcb-post-content .rw-card svg .rw-dg-lbl { font-size: 13px !important; font-weight: 700 !important; }
body.rw-tool-page .tcb-post-content .rw-card svg .rw-dg-cnt { font-size: 15px !important; font-weight: 800 !important; }
body.rw-tool-page .tcb-post-content .rw-card svg .rw-dg-sub { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .08em; }
body.rw-tool-page .tcb-post-content .rw-card svg .rw-sq-lbl { font-size: 15px !important; font-weight: 700 !important; }
body.rw-tool-page .tcb-post-content .rw-card svg .rw-sq-cnt { font-size: 17px !important; font-weight: 800 !important; }
/* The semantic link engine injects anchors into card copy. The site's
   `body.single .tcb-post-content a` rule outranked `.rw-card a`, so those
   links rendered navy-on-near-black and read as missing words. */
body.rw-tool-page .tcb-post-content .rw-card a,
body.rw-tool-page .tcb-post-content .rw-card a:visited,
body.rw-tool-page .tcb-post-content .rw-card a:hover {
  color: #ffc451 !important; text-decoration: underline; text-underline-offset: 2px;
}