/* ==========================================================================
   Public pages: light theme, inner-page header, contestant profile, vote dialog
   (loaded after landing.css)
   ========================================================================== */

/* ---------- Light theme (Custom UI -> theme: light) ---------- */
[data-theme="light"] {
    --bg: #f6f6f9; --bg-2: #ececf2; --card: #ffffff; --card-2: #f1f1f6;
    --line: rgba(15, 15, 30, .1); --text: #14141c; --muted: #5d5d70;
    --tint: rgba(15, 15, 30, .05);
    --nav-bg: rgba(246, 246, 249, .7); --nav-bg-solid: rgba(246, 246, 249, .94);
    --chip-bg: rgba(255, 255, 255, .85);
    --shadow: 0 20px 50px -24px rgba(20, 20, 40, .35);
}
[data-theme="light"] .hero::before { opacity: .6; }
[data-theme="light"] .cand-photo::after { background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
[data-theme="light"] .hero-visual img { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .25)); }
body { font-family: var(--font); }

/* ---------- Hero voting countdown extras ---------- */
.cd-caption { margin: .9rem 0 0; font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.cd-ended { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--text); background: var(--tint); border: 1px solid var(--line); }
.cd-ended i { color: var(--accent); }
.cd-ended span { color: var(--muted); font-weight: 600; }
[data-theme="emerald"] .cd-ended { border: 2px dashed var(--line); }

/* ---------- Contestant section: filters scroll with the page; real images hide initials ---------- */
.search { position: sticky; top: calc(var(--nav-h, 72px) + 12px); z-index: 25; margin-top: 1rem; }
.search input { box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .75); }
[data-theme="light"] .search input { box-shadow: 0 12px 30px -14px rgba(20, 20, 40, .4); }
.filters { margin-top: .9rem; }

/* Initials are only a placeholder: as soon as a real image is in place they disappear
   (and come back automatically if the image fails to load and is removed). */
.cand-photo:has(img) .initials, .lr-av:has(img) b, .rimg:has(img) b { display: none; }
/* A flyer shown as the photo: full strength, no dark gradient over it */
.cand-photo.flyer-photo::after { display: none; }
.cand-photo.flyer-photo img { object-position: 50% 0; }

/* ---------- Contestant cards: ONE size for every card, in both styles ----------
   Same grid as the classic cards (4 across on desktop, 2 on phones) so 70+ contestants stay scannable.
   A flyer sits whole inside a fixed 4:5 slot over a blurred copy of itself; tap it to read it large. */
.cand-flyer { padding: 0; }
.cand-flyer .flyer-img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; overflow: hidden; cursor: zoom-in; background: #000; }
.flyer-img .flyer-bg { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(18px) brightness(.55); }
.flyer-img img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.cand-flyer:hover .flyer-img img { transform: scale(1.03); }
.flyer-img .rank { top: .7rem; left: .7rem; z-index: 2; }
.flyer-zoom { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; background: var(--chip-bg); color: var(--text); border: 1px solid var(--line); }
.flyer-foot { display: flex; flex-direction: column; gap: .55rem; padding: .85rem 1rem 1rem; }
.flyer-name { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.flyer-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.flyer-row .btn { flex: 0 1 auto; white-space: nowrap; }
.flyer-votes { color: var(--muted); font-size: .8rem; font-weight: 600; }
.flyer-votes b { color: var(--text); font-size: 1.1rem; margin-right: .15rem; font-variant-numeric: tabular-nums; }

/* A flyer used as the classic card's photo: same slot as every other photo (so cards stay equal), tap to view it whole */
button.cand-photo { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; text-align: inherit; font: inherit; color: inherit; }
.cand-photo.flyer-photo img { object-position: 50% 0; }

/* Long categories: first 8 cards, then "Show all" */
.contestants-grid.collapsed .cand:nth-child(n+9) { display: none; }
.more-wrap { display: flex; justify-content: center; margin-top: 1.1rem; }
.more-wrap[hidden] { display: none; }

@media (max-width: 640px) {
    .cand-actions { flex-direction: row; gap: .4rem; }                       /* Vote | Profile side by side */
    .cand-actions .btn { padding: .55rem .5rem; font-size: .8rem; }
    .flyer-foot { padding: .7rem .75rem .8rem; }
    .flyer-name { font-size: .92rem; }
    .flyer-row { flex-direction: column; align-items: stretch; gap: .45rem; }
    .flyer-row .btn { justify-content: center; }
    .flyer-votes { text-align: center; }
}

/* ---------- Flyer lightbox ---------- */
dialog.flyerbox { width: min(560px, 94vw); max-height: 94vh; padding: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--card); color: var(--text); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .8); }
dialog.flyerbox[open] { display: flex; flex-direction: column; }
dialog.flyerbox::backdrop { background: rgba(0, 0, 0, .75); backdrop-filter: blur(4px); }
.flyerbox .fb-img { flex: 1 1 auto; min-height: 0; background: #000; display: grid; place-items: center; overflow: auto; }
.flyerbox .fb-img img { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; }
.flyerbox .fb-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding: .9rem 1.1rem; }
.flyerbox .fb-name { font-weight: 800; }
.flyerbox .fb-votes { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.flyerbox .fb-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.flyerbox .fb-x { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.profile-photo.is-flyer { aspect-ratio: auto; padding: 0; background: var(--card-2); }
.profile-photo.is-flyer img { display: block; width: 100%; height: auto; }

/* ---------- Partners & sponsors bar ---------- */
.sponsors { margin-top: 90px; }
.sponsors-bar { display: flex; align-items: center; gap: 1.6rem; padding: 1.1rem 1.6rem; border-radius: 22px; background: #fff; color: #14141c; box-shadow: var(--shadow); }
.sponsors-label { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; padding-right: 1.6rem; border-right: 2px solid #e4e4ea; }
.sponsors-list { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: .9rem 2rem; }
.sponsors-list img { height: 34px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s; }
.sponsors-list a:hover img, .sponsors-list img:hover { filter: none; opacity: 1; }
.sponsors + footer { margin-top: 40px; }
@media (max-width: 720px) {
    .sponsors-bar { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; }
    .sponsors-label { border-right: 0; border-bottom: 2px solid #e4e4ea; padding: 0 0 .8rem; }
    .sponsors-list { justify-content: center; }
}

/* ---------- Inner page header ---------- */
.page-hero { padding: 130px 0 40px; text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(800px 320px at 50% 0, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), var(--bg); }
.page-hero .title { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: .6rem 0; }
.page-hero .sub { margin-inline: auto; }
.crumbs { display: inline-flex; gap: .5rem; align-items: center; color: var(--muted); font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.crumbs a:hover { color: var(--accent); }

/* ---------- Contestant profile ---------- */
.profile { padding: 110px 0 0; background: radial-gradient(900px 420px at 80% 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg); }
.profile-grid { display: grid; grid-template-columns: 420px 1fr; gap: 3rem; align-items: start; margin-top: 1.4rem; }
.profile-photo { position: sticky; top: 96px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
.profile-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.profile-photo .initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; font-weight: 800; color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
.profile h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; margin: .9rem 0 .4rem; font-weight: 800; }
.profile .slogan { color: var(--muted); font-size: 1.1rem; font-style: italic; margin: 0 0 1.6rem; }
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; font-size: .82rem; }
.scorecard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1.4rem 0; }
.scorecard.scorecard-single { grid-template-columns: minmax(0, 1fr); max-width: 14rem; }
.scorecard div { background: var(--card); padding: 1.2rem 1.4rem; }
.scorecard b { display: block; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scorecard span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.lead-gap { margin: 1rem 0 1.8rem; }
.lead-gap .votes { margin-bottom: .5rem; }
.lead-gap .bar { height: 10px; }
.profile-actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.05rem; }
.notice { padding: 1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-weight: 600; }
.panel { margin-top: 2.2rem; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); overflow: hidden; }
.panel h2 { margin: 0; padding: 1.1rem 1.4rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.voter { display: flex; align-items: center; gap: .9rem; padding: .85rem 1.4rem; border-bottom: 1px solid var(--line); }
.voter:last-child { border-bottom: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); flex: none; }
.voter .who { flex: 1; font-weight: 600; }
.voter small { display: block; color: var(--muted); font-weight: 500; }
.voter .n { font-weight: 800; font-variant-numeric: tabular-nums; }
.related { margin-top: 3.4rem; }

/* ---------- Vote dialog ---------- */
dialog.vote { border: 1px solid var(--line); border-radius: 24px; padding: 0; width: min(520px, 100% - 28px); max-height: 92vh; overflow-y: auto; background: var(--card); color: var(--text); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .7); }
dialog.vote::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(4px); }
.vote form { padding: 1.6rem; display: grid; gap: 1.1rem; position: relative; }
.vote h3 { margin: 0; font-size: 1.3rem; }
.vote .who-for { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; }
.vote .x { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.field label { display: block; font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: .35rem; }
.field input, .field select { width: 100%; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field select { min-height: 48px; cursor: pointer; }
.bundle-select-wrap { position: relative; }
.bundle-select-wrap::after { content: ''; position: absolute; right: 1rem; top: 50%; width: .5rem; height: .5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.bundle-select-wrap select { appearance: none; padding-right: 2.8rem; font-weight: 700; }
.field small { display: block; margin-top: .4rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.total { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding-top: .3rem; }
.total b { font-size: 1.4rem; color: var(--accent); }
.form-errors { padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); font-size: .88rem; font-weight: 600; }
.flash { position: fixed; z-index: 80; top: 84px; left: 50%; transform: translateX(-50%); width: min(520px, 100% - 28px); padding: .9rem 1.2rem; border-radius: 14px; font-weight: 700; box-shadow: var(--shadow); background: var(--card); border: 1px solid var(--line); }
.flash.ok { border-color: var(--ok); color: var(--ok); }
.flash.bad { border-color: var(--bad); color: var(--bad); }
.toast { position: fixed; z-index: 90; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; padding: .7rem 1.2rem; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 700; font-size: .88rem; transition: .3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
    .profile-grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .profile-photo { position: relative; top: 0; max-width: 360px; margin-inline: auto; aspect-ratio: 1; }
    .profile-text { text-align: center; }
    .profile-actions { justify-content: center; }
}
@media (max-width: 640px) { .scorecard b { font-size: 1.4rem; } .scorecard div { padding: 1rem .8rem; } }
@media (max-width: 640px) {
    dialog.vote { max-height: 90dvh; }
    .vote form { padding: 1.2rem; gap: .8rem; }
    .vote .field input, .vote .field select { padding: .75rem .85rem; }
    .vote .field small { font-size: .72rem; }
    .vote .total { padding-top: 0; }
}

/* Portrait pictures (and flyers used as profile photos): crop toward the top, where faces usually are */
.cand-photo img, .lr-av img, .rimg img, .profile-photo img { object-position: 50% 22%; }
.profile-photo.is-flyer img { object-position: initial; }

/* ---------- Awards on phones: compact rows (icon + title), tap to jump to the contestants ---------- */
.award-cat-row { scroll-margin-top: 150px; }          /* land below the sticky search box when jumping to a category */
@media (max-width: 640px) {
    .awards-grid { grid-template-columns: 1fr; gap: .6rem; }
    .award { flex-direction: row; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: 16px; }
    .award:hover { transform: none; }
    .award p, .award .meta { display: none; }
    .award::after { display: none; }
    .award h3 { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.25; }
    .award-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
    .award::before { content: "\f054"; order: 3; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .8rem; color: var(--accent); }
    #award .head { margin-bottom: 1.4rem; }
}

/* ---------- Category chips: on small screens two rows that scroll sideways (swipe or drag) ---------- */
@media (max-width: 860px) {
    .filters {
        display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content;
        justify-content: start; align-content: start; gap: .5rem;
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
        padding: .15rem 1.4rem .5rem;
        /* soft fade on the right edge hints that there is more to scroll to */
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.8rem), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.8rem), transparent 100%);
    }
    .filters::-webkit-scrollbar { display: none; }
    .filters.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }
    .filter { scroll-snap-align: start; white-space: nowrap; }
}
@media (max-width: 860px) {
    .filters { padding-left: .2rem; }
    .status:empty { min-height: 0; margin: 0; }
    .cat { margin-top: 1.8rem; }
}

/* ---------- Contestant cards: everything centred, school under the name ---------- */
.cand { display: flex; flex-direction: column; }
.cand:hover { transform: none; }
.cand-body { align-items: center; text-align: center; gap: .35rem; padding: 1rem 1rem 1.15rem; }
.cand-body h4 { font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }   /* long names simply wrap onto a second line */
.cand-school { margin: 0; font-size: .8rem; font-weight: 600; color: var(--accent); line-height: 1.3; }
.cand-body > div:not(.cand-actions) { width: 100%; margin-top: auto; padding-top: .45rem; }
.cand .votes { flex-direction: column; align-items: center; gap: .05rem; margin-bottom: .45rem; }
.cand .votes span { order: 2; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.cand .votes b { order: 1; font-size: 1.3rem; }
.cand-actions { width: 100%; justify-content: center; margin-top: 0; padding-top: .5rem; }
.cand-actions .btn { text-align: center; justify-content: center; }
.profile-school { margin: .2rem 0 .6rem; font-weight: 700; color: var(--accent); }
.profile-school i { margin-right: .35rem; }
@media (max-width: 640px) {
    .contestants-grid { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; gap: 1rem; }
    .cand-actions { flex-direction: row; }
}
/* Whole card is clickable */
.cand { cursor: pointer; }
.cand-photo, button.cand-photo, .flyer-img { cursor: pointer; }
#liveVotes.bump { animation: vbump 1s ease; }
@keyframes vbump { 30% { transform: scale(1.25); color: var(--accent); } }

/* Vote count box on the contestant page: centred */
.scorecard div { text-align: center; }
.scorecard.scorecard-single { margin-inline: auto; }
@media (min-width: 961px) { .scorecard.scorecard-single { margin-inline: 0; } }

/* Voting not open yet: the "Opens …" notice sits on its own line above a full-width View button */
.cand-actions:has(.is-disabled), .flyer-row:has(.is-disabled) { flex-direction: column; align-items: stretch; gap: .45rem; }
.cand .is-disabled { white-space: nowrap; font-size: .76rem; padding: .45rem .6rem; text-align: center; justify-content: center; }

/* Category header: "3 contestants" stays on one line */
.cat-head small { white-space: nowrap; flex: none; }
.cat-head h3 { min-width: 0; }