/* React Bits components (see rb.js), restyled to the site's tokens. */

/* ---------- MetallicPaint ---------- */
.metallic-paint { position: relative; width: 100%; height: 100%; }
.metallic-paint-canvas { display: block; width: 100%; height: 100%; }

/* ---------- CometDial ---------- */
.comet-dial { --cd-accent: #f5f5f5; --cd-ink: #fdfdfd; --cd-size: 250px; --cd-figure: 40px; position: relative; width: var(--cd-size); height: var(--cd-size); color: var(--cd-ink); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.comet-dial__ring { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; outline: none; cursor: grab; touch-action: none; }
.comet-dial__ring:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 4px; }
.comet-dial[data-dragging] .comet-dial__ring { cursor: grabbing; }
.comet-dial[data-readonly] .comet-dial__ring { cursor: default; }
.comet-dial__track, .comet-dial__lit, .comet-dial__comet path { fill: none; stroke-linecap: round; }
.comet-dial__track { stroke: var(--cd-ink); opacity: 0.24; }
.comet-dial__lit { stroke: var(--cd-accent); opacity: 0.7; }
.comet-dial__comet path { stroke: var(--cd-accent); }
.comet-dial__head { fill: var(--cd-accent); }
.comet-dial__readout { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
.comet-dial__value { display: inline-flex; align-items: baseline; gap: 0.06em; font-family: var(--f-display); font-size: var(--cd-figure); font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.comet-dial__unit { font-size: 0.5em; opacity: 0.5; }
.comet-dial__cap { font-family: var(--f-mono); font-size: 13px; opacity: 0.7; }
.comet-dial[data-disabled] { opacity: 0.55; }

/* ---------- SquishSwitch ---------- */
.squish { --ss-w: 76px; --ss-h: 38px; --ss-track: var(--tone3); --ss-track-on: var(--lime); --ss-thumb-color: var(--soft); --ss-thumb-on: var(--on); position: relative; display: inline-block; flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.squish::after { content: ''; position: absolute; inset: -8px; }
.squish:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: calc(var(--ss-h) / 2); }
.squish__track { position: relative; display: block; width: var(--ss-w); height: var(--ss-h); border-radius: calc(var(--ss-h) / 2); background: var(--ss-track); transition: background-color 320ms ease; }
.squish[aria-checked="true"] .squish__track { background: var(--ss-track-on); }
.squish__thumb { position: absolute; top: max(3px, calc(var(--ss-h) * 0.11)); left: 0; width: calc(var(--ss-h) - 2 * max(3px, calc(var(--ss-h) * 0.11))); height: calc(var(--ss-h) - 2 * max(3px, calc(var(--ss-h) * 0.11))); border-radius: 50%; background: var(--ss-thumb-color); transition: background-color 320ms ease; will-change: transform; }
.squish[aria-checked="true"] .squish__thumb { background: var(--ss-thumb-on); }
.squish.sm { --ss-w: 56px; --ss-h: 30px; }

/* ---------- SpringCheck (state from data-on, or from a revealed parent for .sck--auto) ---------- */
.sck { --sc-fill: var(--lime); --sc-check: var(--on); --sc-box: 22px; --sc-radius: 6px; display: inline-flex; align-items: center; gap: 12px; min-height: 36px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.sck { cursor: pointer; }
.sck__box { position: relative; flex: none; display: grid; place-items: center; width: var(--sc-box); height: var(--sc-box); border-radius: var(--sc-radius); overflow: hidden; }
.sck__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px currentColor; opacity: 0.3; transition: opacity 120ms ease; }
.sck__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--sc-fill); transform: scale(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sck__tick { position: relative; width: 70%; height: 70%; overflow: visible; fill: none; stroke: var(--sc-check); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 240ms ease 110ms; }
.sck__label { position: relative; display: inline-block; }
.sck__word { display: inline-block; transition: opacity 300ms ease; }
.sck__rule { position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 340ms cubic-bezier(0.23, 1, 0.32, 1) 70ms; pointer-events: none; }
.sck[data-on="true"] .sck__fill, .is-in .sck--auto .sck__fill { transform: scale(1); }
.sck[data-on="true"] .sck__tick, .is-in .sck--auto .sck__tick { stroke-dashoffset: 0; }
.sck[data-on="true"] .sck__box, .is-in .sck--auto .sck__box { animation: sck-pop 440ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sck--strike[data-on="true"] .sck__word { opacity: 0.45; }
.sck--strike[data-on="true"] .sck__rule { transform: scaleX(1); }
.sck--auto .sck__fill, .sck--auto .sck__tick, .sck--auto .sck__box { transition-delay: calc(var(--i, 0) * 160ms + 200ms); animation-delay: calc(var(--i, 0) * 160ms + 200ms); }
.sck--auto .sck__tick { transition-delay: calc(var(--i, 0) * 160ms + 310ms); }
.sck.bad { --sc-fill: var(--coral); }
.sck.warn { --sc-fill: var(--amber); }
@keyframes sck-pop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* ---------- BranchedMenu, made angular: branches leave the trunk on a 45° cut, like the shield's shoulders ---------- */
.bm { position: relative; display: flex; flex-direction: column; padding-left: 14px; font-size: 15px; line-height: 1.2; }
.bm::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; background: var(--line); }
.bm-sec { display: flex; flex-direction: column; }
.bm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-family: var(--f-mono); font-size: 13px; color: var(--soft); text-align: left; transition: color 200ms ease; }
.bm-head::after { content: ''; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 240ms var(--ease-out); }
.bm-sec[data-open="true"] .bm-head { color: var(--ink); }
.bm-sec[data-open="true"] .bm-head::after { transform: rotate(45deg); }
.bm-head:hover { color: var(--ink); }
.bm-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.bm-sec[data-open="true"] .bm-body { grid-template-rows: 1fr; }
.bm-fold { min-height: 0; overflow: hidden; }
.bm-tree { position: relative; padding: 6px 0; }
.bm-lines { position: absolute; top: 0; left: 0; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.bm-sec[data-open="true"] .bm-lines { opacity: 1; transition: opacity 250ms ease 100ms; }
.bm-base, .bm-reach { fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.bm-base { stroke: var(--line2); }
.bm-reach { stroke: var(--lime); transition: stroke-dashoffset 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.bm-i { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 10px 0 40px; color: var(--soft); text-align: left; transition: color 200ms ease, background-color 200ms ease; }
.bm-i:hover { color: var(--ink); }
.bm-i[aria-current="true"] { color: var(--ink); font-weight: 600; background: var(--tone1); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.bm-l { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bm-body, .bm-reach { transition: none; } }

/* ---------- theme switch beside the assistant ---------- */
.chatrow { display: flex; align-items: center; gap: 10px; }
.thm { --ss-w: 64px; --ss-h: 34px; --ss-track: var(--tone2); --ss-track-on: #cfccc1; --ss-thumb-color: var(--lime); --ss-thumb-on: #17181a; }
.thm .squish__track { box-shadow: inset 0 0 0 1px var(--line2); }
.thm .squish__thumb { display: grid; place-items: center; }
.thm svg { width: 15px; height: 15px; fill: none; stroke: #17181a; stroke-width: 2; stroke-linecap: round; }
.thm .i-sun { display: none; }
.thm[aria-checked="true"] .i-moon { display: none; }
.thm[aria-checked="true"] .i-sun { display: block; stroke: #e4e2da; }