/* I01 — Where the money goes: an estimated donut of a retreat's costs (js/cost-pie.js) */
.pie { margin: 2.5rem 0 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; background: var(--color-white); box-shadow: 0 0 0 1px rgba(40,10,0,.06); }
.pie__head .eyebrow { color: var(--color-ember); }
.pie__head .headline-4 { margin: .35rem 0 0; }
.pie__head .text-2 { max-width: 44rem; margin-top: .5rem; line-height: 1.6; color: var(--color-text-2); }
.pie__body { display: grid; gap: 1.75rem; align-items: center; margin-top: 1.75rem; }
@media (min-width: 860px) { .pie__body { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; } }
.pie__chart { position: relative; width: min(100%, 20rem); margin-inline: auto; aspect-ratio: 1; }
.pie__chart svg { display: block; width: 100%; height: 100%; }
.pie__track { fill: none; stroke: var(--color-bg); stroke-width: 30; }
.pie__slice { fill: none; stroke-width: 30; transform-box: view-box; transform-origin: 110px 110px; transform: rotate(var(--rot)); stroke-dashoffset: var(--len); transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1) calc(var(--d, 0) * 110ms), opacity var(--duration-fast), stroke-width var(--duration-fast); }
.pie.is-drawn .pie__slice { stroke-dashoffset: 0; }
.pie[data-active] .pie__slice { opacity: .25; }
.pie[data-active] .pie__slice.is-active { opacity: 1; stroke-width: 36; }
.pie__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 0 22%; }
.pie__center strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; letter-spacing: var(--tracking-display); }
.pie__center span { margin-top: .35rem; font-size: var(--text-small); line-height: 1.35; color: var(--color-text-2); }
.pie__legend { display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.pie__item { display: grid; grid-template-columns: .85rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; width: 100%; padding: .55rem .75rem; border: 0; border-radius: 12px; background: transparent; font: inherit; color: var(--color-text); text-align: left; cursor: pointer; transition: background var(--duration-fast); }
.pie__item:hover, .pie__item:focus-visible, .pie__item[aria-pressed="true"] { background: var(--color-bg); }
.pie__item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pie__swatch { width: .85rem; height: .85rem; border-radius: 4px; }
.pie__name { font-weight: 500; }
.pie__pct { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pie__why { margin: 0 .75rem .25rem 2.35rem; font-size: var(--text-small); line-height: 1.5; color: var(--color-text-2); display: none; }
.pie__item[aria-pressed="true"] + .pie__why { display: block; }
@media (prefers-reduced-motion: reduce) { .pie__slice { transition: opacity var(--duration-fast); } }