/* ==========================================================================
   Shared Question Display Styles

   These styles are used by both the builder (unfocused/display state) and
   the voter form to ensure visual consistency.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section Header
   -------------------------------------------------------------------------- */
.section-header {
    border-top: 2px solid var(--color-border);
    padding-top: var(--spacing-xl);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.section-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.section-header-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.section-header-description {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Question Block Container */
.question-display {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.question-display .question-text {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.question-display .required-marker {
    color: var(--color-danger);
    margin-left: var(--spacing-xs);
}

.question-display .question-description {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .section-header {
        padding-top: var(--spacing-lg);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-xs);
        gap: var(--spacing-sm);
    }

    .question-display {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
    }
}

/* Markdown styling for question descriptions */
.question-description.markdown p {
    margin: 0 0 0.75em 0;
}

.question-description.markdown p:last-child {
    margin-bottom: 0;
}

.question-description.markdown a {
    color: var(--color-primary);
}

.question-description.markdown ul,
.question-description.markdown ol {
    margin: 0 0 0.75em 0;
    padding-left: 1.5em;
}

.question-description.markdown code {
    background: var(--color-bg-secondary);
    padding: 0.1em 0.3em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.section-header-description.markdown p {
    margin: 0 0 0.75em 0;
}

.section-header-description.markdown p:last-child {
    margin-bottom: 0;
}

.section-header-description.markdown a {
    color: var(--color-primary);
}

.question-display .question-input {
    margin-top: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Radio & Checkbox Options (Single Choice, Approval)
   -------------------------------------------------------------------------- */
.radio-options,
.checkbox-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-speed) ease;
}

.radio-option:hover,
.checkbox-option:hover {
    background: var(--color-border);
}

.radio-option input,
.checkbox-option input {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

.radio-option span,
.checkbox-option span {
    flex: 1;
}

/* Disabled state for builder preview */
.radio-option:has(input:disabled),
.checkbox-option:has(input:disabled) {
    cursor: default;
}

.radio-option:has(input:disabled):hover,
.checkbox-option:has(input:disabled):hover {
    background: var(--color-bg);
}

/* "Other" option with text input */
.radio-option-other,
.checkbox-option-other {
    flex-wrap: wrap;
}

.radio-option-other span,
.checkbox-option-other span {
    flex: 0;
}

.radio-option-other .other-text-input,
.checkbox-option-other .other-text-input {
    flex: 1;
    min-width: 150px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: 0;
    border-bottom: 1px dotted var(--color-text-muted);
    background: transparent;
    font-size: inherit;
    color: var(--color-text);
    outline: none;
    transition: border-color var(--transition-speed) ease;
}

.radio-option-other .other-text-input:focus,
.checkbox-option-other .other-text-input:focus {
    border-bottom-style: solid;
    border-bottom-color: var(--color-primary);
}

.radio-option-other .other-text-input:disabled,
.checkbox-option-other .other-text-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.radio-option-other .other-text-input::placeholder,
.checkbox-option-other .other-text-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Approval constraints */
.approval-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-sm) 0;
    font-style: italic;
}

.checkbox-option:has(input:disabled:not(:checked)) {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Ranking
   -------------------------------------------------------------------------- */
.ranking-options {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.ranking-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md) 0;
}

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ranking;
}

.ranking-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    cursor: grab;
    counter-increment: ranking;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
}

.ranking-item:last-child {
    margin-bottom: 0;
}

.ranking-item::before {
    content: counter(ranking) ".";
    font-weight: 600;
    color: var(--color-primary);
    min-width: 24px;
}

.builder-main .ranking-item::before {
    color: var(--color-primary-muted);
}

.ranking-item:active {
    cursor: grabbing;
}

.ranking-item:hover {
    box-shadow: var(--shadow-sm);
}

.ranking-item.sortable-ghost {
    opacity: 0.4;
    background: var(--color-primary);
}

.ranking-item.sortable-chosen {
    box-shadow: var(--shadow-md);
}

.ranking-item .drag-handle {
    color: var(--color-text-muted);
    cursor: grab;
}

.ranking-item .option-label {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Truncated Ranking (two-zone drag and drop)
   -------------------------------------------------------------------------- */
.ranking-truncated-options {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.ranking-truncated-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md) 0;
    font-style: italic;
}

.ranking-truncated-zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.ranking-zone {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    min-height: 120px;
}

.ranking-zone-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.ranking-zone-ranked {
    border-color: var(--color-primary);
    border-width: 2px;
    position: relative;
}

.ranking-zone-ranked .ranking-zone-header {
    color: var(--color-primary);
}

.builder-main .ranking-zone-ranked {
    border-color: var(--color-primary-muted);
}

.builder-main .ranking-zone-ranked .ranking-zone-header {
    color: var(--color-primary-muted);
}

.ranking-available-list,
.ranking-ranked-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 50px; /* Fallback, JS sets dynamic min-height */
    transition: min-height 0.15s ease;
}

.ranking-ranked-list {
    counter-reset: ranking;
}

.ranking-truncated-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    cursor: grab;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
}

.ranking-truncated-item:last-child {
    margin-bottom: 0;
}

.ranking-ranked-list .ranking-truncated-item {
    counter-increment: ranking;
}

.ranking-ranked-list .ranking-truncated-item::before {
    content: counter(ranking) ".";
    font-weight: 600;
    color: var(--color-primary);
    min-width: 24px;
}

.ranking-truncated-item:active {
    cursor: grabbing;
}

.ranking-truncated-item:hover {
    box-shadow: var(--shadow-sm);
}

.ranking-truncated-item.sortable-ghost {
    opacity: 0.4;
    background: var(--color-primary);
}

.ranking-truncated-item.sortable-chosen {
    box-shadow: var(--shadow-md);
}

.ranking-truncated-item .drag-handle {
    color: var(--color-text-muted);
    cursor: grab;
}

.ranking-truncated-item .option-label {
    flex: 1;
}

.ranking-drop-placeholder {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--spacing-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-sm);
}

/* Hide placeholder when there are items in ranked list */
.ranking-ranked-list:not(:empty) + .ranking-drop-placeholder {
    display: none;
}

@media (max-width: 600px) {
    .ranking-truncated-hint {
        margin-bottom: var(--spacing-sm);
    }

    .ranking-truncated-options, .ranking-zone {
        padding: var(--spacing-sm);
    }

    .ranking-truncated-zones {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .ranking-item, .ranking-truncated-item {
        gap: var(--spacing-sm);
    }

    .ranking-item::before,
    .ranking-ranked-list .ranking-truncated-item::before {
        min-width: 16px;
    }
}

/* --------------------------------------------------------------------------
   Ranking with Ties (Weak Orders)
   -------------------------------------------------------------------------- */
.ranking-ties-options {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    --indifference-class-gap: 1rem;
}

.ranking-ties-container {
    display: flex;
    flex-direction: column;
}

.indifference-class {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-top: calc(var(--indifference-class-gap) / 2);
    margin-bottom: calc(-1 * var(--indifference-class-gap) / 2);
    transition: margin 70ms ease-in-out, border-color var(--transition-speed) ease;
    position: relative;
}

.indifference-class:has(.ranking-ties-item) {
    margin-top: var(--indifference-class-gap);
    margin-bottom: 0;
}

.indifference-class:first-child {
    margin-top: 0;
}

/* Rank label for indifference classes */
.indifference-class::before {
    content: attr(data-rank);
    position: absolute;
    top: 50%;
    right: var(--spacing-md);
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 0 20px var(--color-primary-muted);
}

/* Empty indifference class (drop target) */
.indifference-class:not(:has(.ranking-ties-item)) {
    min-height: 2.5rem;
    border-style: dashed;
    background: transparent;
}

.indifference-class:not(:has(.ranking-ties-item))::before {
    display: none;
}

.ranking-ties-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xs);
    cursor: grab;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition-speed) ease, background var(--transition-speed) ease;
    user-select: none;
}

.ranking-ties-item:last-child {
    margin-bottom: 0;
}

.ranking-ties-item:active {
    cursor: grabbing;
}

.ranking-ties-item:hover {
    box-shadow: var(--shadow-sm);
}

.ranking-ties-item.dragging {
    opacity: 0.5;
    background: var(--color-primary);
    color: white;
}

.ranking-ties-item.dragging .drag-handle {
    color: white;
}

.ranking-ties-item .drag-handle {
    color: var(--color-text-muted);
    cursor: grab;
    flex-shrink: 0;
}

.ranking-ties-item .option-label {
    flex: 1;
}

/* Visual feedback when dragging over a class */
.indifference-class.drag-over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

@media (max-width: 600px) {
    .ranking-hint {
        margin-bottom: var(--spacing-sm);
    }

    .ranking-ties-options, .ranking-zone {
        padding: var(--spacing-sm);
    }
}

/* --------------------------------------------------------------------------
   Star Rating
   -------------------------------------------------------------------------- */
.star-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.star-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.star-row .option-label {
    flex: 1;
}

.star-rating {
    display: flex;
    gap: var(--spacing-xs);
}

.star {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-border);
    transition: color var(--transition-speed) ease;
    padding: 0;
    line-height: 1;
}

.star:hover,
.star.active {
    color: var(--color-warning);
}

.star:disabled {
    cursor: default;
}

.star:disabled:hover {
    color: var(--color-border);
}

/* --------------------------------------------------------------------------
   Grades
   -------------------------------------------------------------------------- */
.grade-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.grade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    row-gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.grade-row .option-label {
    flex: 1;
}

.grade-select {
    max-width: 150px;
}

/* Grade buttons mode (for ≤3 grades) */
.grade-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.grade-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-speed) ease;
}

.grade-btn:hover:not(:disabled) {
    background: var(--color-border);
}

.grade-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.grade-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* --------------------------------------------------------------------------
   Yes / No / Abstain
   -------------------------------------------------------------------------- */
.yna-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.yna-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.yna-row .option-label {
    flex: 1;
}

.yna-buttons {
    display: flex;
    gap: var(--spacing-xs);
}

.yna-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all var(--transition-speed) ease;
}

.yna-btn:hover:not(:disabled) {
    background: var(--color-border);
}

.yna-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.yna-btn.active.yes {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.yna-btn.active.no {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

.yna-btn.active.abstain {
    background: var(--color-text-muted);
    border-color: var(--color-text-muted);
    color: white;
}

/* --------------------------------------------------------------------------
   Text Inputs
   -------------------------------------------------------------------------- */
.question-display .form-control {
    width: 100%;
}

.question-display textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* --------------------------------------------------------------------------
   Participatory Budgeting
   -------------------------------------------------------------------------- */
.pb-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pb-option-card {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.pb-option-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.pb-option-card:has(input:checked) {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
}

.pb-option-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.pb-option-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.pb-option-content {
    flex: 1;
    min-width: 0;
}

.pb-option-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.pb-option-label {
    font-weight: 500;
    color: var(--color-text);
}

.pb-option-cost {
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
}

.pb-option-description {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.pb-option-description.markdown p {
    margin: 0 0 0.5em 0;
}

.pb-option-description.markdown p:last-child {
    margin-bottom: 0;
}

.pb-option-description.markdown a {
    color: var(--color-primary);
}

/* Disabled state for builder preview */
.pb-option-card:has(input:disabled) {
    cursor: default;
}

.pb-option-card:has(input:disabled):hover {
    border-color: var(--color-border);
    box-shadow: none;
}

/* Approval hint also applies to PB */
.pb-options + .approval-hint,
.pb-options ~ .approval-hint {
    margin-top: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .star-row,
    .grade-row,
    .yna-row {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--spacing-md);
        row-gap: var(--spacing-sm);
    }

    .star-rating,
    .grade-select,
    .yna-buttons {
        width: 100%;
    }

    .grade-select {
        max-width: none;
    }

    .yna-buttons {
        justify-content: stretch;
    }

    .yna-btn {
        flex: 1;
    }
}