/* Decision maker - mode toggle, optional custom options, and a big result + button.
   Reuses base .field / .btn / .seg; colors come from theme tokens only. */

.decide-intro { color: var(--muted); max-width: 60ch; margin: 8px 0 24px; }

.decide-field { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
.decide-field-label { font-size: 14px; color: var(--muted); font-weight: 600; }

.decide-custom { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-width: 360px; }
.decide-options { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }

.decide-stage {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 32px 20px; margin-bottom: 16px;
}
.decide-result {
    margin: 0; font-size: 44px; font-weight: 800; line-height: 1.1; text-align: center;
    color: var(--accent-strong); min-height: 1.1em; word-break: break-word;
}
.decide-result.is-pop { animation: decide-pop .28s ease-out; }
@keyframes decide-pop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .decide-result.is-pop { animation: none; }
}

.decide-button { min-width: 140px; font-size: 16px; }

.decide-error {
    margin: 0 0 8px; padding: 10px 14px; border-radius: 10px;
    color: var(--bad); background: var(--surface); border: 1px solid var(--bad); font-size: 14px;
}