/* Whitepaper diagrams · Clay. The figure frame, the paint classes the SVG scenes use, the fee bars.
   Fills are the pastel clay colours; anything read as text uses the -ink twins so it passes AA on the light panels.
   Raised things use the filters in how.html (#wpPuff, #wpPuffSm), dents use #wpDent. No glow, no blur, no grain. */

/* ---------------------------------------------------------------- figure frame */
.wp-fig { margin: 0; padding: 14px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--puff-lg); min-width: 0; }
.wp-fig__frame { position: relative; border-radius: 24px; padding: 12px; overflow: hidden; background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 72%), var(--bg); box-shadow: var(--dent); }
.wp-svg { width: 100%; height: auto; max-height: calc(100svh - var(--nav-h, 88px) - 190px); min-height: 0; display: block; overflow: visible; }
.wp-svg text:not([font-weight]) { font-weight: 600; }
.wp-svg text { font-family: var(--sans); }
.wp-svg text:not([fill]) { fill: var(--ink); }
.wp-fig__bar { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 14px 2px 0; }
.wp-fig__live { flex: 1; min-width: 0; margin: 0; padding: 10px 16px; min-height: 3.4em; border-radius: 18px; background: color-mix(in srgb, var(--hue) 16%, var(--panel-2)); box-shadow: var(--puff-sm); font-size: var(--fs-s, .9375rem); font-weight: 600; line-height: 1.45; color: var(--ink); display: flex; align-items: center; }
.wp-fig__ctl { display: flex; flex: none; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; max-width: 60%; }
.wp-fig figcaption { margin: 14px 6px 0; font-size: var(--fs-xs, .8125rem); line-height: 1.5; color: var(--muted); }
.wp-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--panel-2); color: var(--ink); font: 700 .75rem/1 var(--sans); cursor: pointer; box-shadow: var(--puff-sm); transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.wp-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--hue) 18%, var(--panel-2)); }
.wp-btn:active { transform: translateY(1px) scale(.95); box-shadow: var(--dent); }
.wp-btn:focus-visible, .wp-seg__b:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wp-btn[hidden] { display: none; }
.wp-btn--icon .ico-play { display: none; }
.wp-btn--icon[data-state="paused"] .ico-play { display: block; }
.wp-btn--icon[data-state="paused"] .ico-pause { display: none; }
.wp-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(var(--shade), .08); box-shadow: var(--dent); gap: 2px; flex-wrap: wrap; }
.wp-seg__b { border: 0; background: transparent; color: var(--body); height: 32px; padding: 0 14px; border-radius: 999px; font: 700 .78rem/1 var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease), box-shadow .2s; white-space: nowrap; }
.wp-seg__b:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.wp-seg__b[aria-pressed="true"] { background: color-mix(in srgb, var(--hue) 34%, var(--panel-2)); color: var(--ink); box-shadow: var(--puff-sm); }

/* ---------------------------------------------------------------- SVG paint classes (the hue comes from the chapter) */
/* raised clay panels */
.k-card { fill: url(#wpPanel); stroke: rgba(29, 33, 66, .08); stroke-width: 1; filter: url(#wpPuff); }
.k-card2 { fill: url(#wpPanel2); stroke: rgba(29, 33, 66, .07); stroke-width: 1; filter: url(#wpPuffSm); }
.k-hue-b, .k-card.k-hue-b, .k-card2.k-hue-b { stroke: color-mix(in srgb, var(--hue) 75%, #fff); stroke-width: 2.2; }
.k-row { fill: rgba(var(--shade), .08); filter: url(#wpDent); }
.k-tint { fill: color-mix(in srgb, var(--hue) 30%, #fff); stroke: color-mix(in srgb, var(--hue) 50%, #fff); stroke-width: 1.2; }
/* a translucent highlight laid over something that must stay readable */
.k-hl { fill: color-mix(in srgb, var(--hue) 38%, transparent); stroke: color-mix(in srgb, var(--hue-ink) 50%, transparent); stroke-width: 1.4; }
.k-chip { fill: #fff; stroke: rgba(29, 33, 66, .14); stroke-width: 1; filter: url(#wpPuffSm); }
.k-hue-chip { fill: color-mix(in srgb, var(--hue) 30%, #fff); stroke: color-mix(in srgb, var(--hue-ink) 45%, transparent); }
/* clay props */
.k-clay { filter: url(#wpPuffSm); stroke: rgba(29, 33, 66, .12); stroke-width: 1; }
.k-clay-sky { fill: var(--sky); } .k-clay-lilac { fill: var(--lilac); } .k-clay-coral { fill: var(--coral); }
.k-vault { fill: color-mix(in srgb, var(--hue) 62%, #fff); stroke: color-mix(in srgb, var(--hue-ink) 55%, transparent); stroke-width: 1.4; filter: url(#wpPuff); }
.k-void { fill: color-mix(in srgb, var(--hue) 16%, #c3cff0); filter: url(#wpDent); }
.k-door { fill: color-mix(in srgb, var(--hue) 82%, #fff); stroke: color-mix(in srgb, var(--hue-ink) 50%, transparent); stroke-width: 1.2; filter: url(#wpPuffSm); }
.k-lockbody { fill: #dfe6fb; stroke: var(--ink); stroke-width: 1.3; }
.k-lockbody.is-shut { fill: var(--butter); }
.k-paper { fill: #fff; stroke: rgba(29, 33, 66, .28); stroke-width: 1.2; filter: url(#wpPuffSm); }
.k-fold { fill: #d9e2fb; stroke: rgba(29, 33, 66, .28); stroke-width: 1.1; }
.k-knob { fill: #fff; stroke: rgba(29, 33, 66, .12); stroke-width: 1; filter: url(#wpPuffSm); }
.k-white-f { fill: #fff; }
.k-ink-f { fill: var(--ink); }
/* line work (width and caps come from attributes, set by the kit) */
.k-ln { fill: none; stroke: var(--ink); }
.k-hue-s { stroke: var(--hue-ink); }
.k-dash2 { stroke-dasharray: 4 6; }
.k-dash { stroke: rgba(29, 33, 66, .42); }
.k-st-mint { stroke: var(--mint-ink); fill: none; } .k-st-rose { stroke: var(--rose-ink); fill: none; } .k-st-gold { stroke: var(--butter-ink); fill: none; }
.wp-svg .s-mint { stroke: var(--mint-ink); } .wp-svg .s-rose { stroke: var(--rose-ink); } .wp-svg .s-gold { stroke: var(--butter-ink); }
/* text on the light panels: ink, muted, faint, and the -ink twins of the clay colours */
.k-t, .wp-svg text.k-t { fill: var(--ink); }
.k-m, .wp-svg text.k-m { fill: var(--muted); }
.k-f, .wp-svg text.k-f { fill: color-mix(in srgb, var(--faint) 72%, var(--ink)); }
.wp-svg text.k-hue { fill: var(--hue-ink); }
.wp-svg text.k-mint { fill: var(--mint-ink); }
.wp-svg text.k-rose { fill: var(--rose-ink); }
.wp-svg text.k-gold { fill: var(--butter-ink); }
.wp-svg text.k-sky { fill: var(--sky-ink); }
/* shape fills */
.k-fill-hue { fill: var(--hue); }
.k-mint-f { fill: var(--mint); } .k-rose-f { fill: var(--rose); } .k-gold-f { fill: var(--butter); } .k-sky-f { fill: var(--sky); }
.k-mint-f, .k-rose-f, .k-gold-f, .k-sky-f { stroke: rgba(29, 33, 66, .1); stroke-width: 1; }
/* soft status pills */
.k-mint-t { fill: color-mix(in srgb, var(--mint) 32%, #fff); stroke: color-mix(in srgb, var(--mint-ink) 40%, transparent); stroke-width: 1.2; }
.k-rose-t { fill: color-mix(in srgb, var(--rose) 30%, #fff); stroke: color-mix(in srgb, var(--rose-ink) 40%, transparent); stroke-width: 1.2; }
.k-gold-t { fill: color-mix(in srgb, var(--butter) 40%, #fff); stroke: color-mix(in srgb, var(--butter-ink) 40%, transparent); stroke-width: 1.2; }
.k-verdict { fill: transparent; stroke: transparent; }
.k-verdict.is-ok { fill: color-mix(in srgb, var(--mint) 24%, transparent); stroke: color-mix(in srgb, var(--mint-ink) 60%, transparent); stroke-width: 2; }
.k-verdict.is-warn { fill: color-mix(in srgb, var(--butter) 30%, transparent); stroke: color-mix(in srgb, var(--butter-ink) 60%, transparent); stroke-width: 2; }
.k-verdict.is-bad { fill: color-mix(in srgb, var(--rose) 22%, transparent); stroke: color-mix(in srgb, var(--rose-ink) 60%, transparent); stroke-width: 2; }
.fz-d { font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: -.01em; }
.fz-m { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace !important; font-weight: 600 !important; letter-spacing: 0; }
.w7 { font-weight: 700 !important; }

/* ---------------------------------------------------------------- the fee bars (HTML, so the text stays crisp on a phone) */
.wp-fig--html { padding-bottom: 18px; }
.wp-fees { padding: 10px 6px 4px; display: grid; gap: 22px; }
.wp-fees__amt { display: grid; gap: 10px; padding: 16px 18px; border-radius: 20px; background: rgba(var(--shade), .06); box-shadow: var(--dent); }
.wp-fees__amt label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-s, .9375rem); font-weight: 600; color: var(--body); }
.wp-fees__amt output { font: 800 1.6rem/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.wp-fees__amt input[type="range"] { width: 100%; accent-color: var(--hue-ink); height: 28px; margin: 0; }
.wp-fee { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; }
.wp-fee__name { font: 700 1.05rem/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.wp-fee__name small { display: block; margin-top: 3px; font: 500 var(--fs-xs, .8125rem)/1.4 var(--sans); letter-spacing: 0; color: var(--muted); }
.wp-fee:nth-child(2) { --fc: var(--coral); --fi: var(--coral-ink); } .wp-fee:nth-child(3) { --fc: var(--lilac); --fi: var(--lilac-ink); } .wp-fee:nth-child(4) { --fc: var(--sky); --fi: var(--sky-ink); }
.wp-fee:nth-child(5) { --fc: var(--butter); --fi: var(--butter-ink); } .wp-fee:nth-child(6) { --fc: var(--mint); --fi: var(--mint-ink); }
.wp-fee__v { text-align: right; font: 800 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1 var(--display); letter-spacing: -.03em; color: var(--fi, var(--hue-ink)); }
.wp-fee__v small { display: block; margin-top: 4px; font: 600 var(--fs-xs, .8125rem)/1 var(--sans); letter-spacing: 0; color: var(--body); }
.wp-fee__bar { grid-column: 1 / -1; height: 16px; border-radius: 99px; background: rgba(var(--shade), .1); box-shadow: var(--dent); overflow: hidden; margin-top: 8px; }
.wp-fee__bar i { display: block; height: 100%; border-radius: 99px; transform-origin: 0 50%; transform: scaleX(0); background: var(--fc, var(--hue)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .65), inset 0 -4px 6px rgba(var(--shade), .2); }
.wp-fee--zero .wp-fee__bar i { background: var(--mint); }
.wp-fee--zero .wp-fee__v { color: var(--mint-ink); }
.wp-fee--text .wp-fee__v { font-size: 1.1rem; letter-spacing: -.01em; color: var(--ink); }
.wp-fee--text .wp-fee__bar i { background: repeating-linear-gradient(90deg, var(--fc, var(--hue)) 0 10px, transparent 10px 18px); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .wp-btn, .wp-seg__b { transition: none; }
  .wp-btn:hover { transform: none; }
}
@media (max-width: 520px) {
  .wp-fig { padding: 10px; }
  .wp-fig__frame { padding: 4px; border-radius: 20px; }
  .wp-fig__bar { flex-direction: column; gap: 10px; }
  .wp-fig__ctl { max-width: none; justify-content: flex-start; }
}