/* Unit u07 shared pieces (engine-u07-talking-stage.js). Tokens only, so dark mode works. */
.tool { --u7-good: 31 157 98; --u7-mid: 214 150 20; --u7-low: 208 51 94; }
@media (prefers-color-scheme: dark) { .tool { --u7-good: 92 214 152; --u7-mid: 240 190 80; --u7-low: 255 120 160; } }

/* Screen enter: short rise + fade, interruptible, off with reduced motion */
.tool .u7-in { animation: u7-in .32s var(--ease-out) both; }
@keyframes u7-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tool .u7-in { animation: none; } }

/* Say-it card */
.tool .u7-say { position: relative; display: grid; gap: 6px; padding: 16px 16px 16px 18px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08); }
.tool .u7-say-label { font-size: 12px; line-height: 16px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--ink) / .5); }
.tool .u7-say-text { font-size: 17px; line-height: 25px; font-weight: 700; color: rgb(var(--ink)); padding-right: 4px; }
.tool .u7-copy { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; margin-top: 2px; border-radius: 20px; font-size: 14px; font-weight: 800; color: var(--link); background: rgb(var(--accent) / .1); transition: background-color .15s ease, transform .2s var(--ease-out); }
.tool .u7-copy .tool-icon { width: 18px; height: 18px; }
.tool .u7-copy:active { transform: scale(.96); }
.tool .u7-copy.is-done { background: rgb(var(--u7-good) / .14); color: rgb(var(--u7-good)); }

/* Stepper row */
.tool .u7-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 8px 8px 16px; border-radius: 20px; background: var(--surface); }
.tool .u7-step-label { display: flex; flex-direction: column; font-size: 16px; line-height: 22px; font-weight: 800; color: rgb(var(--ink)); }
.tool .u7-step-label small { font-size: 13px; line-height: 18px; font-weight: 650; color: rgb(var(--ink) / .5); }
.tool .u7-step-ctl { display: flex; align-items: center; gap: 4px; flex: none; }
.tool .u7-step-btn { width: 48px; height: 48px; border-radius: 24px; display: grid; place-items: center; font-size: 24px; line-height: 1; font-weight: 800; color: rgb(var(--ink)); background: var(--surface-2); transition: transform .2s var(--ease-out), opacity .15s ease; }
.tool .u7-step-btn:active { transform: scale(.92); }
.tool .u7-step-btn:disabled { opacity: .35; }
.tool .u7-step-val { min-width: 64px; text-align: center; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .u7-step-val.is-bump { animation: u7-bump .25s var(--ease-out); }
@keyframes u7-bump { 40% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .tool .u7-step-val.is-bump { animation: none; } }

/* Spectrum track */
.tool .u7-track { display: grid; gap: 8px; }
.tool .u7-track-bar { position: relative; display: flex; gap: 4px; height: 14px; }
.tool .u7-track-bar > span { flex: 1; border-radius: 7px; background: rgb(var(--ink) / .1); transition: background-color .3s ease; }
.tool .u7-track-bar > span.is-on { background: rgb(var(--accent)); }
.tool .u7-track-bar > span.tone-low.is-on { background: rgb(var(--u7-low)); }
.tool .u7-track-bar > span.tone-mid.is-on { background: rgb(var(--u7-mid)); }
.tool .u7-track-bar > span.tone-good.is-on { background: rgb(var(--u7-good)); }
.tool .u7-track-pin { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 4px rgb(var(--ink)), 0 4px 12px rgb(0 0 0 / .2); transition: left .5s var(--ease-out); }
.tool .u7-track-labels { display: flex; gap: 4px; }
.tool .u7-track-labels span { flex: 1; text-align: center; font-size: 12px; line-height: 16px; font-weight: 750; color: rgb(var(--ink) / .45); }
.tool .u7-track-labels span.is-on { color: rgb(var(--ink)); font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .tool .u7-track-pin { transition: none; } }

/* Small pill and section label shared by the three tools */
.tool .u7-eyebrow { font-size: 13px; line-height: 18px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.tool .u7-h { font-size: 17px; line-height: 24px; font-weight: 900; color: rgb(var(--ink)); }
.tool .u7-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 800; }
.tool .u7-link .tool-icon { width: 18px; height: 18px; }
.tool .u7-say-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tool .u7-say-acts .u7-copy { margin-top: 0; }
.tool .u7-alt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 20px; font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .65); background: rgb(var(--ink) / .06); transition: transform .2s var(--ease-out); }
.tool .u7-alt .tool-icon { width: 18px; height: 18px; }
.tool .u7-alt:active { transform: scale(.96); }
.tool .u7-say.is-compact { grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 8px 10px 16px; }
.tool .u7-say.is-compact .u7-say-label { grid-column: 1 / -1; }
.tool .u7-say.is-compact .u7-say-text { font-size: 16px; line-height: 22px; }
.tool .u7-say.is-compact .u7-copy { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 22px; }
.tool .u7-track-bar > span { background: rgb(var(--ink) / .16); }