/* Polls and surveys (GitHub issue #77). */

/* List */
.polls-page { display: flex; flex-direction: column; gap: var(--space-5); }
.poll-section { display: flex; flex-direction: column; gap: var(--space-3); }
.poll-section .section-title { display: flex; align-items: center; gap: var(--space-2); }
.poll-section .section-title .icon { color: var(--primary); }
.poll-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.poll-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); height: 100%; color: var(--text); text-decoration: none; }
.poll-card:hover { color: var(--text); border-color: var(--primary); }
.poll-card-image { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius); }
.poll-card-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.poll-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.poll-card-title { font-size: var(--text-lg); line-height: 1.3; }
.poll-card-when { font-size: var(--text-sm); }
.poll-card-go { color: var(--text-muted); }
.poll-status-open { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; }
.poll-status-scheduled { background: color-mix(in srgb, var(--accent, #2f6fa3) 16%, transparent); }
.poll-status-closed { background: var(--surface-2); color: var(--text-muted); }
.poll-status-draft { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; }
:root[data-theme="dark"] .poll-status-open { color: #4ade80; }
:root[data-theme="dark"] .poll-status-draft { color: #fbbf24; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .poll-status-open { color: #4ade80; }
    :root:not([data-theme="light"]) .poll-status-draft { color: #fbbf24; }
}

/* Poll page */
.poll-page { max-width: 52rem; display: flex; flex-direction: column; gap: var(--space-5); }
.poll-page > .detail-back, .poll-page > .page-head { margin-bottom: 0; }
.poll { display: flex; flex-direction: column; gap: var(--space-5); }
.poll-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.poll-head h1 { margin: 0; }
.poll-image { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); }
.poll-form { gap: var(--space-4); }
.poll-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.poll-question { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; min-width: 0; }
.poll-question.has-error { border-color: var(--danger, #dc2626); }
.poll-question-title { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 600; font-size: var(--text-lg); padding: 0; float: left; width: 100%; }
.poll-question-title + * { clear: both; }
.poll-q-number { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; }
.poll-required { color: var(--primary); }
.poll-question-text { color: var(--text-muted); }

/* Answer options: cards that can be selected; with pictures they become a grid of picture cards. */
.poll-options { display: flex; flex-direction: column; gap: var(--space-2); }
.poll-options.has-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--space-3); }
.poll-option {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4); border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface);
    cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.poll-option:hover { border-color: var(--border-strong); }
.poll-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.poll-option:has(input:focus-visible) { outline: 3px solid var(--focus, var(--primary)); outline-offset: 2px; }
.poll-option:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.poll-option input { width: 1.2rem; height: 1.2rem; accent-color: var(--primary); flex-shrink: 0; margin: 0; }
.poll-option-label { font-weight: 600; flex: 1; min-width: 0; }
.poll-option-file { font-size: var(--text-sm); flex-basis: 100%; display: inline-flex; align-items: center; gap: var(--space-1); }
.has-images .poll-option { flex-direction: column; align-items: stretch; padding: var(--space-2); }
.has-images .poll-option input { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; width: 1.4rem; height: 1.4rem; }
.has-images .poll-option-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.has-images .poll-option-label { padding: var(--space-1) var(--space-1) 0; }
.has-images .poll-option:not(:has(.poll-option-image)) .poll-option-label { padding-left: 2rem; }

/* Rating 1..5 / 1..10 as a row of buttons */
.poll-rating { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.poll-rating-item { position: relative; }
.poll-rating-item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.poll-rating-item span {
    display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--border); border-radius: var(--radius);
    font-weight: 700; background: var(--surface); transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.poll-rating-item:hover span { border-color: var(--primary); }
.poll-rating-item input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.poll-rating-item input:focus-visible + span { outline: 3px solid var(--focus, var(--primary)); outline-offset: 2px; }
.poll-rating-ends { display: flex; justify-content: space-between; max-width: 33rem; font-size: var(--text-sm); margin: 0; }
.poll-code-input { font-family: var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; }

/* Results */
.poll-results { display: flex; flex-direction: column; gap: var(--space-4); }
.poll-results-section { display: flex; flex-direction: column; gap: var(--space-3); }
.poll-result { display: flex; flex-direction: column; gap: var(--space-3); }
.poll-result-title { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-lg); margin: 0; }
.poll-result-meta { margin: 0; font-size: var(--text-sm); }
.poll-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.poll-bars li { display: flex; align-items: center; gap: var(--space-3); }
.poll-bar-image { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.poll-bar-main { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.poll-bar-label { display: flex; justify-content: space-between; gap: var(--space-3); font-weight: 600; }
.poll-bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.poll-bar { display: block; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.poll-bar span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--primary) 55%, var(--surface-2)); transition: width 700ms var(--ease-out); }
.poll-bars .is-top .poll-bar span { background: var(--primary); }
.poll-average { margin: 0; font-size: var(--text-2xl); }
.poll-rating-chart, .poll-day-chart { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: var(--space-2); height: 140px; }
.poll-rating-chart li, .poll-day-chart li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); height: 100%; min-width: 0; }
.poll-rating-col, .poll-day-col { flex: 1; width: 100%; max-width: 48px; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.poll-rating-col span, .poll-day-col span { display: block; width: 100%; background: var(--primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; }
.poll-rating-value, .poll-day-label, .poll-day-value { font-size: var(--text-xs, 0.75rem); color: var(--text-muted); white-space: nowrap; }
.poll-day-chart { overflow-x: auto; }
.poll-texts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 480px; overflow-y: auto; }
.poll-texts li { padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); }
.poll-texts p { margin: 0 0 var(--space-1); }
.poll-texts .muted { font-size: var(--text-sm); }
.poll-kpis { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.poll-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.poll-kpi-value { font-size: var(--text-xl); font-weight: 700; }

/* Editing */
.poll-edit { display: flex; flex-direction: column; gap: var(--space-5); }
.poll-add-question { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.poll-add-question .label { margin-right: var(--space-2); }
.poll-form-image { display: block; max-width: 220px; border-radius: var(--radius); margin-bottom: var(--space-2); }
.poll-option-rows { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: var(--space-3); }
.poll-option-row { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: minmax(0, 1fr); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); }
.poll-option-row.is-new { border-style: dashed; }
.poll-option-files { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.poll-option-file-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.poll-option-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.label-small { font-size: var(--text-sm); color: var(--text-muted); }
.inline-form { display: inline; }

/* Vote codes: on screen a list of cards; printed: a sheet to cut out. */
.poll-codes-form { padding: var(--space-4); }
.poll-code-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.poll-code-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); break-inside: avoid; }
.poll-code { font-family: var(--font-mono, monospace); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.1em; }
.poll-code-link { color: var(--text-muted); word-break: break-all; font-size: 0.7rem; }
@media print {
    .poll-page > :not(.poll-code-cards):not(.page-head):not(.poll-results):not(.poll-kpis) { display: none !important; }
    .poll-code-cards { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .poll-code-card { border-radius: 0; padding: 10mm 6mm; }
}