/* predict-pulse/public/css/predict-pulse.css */
/* ── Reset & Host ─────────────────────────────────────────────────────────── */
.pp-poll *,
.pp-poll *::before,
.pp-poll *::after { box-sizing: border-box; }

/* ── Design tokens ────────────────────────────────────────────────────────── */
.pp-poll {
    --pp-radius:       10px;
    --pp-gap:          .9rem;
    --pp-font:         inherit;

    --pp-bg:           #ffffff;
    --pp-border:       #e2e8f0;
    --pp-text:         #1e293b;
    --pp-muted:        #64748b;
    --pp-accent:       #6366f1;
    --pp-accent-light: #eef2ff;
    --pp-success:      #22c55e;
    --pp-warn:         #f59e0b;
    --pp-closed-bg:    #f8fafc;

    /* badge */
    --pp-badge-open-bg:    #dcfce7;
    --pp-badge-open-fg:    #166534;
    --pp-badge-closed-bg:  #fee2e2;
    --pp-badge-closed-fg:  #991b1b;
}

/* Dark-mode support */
@media (prefers-color-scheme: dark) {
    .pp-poll {
        --pp-bg:           #1e293b;
        --pp-border:       #334155;
        --pp-text:         #f1f5f9;
        --pp-muted:        #94a3b8;
        --pp-accent-light: #312e81;
        --pp-closed-bg:    #0f172a;
    }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.pp-poll {
    font-family:   var(--pp-font);
    background:    var(--pp-bg);
    border:        1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    padding:       1.5rem;
    margin:        0;
    max-width:     600px;
    color:         var(--pp-text);
    box-shadow:    0 1px 4px rgb(0 0 0 / .06);
    transition:    box-shadow .2s;
}
.pp-poll:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / .1);
}
.pp-poll--closed {
    background: var(--pp-closed-bg);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.pp-poll__header {
    margin-bottom: var(--pp-gap);
}
.pp-poll__title {
    font-size:   1.1rem;
    font-weight: 700;
    margin:      .4rem 0 .25rem;
    line-height: 1.3;
}
.pp-poll__question {
    font-size:   1rem;
    margin:      0 0 .35rem;
    color:       var(--pp-text);
}
.pp-closes {
    font-size:  .8rem;
    color:      var(--pp-muted);
    margin:     .2rem 0 0;
}

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.pp-badge {
    display:       inline-block;
    padding:       .15rem .6rem;
    border-radius: 999px;
    font-size:     .72rem;
    font-weight:   600;
    letter-spacing:.03em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.pp-badge--open   { background: var(--pp-badge-open-bg);   color: var(--pp-badge-open-fg);   }
.pp-badge--closed { background: var(--pp-badge-closed-bg); color: var(--pp-badge-closed-fg); }
.pp-badge--scheduled { background: #fef9c3; color: #854d0e; }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.pp-form {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
}

/* ── Option radio buttons ─────────────────────────────────────────────────── */
.pp-option {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    padding:       .75rem 1rem;
    border:        1.5px solid var(--pp-border);
    border-radius: var(--pp-radius);
    cursor:        pointer;
    transition:    border-color .15s, background .15s;
    user-select:   none;
}
.pp-option:hover {
    border-color: var(--pp-accent);
    background:   var(--pp-accent-light);
}
.pp-option input[type="radio"] {
    accent-color: var(--pp-accent);
    width:  1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.pp-option__label {
    font-size: .95rem;
}

/* ── Submit button ─────────────────────────────────────────────────────────── */
.pp-btn--vote {
    margin-top:    .5rem;
    align-self:    flex-start;
    padding:       .6rem 1.4rem;
    background:    var(--pp-accent);
    color:         #fff;
    border:        none;
    border-radius: var(--pp-radius);
    font-size:     .9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    opacity .15s, transform .1s;
}
.pp-btn--vote:hover  { opacity: .88; }
.pp-btn--vote:active { transform: scale(.97); }
.pp-btn--vote:disabled { opacity: .5; cursor: not-allowed; }

/* ── Inline message ─────────────────────────────────────────────────────────── */
.pp-message {
    font-size:  .85rem;
    margin:     .4rem 0 0;
    min-height: 1.2em;
}
.pp-message--error  { color: #dc2626; }
.pp-message--success{ color: var(--pp-success); }
.pp-message--info   { color: var(--pp-muted); }

/* ── Results bars ─────────────────────────────────────────────────────────── */
.pp-results {
    display:        flex;
    flex-direction: column;
    gap:            .65rem;
}
.pp-total {
    font-size:  .8rem;
    color:      var(--pp-muted);
    margin:     0 0 .25rem;
    text-align: right;
}

.pp-bar {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
}
.pp-bar__label {
    display:         flex;
    justify-content: space-between;
    font-size:       .9rem;
}
.pp-bar__pct {
    font-weight: 700;
    color:       var(--pp-accent);
}
.pp-bar--chosen .pp-bar__pct {
    color: var(--pp-success);
}
.pp-bar__track {
    height:        8px;
    background:    var(--pp-border);
    border-radius: 999px;
    overflow:      hidden;
}
.pp-bar__fill {
    height:           100%;
    background:       var(--pp-accent);
    border-radius:    999px;
    transition:       width .6s cubic-bezier(.4,0,.2,1);
    width:            0; /* animated via JS */
}
.pp-bar--chosen .pp-bar__fill {
    background: var(--pp-success);
}
.pp-bar__count {
    font-size: .75rem;
    color:     var(--pp-muted);
}

/* ── Notice (error placeholder) ─────────────────────────────────────────────── */
.pp-notice {
    color: var(--pp-muted);
    font-size: .9rem;
    font-style: italic;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */
.pp-option:focus-within {
    outline: 2px solid var(--pp-accent);
    outline-offset: 2px;
}
.pp-btn--vote:focus-visible {
    outline: 2px solid var(--pp-accent);
    outline-offset: 3px;
}


/* ── Dropdown (select) — 4+ options ─────────────────────────────────────────── */
.pp-select-wrap {
    position:  relative;
    margin-bottom: .25rem;
}
.pp-select-wrap::after {
    content:   '▾';
    position:  absolute;
    right:     .9rem;
    top:       50%;
    transform: translateY(-50%);
    pointer-events: none;
    color:     var(--pp-muted);
    font-size: .9rem;
}
.pp-select {
    appearance: none;
    -webkit-appearance: none;
    width:         100%;
    padding:       .7rem 2.5rem .7rem 1rem;
    border:        1.5px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background:    var(--pp-bg);
    color:         var(--pp-text);
    font-size:     .95rem;
    cursor:        pointer;
    transition:    border-color .15s;
}
.pp-select:hover,
.pp-select:focus {
    border-color: var(--pp-accent);
    outline:      none;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */

/* ── "More results" button & tooltip ────────────────────────────────────────── */
.pp-more-wrap {
    position:   relative;
    margin-top: .35rem;
    display:    inline-block;
}

.pp-more-btn {
    background:  none;
    border:      none;
    padding:     .1rem 0;
    font-size:   .75rem;
    color:       var(--pp-muted);
    cursor:      pointer;
    transition:  color .15s;
    display:     inline-flex;
    align-items: center;
    gap:         .2rem;
}
.pp-more-btn:hover,
.pp-more-btn:focus-visible,
.pp-more-btn.pp-more-btn--open {
    color:       var(--pp-muted); /* keep same colour — no change on hover */
    font-weight: 700;
    outline:     none;
}
.pp-more-icon {
    display:    inline-block;
    transition: transform .2s;
    font-size:  .7rem;
}
.pp-more-btn--open .pp-more-icon {
    transform: rotate(180deg);
}

/* Tooltip panel */
.pp-tooltip {
    position:      absolute;
    left:          0;
    z-index:       9999;
    background:    var(--pp-bg);
    border:        1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    box-shadow:    0 4px 20px rgb(0 0 0 / .14);
    padding:       .5rem .65rem;
    min-width:     220px;
    max-width:     320px;
    max-height:    260px;
    overflow-y:    auto;
    white-space:   nowrap;
}

/* ── Position: above button (default) ── */
.pp-tooltip--above {
    bottom: calc(100% + 6px);
    top:    auto;
}
/* ── Position: below button (flipped when not enough space above) ── */
.pp-tooltip--below {
    top:    calc(100% + 6px);
    bottom: auto;
}

/* Arrow — above: points down toward button */
.pp-tooltip--above::after {
    content:          '';
    position:         absolute;
    top:              100%;
    left:             1.2rem;
    border:           6px solid transparent;
    border-top-color: var(--pp-border);
}
.pp-tooltip--above::before {
    content:          '';
    position:         absolute;
    top:              calc(100% - 1px);
    left:             1.2rem;
    border:           6px solid transparent;
    border-top-color: var(--pp-bg);
    z-index:          1;
}
/* Arrow — below: points up toward button */
.pp-tooltip--below::after {
    content:             '';
    position:            absolute;
    bottom:              100%;
    left:                1.2rem;
    border:              6px solid transparent;
    border-bottom-color: var(--pp-border);
}
.pp-tooltip--below::before {
    content:             '';
    position:            absolute;
    bottom:              calc(100% - 1px);
    left:                1.2rem;
    border:              6px solid transparent;
    border-bottom-color: var(--pp-bg);
    z-index:             1;
}

/* Right-edge correction — applied by JS when tooltip would overflow right */
.pp-tooltip--right {
    left:  auto;
    right: 0;
}
.pp-tooltip--right::after,
.pp-tooltip--right::before {
    left:  auto;
    right: 1.2rem;
}

.pp-tooltip[hidden] { display: none; }

@media (max-width: 480px) {
    .pp-tooltip {
        max-width:   calc(100vw - 2rem);
        white-space: normal;
    }
}

.pp-tooltip__row {
    display:        flex;
    align-items:    baseline;
    gap:            .5rem;
    padding:        .25rem 0;
    font-size:      .82rem;
    border-bottom:  1px solid var(--pp-border);
}
.pp-tooltip__row:last-child { border-bottom: none; }
.pp-tooltip__row--chosen .pp-tooltip__label {
    color:       var(--pp-success);
    font-weight: 600;
}

.pp-tooltip__label {
    flex:        1;
    min-width:   0;
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color:       var(--pp-text);
}
.pp-tooltip__pct {
    font-weight: 700;
    color:       var(--pp-accent);
    flex-shrink: 0;
}
.pp-tooltip__count {
    font-size:   .75rem;
    color:       var(--pp-muted);
    flex-shrink: 0;
}

/* ── Poll grid (used by [predict_polls]) ─────────────────────────────────────── */
.pp-grid {
    display:               grid;
    grid-template-columns: repeat( 3, 1fr );
    gap:                   1.25rem;
    align-items:           start; /* cards don't stretch to each other's height */
}

/* Cards inside the grid fill their column — remove the standalone max-width */
.pp-grid .pp-poll {
    max-width: none;
    margin:    0;
}

/* Tablet: 2 columns */
@media ( max-width: 900px ) {
    .pp-grid {
        grid-template-columns: repeat( 2, 1fr );
    }
}

/* Mobile: 1 column */
@media ( max-width: 560px ) {
    .pp-grid {
        grid-template-columns: 1fr;
    }
}