/* ==========================================================================
   Profile Questionnaire Styles
   Personalization-cohort Phase 6 — WCAG 2.1 AA compliant
   Uses brand CSS variables from saveag-ui.css exclusively.
   No inline styles; no hardcoded colours.
   ========================================================================== */

/* ---- Layout ---- */

.profile-questionnaire {
    padding: var(--space-lg, 2rem) var(--space-sm, 1rem);
    min-height: 60vh;
}

.profile-container {
    max-width: 680px;
    margin: 0 auto;
}

/* ---- Heading ---- */

.profile-heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 1.75rem;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.5rem;
}

.profile-intro {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    color: var(--color-secondary, #1f4332);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ---- Progress bar ---- */

.profile-progress {
    margin-bottom: 2rem;
}

.profile-progress-bar {
    background: var(--color-border, #dde4d0);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.profile-progress-fill {
    background: var(--color-primary, #506c44);
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.profile-progress-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-muted, #666);
    margin-top: 0.4rem;
}

/* ---- Dimension cards ---- */

.profile-dimension {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease;
}

.profile-dimension:focus-within {
    border-color: var(--color-primary, #506c44);
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

.profile-dimension--done {
    border-color: var(--color-primary, #506c44);
    background: var(--color-surface-alt, #f7faf5);
}

.profile-dimension-header {
    margin-bottom: 0.75rem;
}

.profile-dimension-title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Suppress browser focus ring on programmatic focus (tabindex=-1 + .focus() for
   screen-reader step announcements). :focus-visible still shows for keyboard nav. */
.profile-dimension-title:focus {
    outline: none;
}

.profile-check {
    color: var(--color-primary, #506c44);
    font-size: 1rem;
    line-height: 1;
}

.profile-dimension-help {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    margin: 0;
    line-height: 1.5;
}

/* ---- Form controls ---- */

.profile-form .form-group {
    margin-bottom: 0.75rem;
}

.profile-form .form-label {
    /* Visually hidden — title serves as the visible label above.
       sr-only pattern keeps label present for screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Override sr-only when focus is inside the group for high-contrast */
.profile-form .form-group:focus-within .form-label {
    /* Keep visually hidden — heading is still visible */
}

.profile-form .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    background: var(--color-background, #f7f7ed);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-form .form-control:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-color: var(--color-primary, #506c44);
}

/* ---- Save button ---- */

.profile-dimension-actions {
    margin-top: 0.75rem;
}

.profile-save-btn {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
}

.profile-save-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ---- Footer nav ---- */

.profile-footer-nav {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #dde4d0);
}

.profile-back-link {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-primary, #506c44);
    text-decoration: none;
}

.profile-back-link:hover,
.profile-back-link:focus {
    text-decoration: underline;
}

.profile-back-link:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   User Type Selector (Step 1 — Persona Selection)
   personalization-questionnaire-redesign Phase 3 — WCAG 2.1 AA compliant
   ========================================================================== */

.profile-persona-fieldset {
    border: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.profile-persona-legend {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 1rem;
    display: block;
}

.profile-persona-option {
    margin-bottom: 0.625rem;
}

.profile-persona-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.profile-persona-label:hover {
    border-color: var(--color-primary, #506c44);
    background: var(--color-surface-alt, #f7faf5);
}

.profile-persona-radio {
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--color-primary, #506c44);
    width: 1.1rem;
    height: 1.1rem;
}

.profile-persona-radio:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Highlight selected persona card */
.profile-persona-label:has(input:checked) {
    border-color: var(--color-primary, #506c44);
    background: var(--color-surface-alt, #f7faf5);
    border-left-width: 3px;
}

.profile-persona-label-text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-secondary, #1f4332);
    display: block;
    line-height: 1.3;
}

.profile-persona-description {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    display: block;
    line-height: 1.4;
    margin-top: 0.15rem;
}

/* Active persona badge (Step 2+) */
.profile-persona-active {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-alt, #f7faf5);
    border: 1px solid var(--color-border, #dde4d0);
    border-left: 3px solid var(--color-primary, #506c44);
    border-radius: 6px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
}

.profile-persona-active-label {
    flex: 1;
}

.profile-change-persona-link {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--color-primary, #506c44);
    text-decoration: none;
    white-space: nowrap;
}

.profile-change-persona-link:hover,
.profile-change-persona-link:focus {
    text-decoration: underline;
}

.profile-change-persona-link:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Visible form labels (overrides sr-only on original .form-label) */
.form-label-visible {
    display: block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.375rem;
}

/* Required badge */
.profile-required-badge {
    display: inline-block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.72rem;
    color: var(--color-accent-1, #975436);
    background: transparent;
    border: 1px solid var(--color-accent-1, #975436);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    margin-left: 0.3rem;
    vertical-align: middle;
    line-height: 1.4;
}

/* ==========================================================================
   Location Input + Derivation Panel
   ========================================================================== */

.profile-location-input-row {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-location-input-row .form-control {
    flex: 1;
    min-width: 0;
}

.profile-derive-btn {
    flex-shrink: 0;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}

.profile-derivation-panel {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface-alt, #f7faf5);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
}

.profile-derivation-status {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-muted, #666);
    margin: 0;
}

.profile-derivation-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-derived-field {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.profile-derived-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    margin: 0;
    white-space: nowrap;
}

.profile-derived-value {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.profile-change-derived-btn {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--color-primary, #506c44);
    background: transparent;
    border: 1px solid var(--color-primary, #506c44);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.profile-change-derived-btn:hover,
.profile-change-derived-btn:focus {
    background: var(--color-primary, #506c44);
    color: var(--color-surface, #ffffff);
}

.profile-change-derived-btn:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Override panel — appears below the derived value row */
.profile-override-panel {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
}

.profile-override-section-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.375rem;
}

.profile-override-section-label--secondary {
    margin-top: 0.75rem;
}

.profile-override-candidates,
.profile-override-full {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.profile-override-option {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-secondary, #1f4332);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 4px;
    background: var(--color-surface-alt, #f7faf5);
    transition: border-color 0.15s ease;
}

.profile-override-option:hover {
    border-color: var(--color-primary, #506c44);
}

.profile-override-radio {
    accent-color: var(--color-primary, #506c44);
}

.profile-override-radio:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

.profile-apply-derivation-btn {
    align-self: flex-start;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ==========================================================================
   Practice Dimension — Checkbox Grid
   ========================================================================== */

.profile-practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.profile-practice-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: var(--font-primary, 'Poppins', sans-serif);
}

.profile-practice-option:hover {
    border-color: var(--color-primary, #506c44);
    background: var(--color-surface-alt, #f7faf5);
}

.profile-practice-option:has(input:checked) {
    border-color: var(--color-primary, #506c44);
    background: var(--color-surface-alt, #f7faf5);
}

.profile-practice-checkbox {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-primary, #506c44);
    width: 1rem;
    height: 1rem;
}

.profile-practice-checkbox:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

.profile-practice-label-text {
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.4;
}

.profile-practice-count-note {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    margin: 0.25rem 0 0.75rem;
}

/* ==========================================================================
   Location Derivation — Chip-based UI (Phase 2)
   WCAG 2.1 AA compliant: keyboard-removable chips, focus-visible outlines,
   aria-live region for screen reader announcements.
   ========================================================================== */

.location-input-wrapper {
    position: relative;
}

.location-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--color-primary, #506c44);
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.location-suggestion-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--color-secondary, #1f4332);
    cursor: pointer;
    line-height: 1.4;
}

.location-suggestion-item:hover,
.location-suggestion-item:focus {
    background: var(--color-background, #f7f7ed);
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: -2px;
}

.profile-derivation-transparency {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.78rem;
    color: var(--color-muted, #666);
    margin: 0.3rem 0 0;
}

/* Higher specificity (.form-group input in auth.css is 0,1,1 — this is 0,2,0) */
.form-group .location-outside-checkbox,
.location-outside-checkbox {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary, #506c44);
}

/* Higher specificity (.form-group label in auth.css is 0,1,1 — this is 0,2,0) */
.form-group .location-outside-label,
.location-outside-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin-top: 0.5rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    cursor: pointer;
}

.profile-derivation-loading {
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-muted, #666);
    padding: 0.5rem 0;
}
/* display: flex on a separate :not([hidden]) selector so the hidden attribute wins */
.profile-derivation-loading:not([hidden]) {
    display: flex;
}

.profile-derivation-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border, #dde4d0);
    border-top-color: var(--color-primary, #506c44);
    border-radius: 50%;
    animation: chip-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes chip-spin {
    to { transform: rotate(360deg); }
}

.profile-derivation-error {
    margin-bottom: 0.75rem;
}

.profile-derivation-error-msg {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-accent-1, #975436);
    margin: 0;
}

/* Derivation confirmation area (read-only) */
.profile-derivation-confirm-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-derivation-detected {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.profile-derivation-detected-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    font-family: var(--font-primary, 'Poppins', sans-serif);
}

.profile-derivation-detected-label {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    min-width: 6rem;
}

.profile-derivation-detected-value {
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--color-secondary, #1f4332);
}

.profile-derivation-detected-heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #666);
    margin-top: 0.5rem;
    margin-bottom: 0.1rem;
}

.profile-derivation-section-heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.25rem;
}

.profile-derivation-confirm-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    margin: 0;
}

/* Inline edit form (shown when user clicks Change) */
.profile-derivation-edit-form {
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.25rem;
}
.profile-derivation-edit-form:not([hidden]) {
    display: flex;
}

.profile-derivation-edit-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-derivation-edit-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    min-width: 6rem;
    flex-shrink: 0;
}

.profile-derivation-edit-select {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
}

/* Chip area container (kept for species chip trays) */
.profile-derivation-chip-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Region derivation panel — Looks right / Skip action row */
.region-derivation-actions {
    display: flex;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

/* Per-group container (soil or terrain) */
.profile-chip-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-chip-group-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    margin: 0;
}

/* Chip list — flex wrap row of chips */
.profile-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-height: 2rem;
}

/* Base chip style */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 99px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    line-height: 1.3;
    border: 1px solid var(--color-border, #dde4d0);
    background: var(--color-surface, #ffffff);
    color: var(--color-secondary, #1f4332);
}

/* Derived chip — visually distinct; auto-populated from location lookup */
.chip--derived {
    background: var(--color-surface-alt, #f7faf5);
    border-color: var(--color-primary, #506c44);
    color: var(--color-secondary, #1f4332);
}

/* Manual chip — user-added from the taxonomy select */
.chip--manual {
    background: var(--color-surface, #ffffff);
    border-color: var(--color-accent-2, #c9863a);
    color: var(--color-secondary, #1f4332);
}

/* Chip label */
.chip__label {
    white-space: nowrap;
}

/* Chip remove button */
.chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--color-muted, #666);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chip__remove:hover {
    background: var(--color-accent-1, #975436);
    color: var(--color-surface, #ffffff);
}

/* Focus-visible outline on chip remove buttons (WCAG 2.1 AA) */
.chip__remove:focus-visible,
.chip__remove:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Manual add row (select + button) */
.profile-chip-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-chip-add-select {
    flex: 1;
    min-width: 0;
    max-width: 280px;
    font-size: 0.85rem;
}

.profile-chip-add-btn {
    flex-shrink: 0;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Apply button row */
.profile-chip-actions {
    margin-top: 0.25rem;
}

/* ==========================================================================
   Species Multi-Select — Phase 3 (grouped chips + typeahead + add-your-own)
   WCAG 2.1 AA compliant
   ========================================================================== */

/* Group container (crops or livestock section) */
.species-group {
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

/* Collapsible group header button */
.species-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 0.875rem;
    background: var(--color-surface-alt, #f7faf5);
    border: none;
    border-bottom: 1px solid var(--color-border, #dde4d0);
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--color-secondary, #1f4332);
    cursor: pointer;
    text-align: left;
}

.species-group-header:focus-visible,
.species-group-header:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: -2px;
}

.species-group-header-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.species-group-select-all {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--color-primary, #506c44);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0 0.25rem;
    cursor: pointer;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    flex-shrink: 0;
    white-space: nowrap;
}

.species-group-select-all:focus-visible,
.species-group-select-all:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Options grid within a group */
.species-group-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
}

/* Individual option label (rendered as a chip-style toggle) */
.species-option {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem;
    border-radius: 99px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    border: 1px solid var(--color-border, #dde4d0);
    background: var(--color-surface, #ffffff);
    color: var(--color-secondary, #1f4332);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.species-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.species-option:has(input:checked),
.species-option.species-option--selected {
    background: var(--color-primary, #506c44);
    border-color: var(--color-primary, #506c44);
    color: var(--color-surface, #ffffff);
    font-weight: 500;
}

.species-option:focus-within {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Typeahead container */
.species-typeahead-wrapper {
    position: relative;
    margin-bottom: 0.75rem;
}

/* Typeahead input */
.typeahead-input {
    width: 100%;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.9rem;
}

/* Typeahead dropdown */
.typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-primary, #506c44);
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(31, 67, 50, 0.1);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.typeahead-option {
    padding: 0.4rem 0.75rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    cursor: pointer;
}

.typeahead-option:hover,
.typeahead-option[aria-selected="true"] {
    background: var(--color-surface-alt, #f7faf5);
    color: var(--color-primary, #506c44);
    font-weight: 500;
}

.typeahead-option:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: -2px;
}

/* Selected species chip tray */
.species-chip-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-height: 2rem;
    margin-bottom: 0.5rem;
}

/* Species chip variant overrides */
.chip--matched {
    background: var(--color-surface-alt, #f7faf5);
    border-color: var(--color-primary, #506c44);
    color: var(--color-secondary, #1f4332);
}

.chip--group-collapsed {
    background: #fff8ec;
    border-color: var(--color-accent-2, #c9863a);
    color: var(--color-secondary, #1f4332);
}

.chip--unresolved {
    background: #fff3f0;
    border-color: var(--color-accent-1, #975436);
    color: var(--color-secondary, #1f4332);
}

.chip__outcome-note {
    font-size: 0.72rem;
    font-weight: 300;
    opacity: 0.8;
    margin-left: 0.15rem;
}

/* Add-your-own row */
.species-add-own-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.species-add-own-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.88rem;
}

.species-add-own-btn {
    flex-shrink: 0;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Section headings within species component */
.species-section-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.75rem 0 0.375rem;
}

/* ==========================================================================
   Profile Nudge Banner
   Personalization-cohort Phase 7 — WCAG 2.1 AA compliant
   Non-blocking invitation to complete profile on Ask results page.
   ========================================================================== */

.profile-nudge-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-primary, #506c44);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin: 0 auto 1.25rem;
    max-width: 720px;
    box-shadow: 0 2px 8px rgba(31, 67, 50, 0.08);
}

.profile-nudge-body {
    flex: 1;
    min-width: 0;
}

.profile-nudge-title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.25rem;
}

.profile-nudge-text {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.5rem;
    line-height: 1.5;
}

.profile-nudge-link {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-primary, #506c44);
    text-decoration: none;
    white-space: nowrap;
}

.profile-nudge-link:hover,
.profile-nudge-link:focus {
    text-decoration: underline;
}

.profile-nudge-link:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

.profile-nudge-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    color: var(--color-muted, #666);
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-nudge-close:hover {
    color: var(--color-secondary, #1f4332);
    background: var(--color-background, #f7f7ed);
}

.profile-nudge-close:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* ==========================================================================
   Results Page — Two-Column Grid Layout (Phase 2)
   Sidebar collapses at ≤1024px; all pixel widths are grid-only at ≥1025px.
   ========================================================================== */

.results-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--spacing-lg, 2rem);
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md, 1rem);
}

.results-main {
    min-width: 0; /* prevent grid blowout */
}

.results-sidebar {
    min-width: 0;
}

@media (max-width: 1024px) {
    .results-layout {
        grid-template-columns: 1fr;
    }

    .results-sidebar {
        display: none;
    }
}

/* ---- History Sidebar ---- */

.history-sidebar {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1rem;
}

.history-sidebar__title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.88rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #dde4d0);
}

.history-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.history-sidebar__list li a {
    display: block;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-primary, #506c44);
    text-decoration: none;
    padding: 0.3rem 0.4rem;
    border-radius: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.history-sidebar__list li a:hover,
.history-sidebar__list li a:focus {
    background: var(--color-background, #f7f7ed);
    text-decoration: underline;
}

.history-sidebar__list li a:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

.history-sidebar__empty {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    margin: 0;
    font-style: italic;
}

/* Linkable sidebar heading */
.history-sidebar__title-link {
    color: inherit;
    text-decoration: none;
}
.history-sidebar__title-link:hover,
.history-sidebar__title-link:focus {
    text-decoration: underline;
    color: var(--color-primary, #506c44);
}

/* "…see all" overflow link */
.history-sidebar__more a {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--color-text-muted, #666);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    display: block;
}
.history-sidebar__more a:hover,
.history-sidebar__more a:focus {
    text-decoration: underline;
    color: var(--color-primary, #506c44);
}

.history-sidebar__toggle {
    display: none; /* reserved for future mobile toggle */
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-primary, #506c44);
    background: transparent;
    border: 1px solid var(--color-primary, #506c44);
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}

/* ==========================================================================
   Personalization Invitation Card (Phase 2)
   Shown to non-personalized users after the answer card.
   ========================================================================== */

.personalization-invite {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0 0;
}

.personalization-invite__flag {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-accent-1, #975436);
    border-radius: 5px;
    padding: 0.35rem 0.75rem 0.4rem;
    margin: 0 0 0.75rem;
}

.personalization-invite__flag-title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.3;
}

.personalization-invite__flag-sub {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.3;
}

.personalization-invite__heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.625rem;
}

.personalization-invite__body {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.55;
    margin: 0 0 0.625rem;
}

.personalization-invite__actions {
    margin: 0.875rem 0 0;
}

.personalization-invite__note {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.75rem;
    color: var(--color-secondary, #1f4332);
    opacity: 0.65;
    line-height: 1.5;
    margin: 0.75rem 0 0;
}

/* ==========================================================================
   Flow-driven questionnaire steps (Phase 4 — 8-persona flow routing)
   ========================================================================== */

/* Flow step visibility — JS shows/hides via hidden attribute */
.flow-step[hidden] {
    display: none;
}

.flow-step-actions[hidden] {
    display: none;
}

.flow-step {
    margin-bottom: 1.5rem;
}

/* Step action row: Back / Skip / Next / Save */
.flow-step-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    align-items: center;
}

/* Inline validation error shown below form controls */
.flow-step-error {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.85rem;
    color: var(--color-accent-1, #975436);
    margin: 0 0 0.5rem;
}

/* Optional badge on step headings */
.profile-optional-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--color-accent-2, #c9863a);
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Radio group for single-select flow steps (irrigation, sector, aspiration) */
.flow-radio-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.flow-radio-option {
    margin-bottom: 0.6rem;
}

.flow-radio-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.45;
}

.flow-radio-input {
    margin-top: 0.15rem;
    accent-color: var(--color-primary, #506c44);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.flow-radio-label:focus-within .flow-radio-label-text {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

.flow-radio-input:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Textarea for free-text flow steps (expertise_summary, investment_thesis) */
.flow-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    background: #fff;
    border: 1.5px solid #c5ccc0;
    border-radius: 4px;
    resize: vertical;
    min-height: 7rem;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.flow-textarea:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-color: var(--color-primary, #506c44);
}

.flow-textarea::placeholder {
    color: #8a9a84;
    opacity: 1;
}

/* ---- Newsletter cadence step ---- */

.newsletter-cadence-fieldset {
    margin-bottom: 1.5rem;
}

.newsletter-cadence-legend {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.75rem;
}

.newsletter-cadence-option {
    margin-bottom: 0.5rem;
}

.newsletter-cadence-note {
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-text-muted, #666666);
}

.newsletter-step-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Checkbox group for multi-select flow steps (client_base) */
.flow-checkbox-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 0.75rem;
}

.flow-checkbox-option {
    margin-bottom: 0.6rem;
}

.flow-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.45;
}

.flow-checkbox-input {
    margin-top: 0.15rem;
    accent-color: var(--color-primary, #506c44);
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.flow-checkbox-input:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

.flow-checkbox-label:focus-within .flow-checkbox-label-text {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Onboarding Intro + Confirmation Screens (Phase 5)
   ========================================================================== */

/* ---- Shared onboarding layout ---- */

.onboarding-intro .profile-heading,
.onboarding-complete .profile-heading {
    margin-bottom: 1rem;
}

/* ---- Benefit cards (onboarding intro) ---- */

.onboarding-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0;
}

@media (min-width: 600px) {
    .onboarding-benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

.onboarding-benefit {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.onboarding-benefit__heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.5rem;
}

.onboarding-benefit__body {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.6;
    margin: 0;
}

/* ---- What we'll ask (onboarding intro) ---- */

.onboarding-what-we-ask {
    background: var(--color-surface-alt, #f7faf5);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}

.onboarding-what-we-ask__heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.75rem;
}

.onboarding-what-we-ask__list {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}

.onboarding-what-we-ask__list li {
    margin-bottom: 0.4rem;
}

.onboarding-what-we-ask__note {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--color-muted, #666);
    margin: 0;
}

/* ---- CTA + skip link (onboarding intro) ---- */

.onboarding-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1rem;
}

.onboarding-cta {
    font-size: 1rem;
}

.onboarding-skip-link {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-muted, #666);
    text-decoration: underline;
}

.onboarding-skip-link:hover,
.onboarding-skip-link:focus {
    color: var(--color-secondary, #1f4332);
}

.onboarding-skip-link:focus-visible {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Completion notices (onboarding_complete) ---- */

.onboarding-complete__notices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
}

.onboarding-complete__notice {
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.onboarding-complete__notice--retention {
    border-left: 4px solid var(--color-primary, #506c44);
}

.onboarding-complete__notice--newsletter {
    border-left: 4px solid var(--color-accent-3, #6bafb2);
}

.onboarding-complete__notice-heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.5rem;
}

.onboarding-complete__notice-body {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    line-height: 1.6;
    margin: 0;
}

.onboarding-complete__settings-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--color-primary, #506c44);
    font-weight: 500;
    text-decoration: underline;
}

.onboarding-complete__settings-link:focus-visible {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Location Confirmation Map + Pin UI (Phase 2)
   Leaflet map with draggable pin for coordinate confirmation.
   WCAG 2.1 AA: keyboard lat/lon fields, visible focus outlines, contrast.
   ========================================================================== */

.location-confirm-map-section {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface, #ffffff);
}

.location-confirm-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.88rem;
    color: var(--color-secondary, #1f4332);
    margin: 0.75rem 1rem 0.5rem;
    /* contrast: #1f4332 on #fff = 10.5:1 — exceeds WCAG AA 4.5:1 */
}

/* Leaflet map container — fixed height so the map renders correctly */
#location-confirm-map {
    width: 100%;
    height: 300px;
    display: block;
}

/* Editable lat/lon fields — WCAG keyboard alternative to dragging the pin */
.location-coord-fields {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

.location-coord-field {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.location-coord-label {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--color-secondary, #1f4332);
    /* contrast: #1f4332 on #f7f7ed = 9.6:1 — exceeds WCAG AA 4.5:1 */
}

.location-coord-input {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.88rem;
    color: var(--color-secondary, #1f4332);
    background: var(--color-background, #f7f7ed);
    border: 1px solid var(--color-border, #dde4d0);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
}

.location-coord-input:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
    border-color: var(--color-primary, #506c44);
}

/* Confirm location button row */
.location-confirm-actions {
    padding: 0.5rem 1rem 0.75rem;
}

.location-confirm-btn {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
}

.location-confirm-btn:disabled {
    opacity: 0.65;
    cursor: default;
}

/* ==========================================================================
   Profile Edit Page (/profile/edit)
   ========================================================================== */

.profile-edit-page .profile-container {
    max-width: 700px;
}

.profile-edit-header {
    margin-bottom: 2rem;
}

.profile-edit-back-link {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--color-primary, #506c44);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.profile-edit-back-link:hover {
    text-decoration: underline;
}

/* Status banner (save confirmation / error) */
.profile-edit-status {
    padding: 0.6rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.profile-edit-status--ok {
    background: #f0f5ee;
    color: var(--color-primary, #506c44);
    border-left: 3px solid var(--color-primary, #506c44);
}

.profile-edit-status--error {
    background: #fdf2f0;
    color: var(--color-accent-1, #975436);
    border-left: 3px solid var(--color-accent-1, #975436);
}

/* Individual group cards */
.profile-edit-group {
    background: white;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.profile-edit-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.profile-edit-group-title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-secondary, #1f4332);
    margin: 0;
}

.profile-edit-toggle-btn {
    background: none;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    color: var(--color-primary, #506c44);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.profile-edit-toggle-btn:hover {
    border-color: var(--color-primary, #506c44);
    background: #f0f5ee;
}

.profile-edit-toggle-btn:focus-visible {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 2px;
}

/* Current value display */
.profile-edit-current {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.profile-edit-value {
    font-size: 0.9rem;
    color: var(--color-text, #333333);
    font-weight: 300;
    line-height: 1.5;
}

.profile-edit-empty {
    font-size: 0.875rem;
    color: var(--color-text-muted, #999999);
    font-style: italic;
}

.profile-edit-derived {
    font-size: 0.8rem;
    color: var(--color-text-muted, #888888);
}

/* Expand panel */
.profile-edit-panel {
    margin-top: 1.25rem;
    border-top: 1px solid var(--color-border, #f0f0e8);
    padding-top: 1.25rem;
}

/* Ensure hidden attribute collapses panel (guards against display rules elsewhere) */
.profile-edit-panel[hidden] {
    display: none;
}

.profile-edit-form-body {
    margin-bottom: 1rem;
}

.profile-edit-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.5rem;
}

.profile-edit-hint {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--color-text-muted, #888888);
}

.profile-edit-text-input,
.profile-edit-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border, #d0d0c8);
    border-radius: 4px;
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--color-text, #333333);
    background: white;
    box-sizing: border-box;
}

.profile-edit-text-input:focus,
.profile-edit-textarea:focus {
    outline: 2px solid var(--color-primary, #506c44);
    outline-offset: 0;
    border-color: var(--color-primary, #506c44);
}

.profile-edit-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox lists */
.profile-edit-check-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.profile-edit-legend {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.profile-edit-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 300;
    color: var(--color-text, #333333);
    padding: 0.3rem 0;
    cursor: pointer;
}

.profile-edit-checkbox {
    accent-color: var(--color-primary, #506c44);
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Practice focus — 2-column grid */
.profile-edit-practice-grid {
    display: block;
}

.profile-edit-practice-label {
    padding: 0.25rem 0;
}

@media (min-width: 500px) {
    .profile-edit-practice-grid .profile-edit-practice-label {
        display: inline-flex;
        width: 48%;
        margin-right: 2%;
        vertical-align: top;
    }
}

.profile-edit-practice-count {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Climate two-column layout */
.profile-edit-climate-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.profile-edit-climate-field {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-edit-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--color-text, #333);
    cursor: pointer;
}

.profile-edit-select:focus {
    outline: none;
    border-color: var(--color-primary, #506c44);
    box-shadow: 0 0 0 3px rgba(80, 108, 68, 0.1);
}

/* Species grouped checkboxes */
.profile-edit-species-fieldset {
    margin-bottom: 1rem;
}

.profile-edit-species-fieldset + .profile-edit-species-fieldset {
    border-top: 1px solid var(--color-border, #e8e8de);
    padding-top: 1rem;
    margin-top: 0.25rem;
}

.profile-edit-species-group-label {
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #666);
    margin: 0.75rem 0 0.3rem;
}

.profile-edit-species-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.5rem;
}

.profile-edit-species-group .profile-edit-check-label {
    width: calc(50% - 0.25rem);
    min-width: 120px;
}

@media (min-width: 520px) {
    .profile-edit-species-group .profile-edit-check-label {
        width: calc(33.3% - 0.35rem);
    }
}

/* "Add your own" row */
.profile-edit-add-own-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #e8e8de);
}

.profile-edit-add-own-input {
    flex: 1;
}

/* Action buttons row */
.profile-edit-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* =========================================================================
   Questionnaire completion panel
   ========================================================================= */
.completion-benefits {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.5rem 0 1.25rem;
    border: 1px solid var(--color-border, #e8e8de);
    border-radius: 8px;
    overflow: hidden;
}

.completion-benefit {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--color-border, #e8e8de);
}

.completion-benefit:last-child {
    border-bottom: none;
}

.completion-benefit:first-child {
    background: #f0f5ee; /* light primary tint — reinforces the positive action */
}

.completion-benefit-title {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-secondary, #1f4332);
    margin-bottom: 0.4rem;
}

.completion-benefit-body {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.875rem;
    color: var(--color-text, #333);
    line-height: 1.55;
    margin: 0;
}

.completion-settings-link {
    color: var(--color-primary, #506c44);
    text-decoration: underline;
}

.completion-settings-link:hover {
    color: var(--color-secondary, #1f4332);
}

.completion-edit-note {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 300;
    font-size: 0.82rem;
    color: var(--color-muted, #666);
    margin: 0 0 1.5rem;
}

/* Combined specialization + practice step */
.combined-step-section {
    margin-bottom: 1.5rem;
}

.combined-step-section-heading {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-secondary, #1f4332);
    margin: 0 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.combined-step-section-help {
    margin-bottom: 0.75rem;
}

.combined-step-divider {
    border: none;
    border-top: 1px solid #dde5d4;
    margin: 1.25rem 0 1.5rem;
}