/* POLLS 001: query-free result bars and native voting/creation forms. */
.poll-badge { display: inline-flex; align-items: center; gap: .4rem; color: #604577; background: #f3edfc; border-radius: .5rem; padding: .3rem .6rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-block: 0 .75rem; }
.poll { margin-block-start: 1.1rem; }
.poll-results { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.poll-result { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: .75rem; min-block-size: 2.9rem; padding: .75rem .85rem; border: 1px solid #e4d8ee; border-radius: .75rem; background: #faf7fe; }
.poll-result__bar { position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; max-inline-size: 100%; background: #ece1f9; }
.poll-result__label { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; }
.poll-result__label small { display: block; color: var(--ft-primary); font-size: .6875rem; margin-block-start: .15rem; }
.poll-result__percent { flex-shrink: 0; color: #604577; font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.poll-result--own { border-color: var(--ft-primary); }
.poll-result--own .poll-result__bar { background: var(--ft-pink); }
.poll-summary { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; color: var(--ft-muted); font-size: .75rem; margin-block: .75rem 0; }
.poll-hint { color: var(--ft-muted); font-size: .8125rem; line-height: 1.65; margin-block: .8rem 0; }
.poll-open { display: inline-flex; align-items: center; gap: .5rem; position: relative; z-index: 2; min-block-size: 2.75rem; margin-block-start: .5rem; font-size: .8125rem; text-decoration: none; }
.poll-open:hover { text-decoration: underline; }
.poll-open .ft-icon { inline-size: 1rem; block-size: 1rem; }
.poll-action { position: relative; z-index: 2; margin-block-start: 1rem; font-size: .875rem; }
.poll-vote-form { margin-block-start: 1.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--ft-border); }
.poll-choices { padding: 0; margin: 0; border: 0; }
.poll-choices legend { margin-block-end: .6rem; font-size: .9375rem; }
.poll-choices label { display: flex; align-items: center; gap: .65rem; min-block-size: 2.75rem; margin-block-end: .5rem; padding: .65rem .85rem; border: 1px solid var(--ft-control-border); border-radius: .75rem; font-size: .875rem; font-weight: 400; cursor: pointer; }
.poll-choices input { flex-shrink: 0; margin: 0; }
.poll-choices label > span { min-inline-size: 0; overflow-wrap: anywhere; }
.poll-choices label:has(:checked) { color: var(--ft-primary); border-color: var(--ft-primary); background: var(--ft-pink); }
.poll-vote-form > button { margin-block-start: 1rem; inline-size: 100%; }
.poll-notice { padding: .85rem 1rem; margin-block: 0 1rem; border-radius: .75rem; background: var(--ft-lilac); color: #604577; font-size: .875rem; overflow-wrap: anywhere; }
.poll-create { border: 0; padding: 0; margin-block: 0 1.4rem; }
.poll-create > .ft-field__hint { margin-block: .5rem 1rem; }
.poll-create__rows { display: grid; gap: .85rem; }
.poll-create__row > label { display: block; font-size: .875rem; margin-block-end: .4rem; }
.poll-create__row > div { display: flex; align-items: center; gap: .5rem; }
.poll-create__row input { min-inline-size: 0; }
.poll-create__remove { min-block-size: 2.75rem; padding: .5rem; border: 1px solid var(--ft-control-border); border-radius: .65rem; background: var(--ft-surface); color: var(--ft-muted); font-size: .75rem; cursor: pointer; }
.poll-create__add { margin-block-start: 1rem; font-size: .875rem; }
.poll-create__add .ft-icon { inline-size: 1rem; block-size: 1rem; }
/* Component display rules must not override the native hidden attribute. */
.poll-create[hidden], .poll-create button[hidden] { display: none; }
@media (min-width: 48rem) { .poll-vote-form > button { inline-size: auto; min-inline-size: 10rem; } }
/* POLLS 002: image options retain their complete framing, with a native one-tap vote. */
.poll-image-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:0; padding:0; list-style:none; }
.poll-image-option { min-inline-size:0; }
.poll-image-card { position:relative; z-index:2; display:flex; flex-direction:column; inline-size:100%; block-size:100%; overflow:hidden; padding:0; border:1px solid var(--ft-border); border-radius:var(--ft-radius-sm,.8rem); background:var(--ft-surface); color:var(--ft-text); text-align:start; text-decoration:none; font:inherit; }
button.poll-image-card, a.poll-image-card { cursor:pointer; }
button.poll-image-card:hover, a.poll-image-card:hover, .poll-image-option--own .poll-image-card { border-color:var(--ft-primary); box-shadow:0 0 0 1px var(--ft-primary); }
.poll-image-photo { position:relative; display:block; inline-size:100%; aspect-ratio:1; background:var(--ft-lilac); }
.poll-image-photo img { display:block; inline-size:100%; block-size:100%; object-fit:contain; }
.poll-image-letter { position:absolute; inset:.5rem auto auto .5rem; display:grid; place-items:center; inline-size:1.75rem; block-size:1.75rem; border-radius:50%; background:var(--ft-surface); color:var(--ft-primary); box-shadow:0 1px 5px #0002; font-weight:750; }
.poll-image-caption { display:block; padding:.6rem .7rem; overflow-wrap:anywhere; font-size:.875rem; }
.poll-image-result { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.25rem; margin-block-start:auto; padding:.55rem .7rem; background:var(--ft-lilac); font-size:.75rem; }
.poll-image-result strong { font-size:1rem; color:var(--ft-primary); }
.poll-image-option--own .poll-image-result { background:var(--ft-pink); }
.poll-mode { display:flex; gap:.5rem; margin-block:.8rem; }
.poll-mode label { position:relative; display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem; border:1px solid var(--ft-control-border); border-radius:2rem; font-size:.875rem; cursor:pointer; }
.poll-mode label:has(:checked) { background:var(--ft-pink); color:var(--ft-primary); border-color:var(--ft-primary); }
.poll-mode input { inline-size:1rem; margin:0; }
.poll-create--images .poll-create__rows { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.poll-create--images .poll-create__row { min-inline-size:0; border:1px solid var(--ft-border); border-radius:.9rem; padding:.65rem; }
.poll-create--images .poll-create__row > div { display:block; }
.poll-slot { margin-block-end:.5rem; }
.poll-slot img { display:block; inline-size:100%; block-size:auto; aspect-ratio:1; object-fit:contain; border-radius:.6rem; background:var(--ft-lilac); }
.poll-slot__upload { position:relative; display:flex; flex-direction:column; gap:.4rem; align-items:center; justify-content:center; min-block-size:8rem; padding:.5rem; border:1px dashed var(--ft-control-border); border-radius:.65rem; background:var(--ft-lilac); font-size:.8125rem; cursor:pointer; text-align:center; }
.poll-slot__upload input { position:absolute; inset:0; opacity:0; inline-size:100%; block-size:100%; cursor:pointer; }
.poll-slot__upload:focus-within { outline:2px solid var(--ft-primary); outline-offset:2px; }
.poll-slot__upload .ft-icon { inline-size:1.5rem; block-size:1.5rem; }
.poll-create--images input[type=text] { inline-size:100%; padding:.55rem; font-size:.8125rem; }
.poll-create--images .poll-create__remove, [data-poll-image-remove] { margin-block-start:.4rem; min-block-size:2.75rem; font-size:.75rem; color:var(--ft-primary); background:var(--ft-surface); border:1px solid var(--ft-control-border); border-radius:.5rem; cursor:pointer; }
.poll-slot [hidden], .poll-slot[hidden] { display:none; }
/* Separate preview, selection and confirmation. */
.poll-image-choices { border:0; padding:0; margin:0; min-inline-size:0; }
.poll-image-select { display:flex; align-items:center; gap:.5rem; min-block-size:3.25rem; padding:.65rem; margin:0; cursor:pointer; font-size:.875rem; }
.poll-image-select input { flex-shrink:0; margin:0; }
.poll-image-select > span:not(.poll-selection-check) { flex:1; min-inline-size:0; overflow-wrap:anywhere; }
.poll-image-select strong, .poll-image-select small { display:block; }
.poll-image-select small { margin-block-start:.2rem; font-weight:400; }
.poll-image-option:has(:checked) .poll-image-card { border-color:var(--ft-primary); box-shadow:0 0 0 2px var(--ft-primary); }
.poll-image-option:has(:checked) .poll-image-select { background:var(--ft-pink); }
.poll-image-select:has(:focus-visible), .poll-choices label:has(:focus-visible) { outline:2px solid var(--ft-primary); outline-offset:2px; }
.poll-selection-check { display:none; color:var(--ft-primary); }
label:has(:checked) > .poll-selection-check { display:inline-flex; }
.poll-selection-check .ft-icon { inline-size:1.1rem; block-size:1.1rem; }
.poll-image-photo { text-decoration:none; color:inherit; cursor:zoom-in; }
.poll-confirm { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-block-start:1rem; }
.poll-confirm p { margin:0; color:var(--ft-primary); font-size:.8125rem; overflow-wrap:anywhere; }
.poll-confirm button { flex-shrink:0; min-inline-size:8rem; }
.poll-confirm button:disabled { opacity:.55; cursor:not-allowed; }
.poll-confirm-fallback { position:relative; z-index:2; margin-block-start:.5rem; }
.poll-preview-open { overflow:hidden; }
.poll-lightbox { box-sizing:border-box; inline-size:min(56rem,calc(100vw - 1.5rem)); max-inline-size:none; max-block-size:calc(100dvh - 1.5rem); padding:1rem; border:1px solid var(--ft-border); border-radius:1rem; color:var(--ft-text); background:var(--ft-surface); overflow:auto; }
.poll-lightbox::backdrop { background:rgb(30 20 40 / .8); }
.poll-lightbox header, .poll-lightbox nav { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.poll-lightbox h2 { margin:0; font-size:1.1rem; }
.poll-lightbox button { display:grid; place-items:center; min-inline-size:2.75rem; min-block-size:2.75rem; border:1px solid var(--ft-control-border); border-radius:50%; background:var(--ft-surface); color:var(--ft-primary); font-size:1.5rem; cursor:pointer; }
.poll-lightbox-image { display:block; inline-size:100%; block-size:auto; max-block-size:calc(100dvh - 14rem); object-fit:contain; margin-block:.6rem; touch-action:pan-y pinch-zoom; }
.poll-lightbox-caption { margin:.5rem 0; overflow-wrap:anywhere; font-size:.875rem; }
.poll-lightbox nav { margin-block-start:.5rem; }
.poll-lightbox nav span { color:var(--ft-muted); font-size:.875rem; }