/* deaudits.com: richer layout for the rewritten long pages (body.rich). Each section gets a tone from the build
   (src/overrides.py): light, white, green, mint, warm or dark. Motion is added by home.js (body.rk-ready, .is-in). */
.rich {
  --out: cubic-bezier(.22, 1, .36, 1);
  --warm-1: #fbf3ea; --warm-2: #f5e6d6; --warm-ink: #8a4b1c;
  --mint-1: #eef7f3; --mint-2: #ddefe6;
}

/* ---------- reading progress and the on-this-page bar ---------- */
.rk-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.rk-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--leaf), var(--lime)); border-radius: 0 3px 3px 0; }
.rk-toc { position: sticky; top: 92px; z-index: 40; margin: -40px auto 40px; width: min(100% - 32px, 1180px); transition: top .6s var(--out); }
.pnav.is-hidden ~ main .rk-toc { top: 14px; }
.rk-toc__in { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(247 248 250 / .88);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 14px 34px -18px rgb(20 35 28 / .3), 0 0 0 1px rgb(20 35 28 / .04); overflow-x: auto; scrollbar-width: none; }
.rk-toc__in::-webkit-scrollbar { display: none; }
.rk-toc__h { flex: none; padding: 0 10px 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.rk-toc ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.rk-toc a { display: block; padding: 9px 14px; border-radius: 999px; font: 500 14px/1 var(--font); color: #3a443f; text-decoration: none; white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.rk-toc a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.rk-toc a.is-on { background: var(--dark); color: #fff; box-shadow: 0 8px 18px -10px rgb(18 35 28 / .7); }

/* ---------- section panels ---------- */
.rich main .rk { position: relative; isolation: isolate; scroll-margin-top: 150px; }
.rich main .rk:not(.rk--light) { margin: 22px 16px 0; border-radius: 44px; overflow: hidden; padding-block: 104px; }
.rich main .rk::after { content: attr(data-n); position: absolute; z-index: -1; right: max(24px, calc(50% - 600px)); top: 36px; pointer-events: none;
  font: 800 clamp(120px, 15vw, 220px)/1 var(--display); letter-spacing: -.06em; color: rgb(20 35 28 / .045); transition: transform 1.4s var(--out), opacity 1.2s; }
.rk-eyebrow { margin-bottom: 14px; }

.rk--white { background: #fff; box-shadow: 0 40px 80px -50px rgb(20 35 28 / .35), 0 0 0 1px rgb(20 35 28 / .03); }
.rk--white :is(.results, .callout, .checklist, .table-scroll, .facts, .ledger, .answer), .rk--white .stages > li { background: var(--bg); box-shadow: none; }

.rk--green { background: linear-gradient(165deg, #f0f7e9, #e1efd4); }
.rk--green::before { content: ""; position: absolute; z-index: -1; width: 640px; height: 640px; right: -180px; bottom: -260px; border-radius: 50%; background: radial-gradient(closest-side, rgb(114 184 76 / .28), transparent); }
.rk--green .rk-eyebrow, .rk--green h2 .hl { color: var(--green-text); }

.rk--mint { background: linear-gradient(165deg, var(--mint-1), var(--mint-2)); }
.rk--mint::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgb(47 125 58 / .14) 1.2px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(120deg, transparent 35%, #000); mask-image: linear-gradient(120deg, transparent 35%, #000); }

.rk--warm { background: linear-gradient(165deg, var(--warm-1), var(--warm-2)); }
.rk--warm::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; left: -200px; top: -220px; border-radius: 50%; border: 60px solid rgb(217 138 78 / .12); }
.rk--warm .rk-eyebrow { color: var(--warm-ink); }
.rk--warm .rk-eyebrow::before { background: var(--amber); box-shadow: 10px 0 0 rgb(217 138 78 / .45); }
.rk--warm .prose ul ::marker, .rk--warm .prose ol ::marker { color: var(--amber); }
.rk--warm::after { color: rgb(138 75 28 / .07); }
.rk--warm .check-item h3::before { background-color: var(--amber); }

.rk--dark { background: var(--dark); color: #c9d6cf; }
.rk--dark::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgb(114 184 76 / .35) 1.2px, transparent 1.6px); background-size: 24px 24px; opacity: .6;
  -webkit-mask-image: radial-gradient(600px circle at 85% 15%, #000, transparent 70%); mask-image: radial-gradient(600px circle at 85% 15%, #000, transparent 70%); }
.rk--dark::after { color: rgb(255 255 255 / .05); }
.rk--dark > .wrap > :is(h2, h3), .rk--dark .prose > :is(h2, h3) { color: #fff; }
.rk--dark .prose > :is(p, ul, ol), .rk--dark > .wrap > p { color: rgb(234 244 238 / .74); }
.rk--dark .prose > :is(p, ul, ol) a, .rk--dark > .wrap > p a { color: var(--lime); }
.rk--dark .prose ul ::marker { color: var(--lime); }
.rk--dark .rk-eyebrow { color: var(--lime); }
.rk--dark :is(.results, .callout, .checklist, .table-scroll, .facts, .ledger, .answer), .rk--dark .stages > li { color: var(--ink); }
.rk--dark .results { background: #fff; }
.rk--dark .results .figure { color: var(--green-text); }

/* ---------- livelier components on these pages ---------- */
.rich .results .figure { background: linear-gradient(120deg, var(--ink) 30%, var(--green-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rich .rk--dark .results .figure { background: linear-gradient(120deg, #1d5e2a, var(--leaf)); -webkit-background-clip: text; background-clip: text; }
.rich .check-item { position: relative; padding-left: 40px; }
.rich .check-item h3::before { content: ""; position: absolute; left: 0; top: 22px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 7 11l5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rich .callout { border-left: 5px solid var(--leaf); }
.rich .rk--warm .callout { border-left-color: var(--amber); }
.rich .stages > li { transition: transform .45s var(--out), box-shadow .45s var(--out); }
.rich .stages > li:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgb(20 35 28 / .45); }
.rich .stages > li::before { background: var(--dark); color: var(--lime); box-shadow: none; }
.rich table.data thead th { color: var(--green-text); }
.rich table.data tbody tr { transition: background-color .25s; }
.rich table.data tbody tr:hover { background: rgb(114 184 76 / .08); }
.rich .facts dt { color: var(--green-text); }
.rich .faq-item { transition: transform .35s var(--out); }
.rich .related-list a { transition: transform .4s var(--out), box-shadow .4s var(--out); }
.rich .related-list a:hover { transform: translateY(-4px); }

/* ---------- entrance motion (only once the script has marked the page ready) ---------- */
.rk-ready main .rk { transition: opacity .9s var(--out), transform 1.1s var(--out); }
.rk-ready main .rk:not(.is-in) { opacity: 0; transform: translateY(70px) scale(.965); }
.rk-ready main .rk--light:not(.is-in) { transform: translateY(40px); }
.rk-ready main .rk:not(.is-in)::after { transform: translateY(60px); opacity: 0; }

.rk-ready .rk .rk-reveal { transition: opacity .8s var(--out), transform .9s var(--out); transition-delay: calc(var(--d, 0) * 70ms + 200ms); }
.rk-ready .rk:not(.is-in) .rk-reveal { opacity: 0; transform: translateY(26px); }
.rk-ready .rk .stages > li, .rk-ready .rk .check-item, .rk-ready .rk table.data tbody tr, .rk-ready .rk .ledger tr, .rk-ready .rk .results > div, .rk-ready .rk .faq-item {
  transition: opacity .7s var(--out), transform .8s var(--out), background-color .25s, box-shadow .45s var(--out); transition-delay: calc(var(--d, 0) * 80ms + 350ms); }
.rk-ready .rk:not(.is-in) .stages > li { opacity: 0; transform: translateY(30px) scale(.96); }
.rk-ready .rk:not(.is-in) .check-item, .rk-ready .rk:not(.is-in) .ledger tr { opacity: 0; transform: translateX(-24px); }
.rk-ready .rk:not(.is-in) table.data tbody tr { opacity: 0; transform: translateY(12px); }
.rk-ready .rk:not(.is-in) .results > div { opacity: 0; transform: translateY(24px); }
.rk-ready .rk:not(.is-in) .faq-item { opacity: 0; transform: translateY(18px); }
/* once in, hovers respond at once */
.rk.is-done .stages > li, .rk.is-done .check-item, .rk.is-done table.data tbody tr, .rk.is-done .results > div, .rk.is-done .faq-item, .rk.is-done .rk-reveal { transition-delay: 0s; }

/* ---------- report pages (body.rich-lite): own layout, lighter treatment ---------- */
.rich-lite .rk-toc { margin: 22px auto 6px; }
.rich-lite main h2[id] { scroll-margin-top: 150px; }
.rk-ready .rk-block { transition: opacity .8s var(--out), transform .9s var(--out); transition-delay: calc(var(--d, 0) * 90ms); }
.rk-ready .rk-block:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* sections holding charts, maps or embeds: fade only, so their measured width never changes */
.rk-ready main .rk.rk-static:not(.is-in) { transform: none; }

/* ---------- phone ---------- */
@media (max-width: 980px) {
  .rk-toc { top: 84px; margin-top: -30px; }
}
@media (max-width: 640px) {
  .rich main .rk:not(.rk--light) { margin: 14px 8px 0; border-radius: 28px; padding-block: 64px; }
  .rich main .rk::after { font-size: 96px; top: 24px; right: 16px; }
  .rk-toc { top: 72px; width: calc(100% - 16px); }
  .rk-toc__h { display: none; }
  .rk-toc a { padding: 8px 12px; font-size: 13px; }
  .rich .check-item { padding-left: 34px; }
  .rich main .rk:not(.rk--light) > .wrap { width: 100%; padding-inline: 20px; }
  .rich .stages > li { grid-template-columns: 1fr; padding: 20px; }
  .rich .stages > li::before { grid-row: auto; margin-bottom: 12px; width: 40px; height: 40px; }
  .rich .table-scroll, .rich .checklist { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-ready main .rk, .rk-ready .rk *, .rk-toc { transition: none !important; }
  .rk-ready main .rk:not(.is-in), .rk-ready .rk:not(.is-in) *, .rk-ready main .rk:not(.is-in)::after { opacity: 1 !important; transform: none !important; }
}
@media print { .rk-toc, .rk-progress { display: none; } .rich main .rk { margin: 0; border-radius: 0; background: none; color: inherit; } }