/*
 * HFR Genre Poll
 *
 * Built to the Bonus Genre Vote comp: a two column board on desktop (a fixed
 * left rail carrying the brand, headline and pitch box, with the ranked genres
 * beside it) collapsing to a single centred column on narrow screens.
 *
 * Type is Oswald for headings and buttons, Barlow for body copy, JetBrains Mono
 * for the small tracked labels.
 *
 * Colours are set here rather than read from Elementor's globals. The comp is an
 * explicit spec, and inheriting globals is what previously let the board drift
 * out of sync with the design it was drawn against.
 */

.hfr-poll {
    --hfr-bg: #0d0d0f;
    --hfr-bg-deep: #08080a;
    --hfr-rail: #101012;
    --hfr-card: #121214;
    --hfr-lead: #151113;
    --hfr-accent: #c0332a;
    --hfr-accent-hi: #d94a3d;
    --hfr-text: #f2efe9;
    --hfr-muted: #6f6a66;
    --hfr-line: rgba(255, 255, 255, 0.08);
    --hfr-line-hi: rgba(255, 255, 255, 0.16);

    --hfr-font-head: "Oswald", "Arial Narrow", sans-serif;
    --hfr-font-body: "Barlow", system-ui, sans-serif;
    --hfr-font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;

    background: var(--hfr-bg);
    border: 1px solid var(--hfr-line);
    color: var(--hfr-text);
    font-family: var(--hfr-font-body);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    /* Scrolling stays vertical; pinch and double-tap zoom gestures that start on
       the board are swallowed instead of shifting the page around. */
    touch-action: pan-y;
    /* Declares the UI already dark so Chrome's auto-dark repainter leaves it
       alone. That repainter is what shifts the reds toward pink. */
    color-scheme: dark;
}

.hfr-poll *,
.hfr-poll *::before,
.hfr-poll *::after {
    box-sizing: inherit;
}

.hfr-poll__grid {
    display: grid;
    grid-template-columns: 420px 1fr;
}

/* ------------------------------------------------------------------ rail */

.hfr-rail {
    padding: 56px 40px;
    border-right: 1px solid var(--hfr-line);
    background: linear-gradient(180deg, var(--hfr-rail) 0%, var(--hfr-bg) 100%);
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.hfr-rail__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hfr-rail__logo {
    width: 64px;
    height: auto;
    object-fit: contain;
    display: block;
    flex: none;
}

.hfr-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--hfr-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.35;
}

.hfr-meta__hot {
    color: var(--hfr-accent-hi);
}

.hfr-poll__title {
    margin: 0;
    font-family: var(--hfr-font-head);
    font-weight: 700;
    font-size: 68px;
    line-height: 0.92;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.hfr-poll__intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    max-width: 34ch;
    text-wrap: pretty;
}

.hfr-rail__rule {
    height: 1px;
    background: var(--hfr-line);
}

/* --------------------------------------------------------------- pitching */

.hfr-pitch {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hfr-pitch__title {
    margin: 0;
    font-family: var(--hfr-font-head);
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hfr-pitch__copy {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.5;
}

.hfr-pitch__field {
    display: flex;
    border: 1px solid var(--hfr-line-hi);
}

.hfr-pitch__input {
    flex: 1;
    min-width: 0;
    background: var(--hfr-bg-deep);
    border: 0;
    outline: none;
    padding: 14px 16px;
    color: var(--hfr-text);
    font-family: var(--hfr-font-body);
    font-size: 15px;
}

.hfr-pitch__input::placeholder {
    color: var(--hfr-muted);
}

.hfr-pitch__input:focus-visible {
    outline: 2px solid #c0332a;
    outline-offset: -2px;
}

/* ----------------------------------------------------------------- board */

.hfr-board {
    padding: 40px 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hfr-board__head {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 6px;
    font-family: var(--hfr-font-mono);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hfr-poll__closed {
    background: var(--hfr-accent);
    color: #fff;
    font-family: var(--hfr-font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    padding: 12px;
    margin: 0;
}

.hfr-poll__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Rows must never shrink to share the capped height; the list scrolls instead.
   Without this, 24 genres in the 560px scroll box flex-shrink into 26 unreadable
   slivers, because overflow:hidden on a row lets flexbox crush it to nothing. */
.hfr-poll__list > * {
    flex: none;
}

/* On desktop the genre list scrolls inside the board so the panel keeps its
   shape no matter how many genres are approved. The padding is what stops the
   leading row's glow being clipped by the scroll container. */
@media (min-width: 901px) {
    .hfr-poll__grid {
        align-items: stretch;
    }

    .hfr-board {
        min-height: 0;
    }

    .hfr-poll__list {
        max-height: 560px;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 14px 6px 6px;
        margin: -6px -6px -6px -6px;
        scrollbar-width: thin;
        scrollbar-color: #c0332a rgba(255, 255, 255, 0.06);
    }

    .hfr-poll__list::-webkit-scrollbar {
        width: 8px;
    }

    .hfr-poll__list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06);
    }

    .hfr-poll__list::-webkit-scrollbar-thumb {
        background: #c0332a;
    }

    .hfr-poll__list::-webkit-scrollbar-thumb:hover {
        background: #a82c24;
    }
}

/* ------------------------------------------------------------------ rows */

.hfr-row {
    position: relative;
    border: 1px solid var(--hfr-line);
    background: var(--hfr-card);
    overflow: hidden;
}

.hfr-row:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* The bar is the share of the leader's count, not of the total. It reads as a
   race between genres, which is what the board is actually showing. */
.hfr-row__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(192, 51, 42, 0.3), rgba(192, 51, 42, 0.08));
    transition: width 420ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.hfr-row__body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
}

.hfr-row__main {
    flex: 1;
    min-width: 0;
}

.hfr-row__title {
    display: block;
    font-family: var(--hfr-font-head);
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    text-transform: uppercase;
    /* A long pitched name wraps instead of pushing the row wider than the phone,
       which is what let the whole page shift sideways. */
    overflow-wrap: anywhere;
}

/* Genres added from the admin have no submitter, so there is nothing to credit
   and the element is left genuinely empty. */
.hfr-row__credit {
    display: block;
    margin-top: 6px;
    font-family: var(--hfr-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hfr-muted);
}

.hfr-row__credit:empty {
    display: none;
}

.hfr-row__stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 150px;
    justify-content: flex-end;
}

.hfr-row__votes {
    font-family: var(--hfr-font-head);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hfr-row__votes-label {
    font-family: var(--hfr-font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ leading row */

.hfr-row--lead {
    border-color: var(--hfr-accent-hi);
    background: var(--hfr-lead);
    margin-bottom: 10px;
    box-shadow:
        0 0 0 1px rgba(217, 74, 61, 0.35),
        0 0 34px rgba(192, 51, 42, 0.45),
        inset 0 0 40px rgba(192, 51, 42, 0.22);
}

.hfr-row--lead .hfr-row__bar {
    background: linear-gradient(90deg, rgba(192, 51, 42, 0.55), rgba(192, 51, 42, 0.16));
}

.hfr-row--lead .hfr-row__body {
    padding: 26px;
    gap: 28px;
    align-items: baseline;
}

.hfr-row--lead .hfr-row__title {
    font-weight: 700;
    font-size: 48px;
}

.hfr-row--lead .hfr-row__votes {
    font-size: 48px;
    color: #fff;
}

.hfr-row--lead .hfr-row__votes-label {
    font-size: 13px;
}

.hfr-row--lead .hfr-btn {
    align-self: center;
    font-size: 16px;
    padding: 16px 40px;
}

/* --------------------------------------------------------------- buttons */

/* Buttons use literal colours only, never the custom properties. The vote dialog
   is appended to <body>, outside .hfr-poll where the variables are defined, so a
   var() here resolves to nothing there and the browser substitutes whatever it
   likes. That is where the pink buttons came from. */
.hfr-btn {
    /* appearance: none strips the browser's own button styling, which otherwise
       reasserts itself the moment a button is disabled, i.e. right after a vote. */
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: #c0332a;
    color: #fff;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 15px 34px;
    cursor: pointer;
    transition: background 160ms, border-color 160ms, color 160ms;
    color-scheme: dark;
}

/* Disabled must restate its colours. Browsers substitute their own disabled
   palette wherever the author has not been explicit, and that substitution is
   the pink. */
.hfr-btn:disabled {
    background: #c0332a;
    color: #ffffff;
}

/* Hover feedback darkens rather than lightens: the comp's lighter #d94a3d reads
   as pink, and after a click the button is still under the cursor, so whatever
   the hover colour is becomes what the button "turns" the moment it is pressed.
   Scoped to hover-capable devices so a phone tap can never leave it stuck on. */
@media (hover: hover) {
    .hfr-btn:hover:not(:disabled) {
        background: #a82c24;
    }
}

.hfr-btn:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

.hfr-btn:disabled {
    cursor: default;
}

.hfr-btn--pitch {
    padding: 0 26px;
    font-size: 14px;
    letter-spacing: 0.12em;
    flex: none;
}

/* Vote buttons are outlined until used, filled once they are your pick. */
.hfr-btn--vote {
    background: transparent;
    border: 1px solid #c0332a;
    color: #f2efe9;
    font-size: 14px;
    padding: 12px 30px;
    min-height: 44px;
    flex: none;
}

@media (hover: hover) {
    .hfr-btn--vote:hover:not(:disabled) {
        background: #c0332a;
        border-color: #c0332a;
        color: #fff;
    }
}

.hfr-btn--vote[data-voted="1"],
.hfr-btn--vote[data-voted="1"]:disabled {
    background: #c0332a;
    border-color: #c0332a;
    color: #ffffff;
}

/* Explicit muted colours rather than opacity: compositing a red outline at 40%
   over varying row backgrounds is exactly the kind of blend that drifts pink. */
.hfr-btn--vote:disabled:not([data-voted="1"]) {
    background: transparent;
    border-color: #59211c;
    color: #6f6a66;
}

.hfr-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

@media (hover: hover) {
    .hfr-btn--ghost:hover:not(:disabled) {
        background: transparent;
        border-color: #ffffff;
    }
}

/* ----------------------------------------------------------- empty board */

.hfr-poll__empty {
    border: 1px solid var(--hfr-line);
    background: var(--hfr-card);
    padding: 44px 26px;
    text-align: center;
}

.hfr-poll__empty-title {
    margin: 0 0 8px;
    font-family: var(--hfr-font-head);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
}

.hfr-poll__empty-body {
    margin: 0 auto;
    max-width: 40ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--hfr-text);
}

/* --------------------------------------------------------------- status */

.hfr-poll__status {
    margin: 0;
    padding: 0 40px 28px;
    min-height: 1.4em;
    font-family: var(--hfr-font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hfr-poll__status:empty {
    display: none;
}

.hfr-poll__status[data-tone="ok"] { color: #6fbf73; }
.hfr-poll__status[data-tone="err"] { color: var(--hfr-accent-hi); }

/* ---------------------------------------------------------------- modal */

.hfr-modal {
    position: fixed;
    inset: 0;
    /* The dialog hangs off <body>, outside .hfr-poll, so it opts out of the
       auto-dark repainter separately. */
    color-scheme: dark;
    background: rgba(6, 6, 8, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9999;
}

.hfr-modal[hidden] { display: none; }

.hfr-modal__panel {
    width: 560px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--hfr-card, #121214);
    border: 1px solid rgba(217, 74, 61, 0.5);
    color: #f2efe9;
    font-family: "Barlow", system-ui, sans-serif;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: hfr-pulse-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes hfr-pulse-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.hfr-modal__logo {
    width: 56px;
    height: auto;
    object-fit: contain;
    display: block;
}

.hfr-modal__title {
    margin: 0;
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 700;
    font-size: 46px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: anywhere;
}

.hfr-modal__lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.hfr-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hfr-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hfr-field label {
    font-family: "JetBrains Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.hfr-field input[type="text"],
.hfr-field input[type="email"] {
    background: #08080a;
    border: 1px solid rgba(255, 255, 255, 0.16);
    outline: none;
    padding: 14px 16px;
    color: #f2efe9;
    font-family: "Barlow", system-ui, sans-serif;
    font-size: 15px;
    min-height: 48px;
}

.hfr-field input:focus-visible {
    outline: 2px solid #c0332a;
    outline-offset: -2px;
}

.hfr-modal__err {
    font-family: "JetBrains Mono", ui-monospace, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #d94a3d;
}

.hfr-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

/* Honeypot. Off-screen rather than display:none, which some bots detect. */
.hfr-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------- narrow view */

@media (max-width: 900px) {
    .hfr-poll__grid {
        grid-template-columns: 1fr;
    }

    .hfr-rail {
        padding: 32px 20px 22px;
        border-right: 0;
        border-bottom: 1px solid var(--hfr-line);
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .hfr-rail__brand {
        flex-direction: column;
        gap: 12px;
    }

    .hfr-rail__logo {
        width: 72px;
    }

    .hfr-meta {
        align-items: center;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .hfr-poll__title {
        font-size: 44px;
    }

    .hfr-poll__intro {
        font-size: 15px;
        max-width: none;
    }

    .hfr-rail__rule {
        display: none;
    }

    .hfr-pitch {
        width: 100%;
        align-items: center;
    }

    .hfr-pitch__field {
        width: 100%;
    }

    .hfr-pitch__input {
        text-align: center;
        padding: 13px 14px;
    }

    .hfr-btn--pitch {
        padding: 0 20px;
        font-size: 13px;
    }

    .hfr-board {
        padding: 16px 20px 40px;
    }

    .hfr-board__head {
        justify-content: space-between;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    /* Stacked so a long genre name is never squeezed against its vote button. */
    .hfr-row__body,
    .hfr-row--lead .hfr-row__body {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px 14px;
        padding: 14px 16px;
    }

    .hfr-row__main {
        grid-column: 1 / -1;
    }

    .hfr-row__title,
    .hfr-row--lead .hfr-row__title {
        font-size: 21px;
    }

    .hfr-row__stat {
        width: auto;
        justify-content: flex-start;
    }

    .hfr-row__votes,
    .hfr-row--lead .hfr-row__votes {
        font-size: 26px;
    }

    .hfr-row--lead .hfr-row__body {
        padding: 18px 16px;
    }

    .hfr-row--lead .hfr-row__title {
        font-size: 34px;
    }

    .hfr-row--lead .hfr-row__votes {
        font-size: 38px;
    }

    .hfr-row--lead .hfr-btn,
    .hfr-btn--vote {
        font-size: 13px;
        padding: 12px 22px;
    }

    .hfr-poll__status {
        padding: 0 20px 24px;
    }

    .hfr-modal__panel {
        padding: 26px 20px 28px;
        align-items: center;
        text-align: center;
        gap: 14px;
    }

    .hfr-modal__title {
        font-size: 32px;
    }

    .hfr-modal__form {
        width: 100%;
    }

    .hfr-field {
        text-align: left;
    }

    .hfr-modal__actions {
        flex-direction: column;
        width: 100%;
    }

    .hfr-modal__actions .hfr-btn {
        width: 100%;
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hfr-row__bar,
    .hfr-btn {
        transition: none;
    }

    .hfr-modal__panel {
        animation: none;
    }
}

/* ------------------------------------------------- unsubscribe confirmation */

/* Shown once, on arrival from the link at the foot of a vote notification. Green
   would be off-key on this board; the accent border carries the "this worked"
   without a second palette. */
.hfr-poll__unsubbed {
    margin: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hfr-accent);
    background: rgba(192, 51, 42, 0.12);
    color: var(--hfr-text);
    font-family: var(--hfr-font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-align: center;
}