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

.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: pop-in .28s ease-out; } /* @keyframes pop-in in base.css */
@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; }