/* discovery.frontierconsulting.ai — questionnaire styles
   Tailwind utility classes cover most of the UI; this file holds the bits
   that benefit from real CSS (transitions, custom radio styling, print). */

.screen {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Option pills — built from <button>s by JS */
.option {
    text-align: left;
    background: rgba(232, 228, 221, 0.04);
    border: 1px solid rgba(232, 228, 221, 0.15);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    color: #E8E4DD;
    font-size: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.option:hover {
    border-color: rgba(250, 170, 41, 0.6);
    background: rgba(250, 170, 41, 0.05);
}

.option .marker {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 1.5px solid rgba(232, 228, 221, 0.3);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.option.selected {
    border-color: #faaa29;
    background: rgba(250, 170, 41, 0.1);
}

.option.selected .marker {
    border-color: #faaa29;
    background: #faaa29;
    box-shadow: inset 0 0 0 3px #111111;
}

.option:focus-visible {
    outline: 2px solid #faaa29;
    outline-offset: 2px;
}