/* SoloClientStack accessibility and readability override pass
   Purpose: reinforce readable typography, contrast, link affordance, focus states,
   and diagram usability even when legacy inline styles exist. */
:root{
  --muted-readable:#A6A090;
  --text-readable:#E7E2D7;
  --focus-ring:#D6A84F;
  --article-measure:760px;
}
html{font-size:18px!important;scroll-behavior:smooth;}
body{font-size:1rem!important;line-height:1.75!important;color:var(--text-readable,var(--text))!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
p,li,td,th,blockquote,figcaption{line-height:1.7!important;}
p,li,td{color:var(--text-readable,var(--text))!important;}
small,.small,.meta,.eyebrow,.section-label,.card-num,.framework-kicker{color:var(--muted-readable)!important;}
[style*="color:var(--muted)"],[style*="color: var(--muted)"],[style*="color:var(--border-lt)"],[style*="color: var(--border-lt)"]{color:var(--muted-readable)!important;}
[style*="font-size:.65rem"],[style*="font-size: .65rem"],[style*="font-size:.7rem"],[style*="font-size: .7rem"],[style*="font-size:.72rem"],[style*="font-size: .72rem"],[style*="font-size:.75rem"],[style*="font-size: .75rem"]{font-size:.875rem!important;line-height:1.6!important;}
[style*="font-size:.78rem"],[style*="font-size: .78rem"],[style*="font-size:.8rem"],[style*="font-size: .8rem"],[style*="font-size:.82rem"],[style*="font-size: .82rem"],[style*="font-size:.85rem"],[style*="font-size: .85rem"],[style*="font-size:.9rem"],[style*="font-size: .9rem"]{font-size:.95rem!important;line-height:1.65!important;}
main p,article p,.section p{max-width:var(--article-measure);}
main p,main li,article p,article li,.section p,.section li{font-size:1rem!important;}
main h1{line-height:1.08!important;letter-spacing:-.035em;}
main h2{line-height:1.18!important;margin-top:3.5rem!important;margin-bottom:1.15rem!important;}
main h3{line-height:1.25!important;margin-top:2.25rem!important;margin-bottom:.85rem!important;}
.site-nav a,header nav a{font-size:.95rem!important;line-height:1.4!important;}
.btn,a.btn,button,.framework-open{min-height:44px;}
main p a,main li a,article a,.section a:not(.btn):not(.framework-open),table a{color:var(--amber,#D6A84F)!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px!important;}
main p a:hover,main li a:hover,article a:hover,.section a:hover{color:var(--cream,#F5E9D3)!important;}
*:focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:4px!important;border-radius:6px!important;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
th,td{font-size:.95rem!important;}
.framework-block{margin:3rem 0!important;padding:1.35rem!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;background:rgba(31,41,55,.64)!important;}
.framework-figure{margin:1rem 0 0!important;}
.framework-open{display:block!important;width:100%!important;padding:0!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;overflow:hidden!important;background:#0D1117!important;cursor:zoom-in!important;}
.framework-open img{display:block!important;width:100%!important;height:auto!important;max-height:min(72vh,760px)!important;object-fit:contain!important;background:#0D1117!important;}
.framework-expand{display:block!important;padding:.9rem 1rem!important;color:var(--cream,#F5E9D3)!important;background:rgba(74,124,111,.18)!important;font-weight:700!important;text-align:center!important;}
.framework-figure figcaption{font-size:.95rem!important;color:var(--muted-readable)!important;margin-top:.7rem!important;}
.framework-modal{position:fixed;inset:0;z-index:9999;background:rgba(5,8,12,.94);display:none;align-items:center;justify-content:center;padding:clamp(12px,2vw,28px);}
.framework-modal.is-open{display:flex;}
.framework-modal__inner{max-width:96vw;max-height:94vh;overflow:auto;-webkit-overflow-scrolling:touch;background:#0D1117;border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:14px;}
.framework-modal__inner img{display:block;max-width:none;width:min(1800px,94vw);height:auto;}
.framework-modal__close{position:fixed;top:14px;right:14px;z-index:10000;min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:#1F2937;color:#E6EDF3;font-size:1.25rem;cursor:pointer;}
@media(max-width:760px){html{font-size:17px!important;}body{line-height:1.72!important;}main,.section{padding-left:5vw!important;padding-right:5vw!important;}main h1{font-size:clamp(2.1rem,10vw,3.2rem)!important;}main h2{font-size:clamp(1.55rem,7vw,2.2rem)!important;}.framework-block{padding:1rem!important;margin:2.4rem 0!important;}.framework-open img{max-height:58vh!important;}.framework-modal__inner img{width:1400px;max-width:none;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}
/* ════════════════════════════════════════════════════════════════════════
   SoloClientStack — TOOL EMBED + DISCLOSURE FIX (v2, dark-editorial)
   Append to the END of your main stylesheet (the file your pages link as
   their CSS — confirm the path in the repo; commonly assets/style.css or
   css/main.css). This block uses the site's OWN variables so the calculator
   matches the dark editorial brand instead of rendering as a white box.

   Fixes:
   (1) Washed-out / unreadable calculator labels (were landing on the amber
       !important small-label rules from the accessibility pass).
   (2) The white-card mismatch (the tool's inline CSS forced a light card;
       this keeps it on the dark surface with cream text).
   (3) Oversized monospace affiliate disclosure.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- (1)+(2) Tool / calculator embed — dark editorial, matches brand ------ */
.tool-embed {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 3vw, 1.85rem);
  margin: 2rem 0;
}

/* Labels and section heads must be clearly legible (cream), NOT pale amber.
   These override the accessibility-pass rules that turn small labels amber. */
.tool-embed label,
.tool-embed .section-head,
.tool-embed legend,
.tool-embed .field-label {
  color: var(--cream) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  display: block;
  margin: 1.1rem 0 .4rem;
}

/* Section headers inside the tool a touch larger */
.tool-embed .section-head {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-lt) !important;
  margin-top: 1.75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

/* Hints / helper text: muted but legible */
.tool-embed .hint,
.tool-embed small,
.tool-embed .inline-disclosure {
  color: var(--muted) !important;
  font-size: .8rem;
  opacity: 1;
}

/* Inputs and selects: dark fields, cream text, amber focus */
.tool-embed input[type="number"],
.tool-embed input[type="text"],
.tool-embed select,
.tool-embed textarea {
  color: var(--cream);
  background: var(--card);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
}
.tool-embed input::placeholder { color: var(--muted); opacity: 1; }
.tool-embed input:focus,
.tool-embed select:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--amber);
}
.tool-embed input[disabled],
.tool-embed select[disabled] { opacity: .45; cursor: not-allowed; }

/* Checkboxes inline with their labels (don't get the block label treatment) */
.tool-embed input[type="checkbox"] {
  width: auto; min-height: 0; display: inline-block;
  margin-right: .5rem; accent-color: var(--amber);
}
.tool-embed .cat-row label,
.tool-embed label > input[type="checkbox"] + span,
.tool-embed .checkbox-label {
  display: inline-flex; align-items: center; margin: 0; font-weight: 400;
}

/* Result panel: dark, on-brand (not the green light box from inline CSS) */
.tool-embed .result,
.tool-embed #calc-result {
  background: var(--card);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  color: var(--text);
}
.tool-embed .result-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
}
.tool-embed .result-item .label { color: var(--muted) !important; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.tool-embed .result-item .value { color: var(--cream) !important; font-family: var(--font-mono); font-size: 1.25rem; }

/* Calculate button: use the brand amber pill */
.tool-embed button,
.tool-embed .calc-btn,
.tool-embed #calc-btn {
  margin-top: 1.5rem;
  background: var(--amber);
  color: var(--bg);
  border: none;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  transition: background .2s;
}
.tool-embed button:hover,
.tool-embed #calc-btn:hover { background: var(--amber-lt); }

/* In-result CTA links → brand amber pills */
.tool-embed .cta-row a,
.tool-embed .result a.cta {
  display: inline-block;
  background: var(--amber);
  color: var(--bg) !important;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  margin: .35rem .35rem 0 0;
}
.tool-embed .cta-row a.sec {
  background: transparent;
  color: var(--amber) !important;
  border: 1px solid var(--border-lt);
}

/* ---- (3) Affiliate disclosure: small, quiet, sans (not big monospace) ----- */
.disclosure {
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .85rem;
  margin: 1rem 0;
}
.disclosure strong { font-weight: 600; color: var(--text); }
.disclosure a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .tool-embed .cat-row { display: block; }
}