@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    --ial-ink: #000000;
    --ial-ink-soft: #3a3a3a;
    --ial-muted: #6b6f76;
    --ial-muted-rgb: 107, 111, 118;
    --ial-teal: #65e8dd;
    --ial-teal-rgb: 101, 232, 221;
    --ial-teal-hover: #000000;
    --ial-teal-light: #65e8dd;
    --ial-teal-tint: #ebfbf9;
    --ial-teal-line: #a9f1ea;
    --ial-purple: #4b0fe8;
    --ial-purple-rgb: 75, 15, 232;
    --ial-purple-deep: #0d00b2;
    --ial-link: #4b0fe8;
    --ial-link-rgb: 75, 15, 232;
    --ial-yellow: #ffcd00;
    --ial-yellow-text: #7a5c00;
    --ial-yellow-tint: #fff7d6;
    --ial-red: #be1e2d;
    --ial-red-rgb: 190, 30, 45;
    --ial-red-tint: #fbecee;
    --ial-green: #0f8c82;
    --ial-green-rgb: 15, 140, 130;
    --ial-green-tint: #e6f5f3;
    --ial-page: #f5f7fa;
    --ial-surface: #ffffff;
    --ial-surface-alt: #f5f7fa;
    --ial-line: #e4e7ec;
    --ial-line-strong: #c9ced6;
    --ial-outline: #000000;
    --ial-on-teal: #000000;
    --ial-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -18px rgba(0, 0, 0, .18);
    --ial-radius: 5px;
    --ial-stroke: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3e%3cpath d='M2 11 C 14 4, 26 3, 38 6 S 56 12, 62 5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3e%3cpath d='M8 14 C 20 9, 34 8, 46 10' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3e%3c/svg%3e");
    --ial-display: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ial-body: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ial-ease: 220ms ease;
}

:root[data-bs-theme="dark"] {
    --ial-ink: #f4f4f5;
    --ial-ink-soft: #d4d4d8;
    --ial-muted: #a1a1aa;
    --ial-muted-rgb: 161, 161, 170;
    --ial-teal: #65e8dd;
    --ial-teal-rgb: 101, 232, 221;
    --ial-teal-hover: #ffffff;
    --ial-teal-light: #8ff0e8;
    --ial-teal-tint: rgba(101, 232, 221, .12);
    --ial-teal-line: rgba(101, 232, 221, .4);
    --ial-purple: #a48cff;
    --ial-purple-rgb: 164, 140, 255;
    --ial-purple-deep: #c4b5ff;
    --ial-link: #a48cff;
    --ial-link-rgb: 164, 140, 255;
    --ial-yellow-text: #ffd83d;
    --ial-yellow-tint: rgba(255, 205, 0, .14);
    --ial-red: #e5535f;
    --ial-red-rgb: 229, 83, 95;
    --ial-red-tint: rgba(229, 83, 95, .14);
    --ial-green: #4fd1c5;
    --ial-green-rgb: 79, 209, 197;
    --ial-green-tint: rgba(79, 209, 197, .14);
    --ial-page: #0c0c0d;
    --ial-surface: #171718;
    --ial-surface-alt: #1f1f21;
    --ial-line: #2c2c2f;
    --ial-line-strong: #46464b;
    --ial-outline: #f4f4f5;
    --ial-on-teal: #000000;
    --ial-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px -18px rgba(0, 0, 0, .7);
}

/* Re-point Bootstrap at the palette so anything we don't touch directly still follows. */
html[data-bs-theme],
html:not([data-bs-theme]) {
    --bs-primary: var(--ial-teal);
    --bs-primary-rgb: var(--ial-teal-rgb);
    --bs-danger: var(--ial-red);
    --bs-danger-rgb: var(--ial-red-rgb);
    --bs-success: var(--ial-green);
    --bs-success-rgb: var(--ial-green-rgb);
    --bs-warning: var(--ial-yellow);
    --bs-warning-rgb: 255, 205, 0;
    --bs-body-font-family: var(--ial-body);
    --bs-body-bg: var(--ial-surface);
    --bs-body-color: var(--ial-ink);
    --bs-secondary-bg: var(--ial-page);
    --bs-tertiary-bg: var(--ial-surface-alt);
    --bs-secondary-color: var(--ial-muted);
    --bs-secondary-color-rgb: var(--ial-muted-rgb);
    --bs-tertiary-color: var(--ial-line-strong);
    --bs-border-color: var(--ial-line-strong);
    --bs-light-border-subtle: var(--ial-line);
    --bs-border-radius: var(--ial-radius);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-xl: 10px;
    --bs-link-color: var(--ial-link);
    --bs-link-color-rgb: var(--ial-link-rgb);
    --bs-link-hover-color: var(--ial-purple-deep);
    --bs-link-hover-color-rgb: var(--ial-purple-rgb);
    --bs-focus-ring-color: rgba(var(--ial-teal-rgb), .3);
    --bs-box-shadow-sm: var(--ial-shadow);
}

html body {
    background-color: var(--ial-page);
}

#root {
    font-family: var(--ial-body);
    color: var(--ial-ink);
    -webkit-font-smoothing: antialiased;
}

#root ::selection {
    background: rgba(var(--ial-teal-rgb), .3);
}

#root .main-section {
    padding-bottom: 2.5rem;
}

/* ---------- Type ---------- */

#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
.modal .modal-title {
    font-family: var(--ial-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.05;
    color: var(--ial-ink);
}

#root h1 {
    font-weight: 900;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem);
}

#root h2 {
    font-size: 1.25rem;
}

#root h3 { font-size: 1.05rem; }
#root h4 { font-size: .95rem; }
#root h5 { font-size: .88rem; }

#root a {
    color: var(--ial-link) !important;
    text-decoration-color: rgba(var(--ial-link-rgb), .4);
    text-underline-offset: 3px;
}

#root a.btn {
    text-decoration: none;
}

/* ---------- Navbar ---------- */

#root .navbar[data-theme-key="navbar"] {
    background-color: #000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none !important;
    min-height: 64px;
}

#root .navbar > .container,
#root .navbar > .container-fluid {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

#root [data-theme-key="navbar-branding"] .navbar-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 !important;
    padding: .35rem 0;
    font-family: var(--ial-display);
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff !important;
}

#root [data-theme-key="navbar-image"] {
    height: 84px !important;
    width: auto;
    margin: 0;
}

@media (min-width: 1200px) {
    #root [data-theme-key="navbar-image"] {
        height: 112px !important;
    }

    #root .navbar .nav-links-container {
        justify-content: flex-end !important;
    }
}

#root [data-theme-key="navbar-branding"] .navbar-brand > span {
    border-left: 1px solid rgba(255, 255, 255, .28);
    padding-left: .9rem;
    line-height: 1;
}

#root [data-theme-key="navbar-branding"] .navbar-brand > span:has(> p:only-child:empty),
#root [data-theme-key="navbar-branding"] .navbar-brand > span:empty {
    display: none;
}

#root [data-theme-key="navbar-branding"] .navbar-brand > span p {
    margin: 0;
}

#root .navbar .nav-item {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#root .navbar .nav-link {
    position: relative;
    padding: 1.35rem 1.1rem !important;
    font-family: var(--ial-display);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff !important;
    transition: color var(--ial-ease);
}

#root .navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 0;
    height: 3px;
    background: var(--ial-teal);
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: transform var(--ial-ease);
}

#root .navbar .nav-link:hover {
    color: var(--ial-teal) !important;
}

#root .navbar .nav-link:hover::after,
#root .navbar .nav-item.active .nav-link::after {
    transform: scaleX(1);
}

#root .navbar .nav-item.active .nav-link::after {
    background: var(--ial-red);
}

#root .navbar .nav-item.active .nav-link {
    font-weight: 900;
}

#root .navbar .auth-nav {
    color: #000 !important;
    background: var(--ial-teal) !important;
    border: 0 !important;
    padding: .55rem 1.1rem;
    font-size: .72rem;
    font-weight: 900;
    border-radius: var(--ial-radius);
}

#root .navbar .auth-nav:hover {
    background: #fff !important;
    color: #000 !important;
}

#root .navbar .form-check-input {
    background-color: transparent;
    border-color: rgba(255, 255, 255, .55);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

#root .navbar .form-check-input:checked {
    background-color: var(--ial-teal);
    border-color: var(--ial-teal);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
}

#root .navbar .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--ial-teal-rgb), .4);
}

#root .navbar .form-check-label {
    color: #fff;
    margin: 0 !important;
    display: flex;
    align-items: center;
}

#root .navbar .utility-links-container {
    display: flex;
    align-items: center;
    align-self: stretch;
}

#root .navbar .utility-links-container .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 1.1rem;
    margin: 0 !important;
}

#root .navbar .utility-links-container .nav-item {
    display: flex;
    align-items: center;
    margin: 0 !important;
}

#root .navbar .form-check.form-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 0;
    margin: 0;
    padding-left: 0;
}

#root .navbar .form-check.form-switch .form-check-input {
    float: none;
    margin: 0;
}

#root .navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .3);
}

@media (max-width: 1199.98px) {
    #root .navbar .nav-link {
        padding: .7rem .5rem !important;
    }

    #root .navbar .nav-link::after {
        display: none;
    }

    #root .navbar .navbar-collapse {
        padding-bottom: .75rem;
    }
}

/* ---------- Surfaces ---------- */

#root .white-box {
    background-color: var(--ial-surface);
    border: 1px solid var(--ial-line);
    border-radius: var(--ial-radius);
    box-shadow: var(--ial-shadow) !important;
}

#root .alert {
    border-radius: var(--ial-radius);
    border: 1px solid var(--ial-line);
    border-left-width: 4px;
    background-color: var(--ial-surface);
    color: var(--ial-ink);
    font-size: .98rem;
}

#root .alert-success {
    border-left-color: var(--ial-green);
    background-color: var(--ial-green-tint);
}

#root .alert-warning {
    border-left-color: var(--ial-yellow);
    background-color: var(--ial-yellow-tint);
}

#root .alert-danger {
    border-left-color: var(--ial-red);
    background-color: var(--ial-red-tint);
}

#root .alert-secondary,
#root .alert-info {
    border-left-color: var(--ial-teal);
    background-color: var(--ial-teal-tint);
}

/* ---------- Buttons ---------- */

#root .btn,
.modal .btn {
    font-family: var(--ial-display);
    font-weight: 900;
    font-size: .8rem;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .62rem 1.35rem;
    border-width: 2px;
    border-radius: var(--ial-radius) !important;
    transition: background-color var(--ial-ease), border-color var(--ial-ease), color var(--ial-ease), box-shadow var(--ial-ease);
}

#root .btn-sm,
.modal .btn-sm {
    font-size: .7rem;
    letter-spacing: .04em;
    padding: .45rem .95rem;
    border-width: 1px;
}

#root .btn-primary,
.modal .btn-primary {
    --bs-btn-color: var(--ial-on-teal);
    --bs-btn-bg: var(--ial-teal);
    --bs-btn-border-color: var(--ial-teal);
    --bs-btn-hover-color: var(--ial-surface);
    --bs-btn-hover-bg: var(--ial-outline);
    --bs-btn-hover-border-color: var(--ial-outline);
    --bs-btn-active-color: var(--ial-surface);
    --bs-btn-active-bg: var(--ial-outline);
    --bs-btn-active-border-color: var(--ial-outline);
    --bs-btn-disabled-color: var(--ial-on-teal);
    --bs-btn-disabled-bg: var(--ial-teal);
    --bs-btn-disabled-border-color: var(--ial-teal);
    --bs-btn-focus-shadow-rgb: var(--ial-teal-rgb);
}

#root .btn-primary[disabled],
.modal .btn-primary[disabled] {
    color: var(--ial-on-teal) !important;
}

#root .btn-secondary,
.modal .btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--ial-outline) !important;
    color: var(--ial-ink) !important;
}

#root .btn-secondary:hover:not(:disabled),
.modal .btn-secondary:hover:not(:disabled) {
    background-color: var(--ial-outline) !important;
    border-color: var(--ial-outline) !important;
    color: var(--ial-surface) !important;
}

#root .btn-secondary:focus-visible,
.modal .btn-secondary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--ial-teal-rgb), .35) !important;
}

#root .btn-danger,
.modal .btn-danger {
    --bs-btn-color: var(--ial-red);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ial-red);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ial-red);
    --bs-btn-hover-border-color: var(--ial-red);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ial-red);
    --bs-btn-active-border-color: var(--ial-red);
    --bs-btn-disabled-color: var(--ial-red);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ial-red);
    --bs-btn-focus-shadow-rgb: var(--ial-red-rgb);
}

#root .btn-danger[disabled],
.modal .btn-danger[disabled] {
    color: var(--ial-red) !important;
}

#root .btn-outline-primary,
.modal .btn-outline-primary {
    --bs-btn-color: var(--ial-ink);
    --bs-btn-border-color: var(--ial-teal);
    --bs-btn-hover-color: var(--ial-on-teal);
    --bs-btn-hover-bg: var(--ial-teal);
    --bs-btn-hover-border-color: var(--ial-teal);
    --bs-btn-active-color: var(--ial-on-teal);
    --bs-btn-active-bg: var(--ial-teal);
    --bs-btn-active-border-color: var(--ial-teal);
    --bs-btn-focus-shadow-rgb: var(--ial-teal-rgb);
}

#root .btn-link {
    border: 0;
    letter-spacing: .04em;
}

#root .btn-primary.scroll-to-top-btn {
    --bs-btn-bg: var(--ial-outline);
    --bs-btn-border-color: var(--ial-outline);
    --bs-btn-color: var(--ial-surface);
    --bs-btn-hover-bg: var(--ial-teal);
    --bs-btn-hover-border-color: var(--ial-teal);
    --bs-btn-hover-color: var(--ial-on-teal);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

/* ---------- Forms ---------- */

#root .form-control,
.modal .form-control {
    border-radius: var(--ial-radius);
    border: 1px solid var(--ial-line-strong);
    background-color: var(--ial-surface);
    color: var(--ial-ink);
    padding: .65rem .9rem;
    font-size: .95rem;
    box-shadow: none;
    transition: border-color var(--ial-ease), box-shadow var(--ial-ease);
}

#root .form-control:focus,
.modal .form-control:focus {
    border-color: var(--ial-teal);
    box-shadow: 0 0 0 .2rem rgba(var(--ial-teal-rgb), .2);
}

#root .form-control::placeholder,
.modal .form-control::placeholder {
    color: var(--ial-muted);
}

#root .category-entrant-filter,
#root .dashboard-container > .d-flex .form-control {
    padding-left: 2.6rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: .9rem center;
    background-size: 16px 16px;
}

/* ---------- Dropdowns ---------- */

#root .dropdown-menu {
    border-radius: var(--ial-radius);
    border: 1px solid var(--ial-line-strong);
    background-color: var(--ial-surface);
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35);
    padding: .35rem 0;
}

#root .dropdown-header {
    font-family: var(--ial-display);
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ial-purple);
    padding: .65rem 1rem .35rem;
}

#root .dropdown-item {
    padding: .55rem 1rem;
    font-size: .95rem;
    color: var(--ial-ink);
}

#root .dropdown-item:hover,
#root .dropdown-item:focus {
    background-color: var(--ial-teal-tint);
    color: var(--ial-ink);
}

#root .dropdown-item:disabled,
#root .dropdown-item.disabled {
    color: var(--ial-link);
    background-color: var(--ial-teal-tint);
    font-weight: 500;
}

#root .dropdown-item .text-success {
    color: var(--ial-purple) !important;
}

/* ---------- Category page: header ---------- */

#root .entrants-page-container::before {
    content: "Category " attr(data-category-number);
    display: block;
    text-align: center;
    font: 800 .74rem/1 var(--ial-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ial-purple);
    margin-bottom: .75rem;
}

#layout[data-embedded] .entrants-page-container::before {
    display: none;
}

#root .category-info-container {
    padding: 2rem 1.5rem 1.75rem !important;
}

#root .category-info-container h1 {
    margin-bottom: 0;
}

#root .category-info-container h1::before {
    content: "";
    display: block;
    width: 64px;
    height: 16px;
    margin: 0 auto .8rem;
    background: var(--ial-purple);
    -webkit-mask: var(--ial-stroke) center / contain no-repeat;
    mask: var(--ial-stroke) center / contain no-repeat;
}

#root .category-info-container h1::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: var(--ial-teal);
    margin: 1rem auto 0;
}

#root .category-info-container h1 + div:not(:empty) {
    max-width: 62ch;
    margin: 1rem auto 0;
    color: var(--ial-ink-soft);
}

/* ---------- Category page: toolbar ---------- */

#root .cat-nav-top {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ial-line);
}

#root .cat-nav-bottom {
    padding-top: 1.1rem;
    border-top: 1px solid var(--ial-line);
}

#root .cat-nav-position {
    font-family: var(--ial-display);
    font-weight: 700;
    font-size: .7rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ial-muted) !important;
}

#root .cat-nav-pager {
    border: 1px solid var(--ial-outline);
}

#root .cat-nav-pager .btn {
    border: 0 !important;
}

#root .cat-nav-pager-selector {
    border-left: 1px solid var(--ial-outline) !important;
    border-right: 1px solid var(--ial-outline) !important;
}

#root .cat-nav-selector-btn {
    min-width: 170px !important;
}

/* ---------- Entrant list ---------- */

#root .list-view .entrant-card .card {
    background-color: var(--ial-surface);
    border: 0 !important;
    border-bottom: 1px solid var(--ial-line) !important;
    border-left: 3px solid transparent !important;
    border-radius: var(--ial-radius);
    transition: background-color var(--ial-ease), border-color var(--ial-ease);
}

#root .list-view .entrant-card .card:hover {
    background-color: var(--ial-teal-tint);
    border-left-color: var(--ial-teal-light) !important;
}

#root .list-view .entrant-card:has([data-theme-key="vote-button-delete"]) .card {
    background-color: var(--ial-teal-tint);
    border-left-color: var(--ial-teal) !important;
}

#root .entrant-card dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

#root .entrant-card .title-row {
    font-family: var(--ial-body);
    font-weight: 500 !important;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--ial-ink);
    margin-bottom: .4rem;
}

#root .entrant-card .title-row dd,
#root .entrant-card .title-row dt {
    font: inherit;
    margin: 0;
    color: inherit;
}

#root .entrant-card dl > div[data-theme-key*="element=[data-row]"] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5rem;
}

#root .entrant-card dl dt {
    flex: 0 0 auto;
    margin: 0 !important;
    font-family: var(--ial-display);
    font-weight: 600 !important;
    font-size: .7rem;
    line-height: 1.6;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ial-purple);
}

#root .entrant-card dl dd {
    display: inline;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--ial-ink-soft);
}

#root .vote-button {
    min-width: 128px;
    padding: .72rem 1.4rem;
}

#root .tile-container .entrant-card.small-card .card {
    background-color: var(--ial-surface) !important;
    border: 1px solid var(--ial-line) !important;
    border-radius: var(--ial-radius);
    box-shadow: var(--ial-shadow);
}

#root .entrant-card.small-card .title-row {
    font-size: 1.25rem;
}

#root .entrant-card.small-card dl > div[data-theme-key*="element=[data-row]"] {
    justify-content: center;
}

#root .tile-clickable {
    border-radius: var(--ial-radius);
}

#root .tile-clickable:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ial-teal-rgb), .35);
}

#root [data-theme-key="entrant-no-results"] {
    font-family: var(--ial-display);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ial-muted);
}

/* ---------- Vote panel ---------- */

#root [data-theme-key^="voting-panel-category"],
#root [data-theme-key^="ranked-slots-category"] {
    padding: 1.75rem 1.5rem !important;
}

#root [data-theme-key^="voting-panel-category"] h2,
#root [data-theme-key^="ranked-slots-category"] h2 {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .02em;
}

#root [data-theme-key^="voting-panel-category"] h2::after,
#root [data-theme-key^="ranked-slots-category"] h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ial-teal);
    margin: .7rem auto .9rem;
}

#root [data-theme-key^="voting-panel-category"] .text-secondary,
#root [data-theme-key^="ranked-slots-category"] .text-secondary {
    color: var(--ial-muted) !important;
    font-size: .95rem;
}

#root [data-theme-key^="voting-panel-category"] .text-warning,
#root [data-theme-key^="ranked-slots-category"] .text-warning {
    color: var(--ial-yellow-text) !important;
    font-size: .9rem;
}

#root [data-theme-key^="voting-panel-category"] .text-danger,
#root [data-theme-key^="ranked-slots-category"] .text-danger {
    color: var(--ial-red) !important;
    font-size: .9rem;
}

#root .rank-progress {
    display: inline-block;
    margin: .25rem 0 .85rem !important;
    padding: .45rem .95rem;
    font-family: var(--ial-display);
    font-weight: 800 !important;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ial-ink);
    background-color: var(--ial-teal-tint);
    border: 1px solid var(--ial-teal-line);
    border-radius: 100px;
}

#root .list-group.list-group-numbered {
    padding-left: 0;
    margin: .25rem 0 0;
    border-radius: var(--ial-radius);
}

#root .list-group .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ial-ink);
    --bs-table-hover-bg: var(--ial-teal-tint);
    --bs-table-hover-color: var(--ial-ink);
    margin: 0;
    border-color: var(--ial-line);
}

#root .list-group .table td {
    padding: .85rem .4rem;
    border-bottom: 1px solid var(--ial-line);
    vertical-align: middle;
}

#root .list-group .table tr:last-child td {
    border-bottom: 0;
}

#root .list-group .table td > .d-flex.align-items-start > div {
    font-family: var(--ial-display);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ial-purple);
    min-width: 1.5rem;
    text-align: center;
}

#root .list-group .table strong.d-block {
    font-family: var(--ial-display);
    font-weight: 600;
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ial-purple);
    margin-bottom: .15rem;
}

#root [data-theme-key="votes-grid-entrant-name"] {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ial-ink);
}

#root [data-theme-key="votes-grid-entrant-secondary-name"] {
    font-size: .9rem;
    color: var(--ial-muted);
    margin-top: .1rem;
}

#root .list-group .table .btn-sm {
    min-width: 34px;
    padding: .4rem .55rem;
    font-size: .75rem;
}

#root [data-theme-key^="voting-panel-category"] .table td:last-child {
    text-align: right;
    white-space: nowrap;
}

#root [data-theme-key^="voting-panel-category"] .table td .text-end {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-auto-rows: 1fr;
    gap: 3px;
    vertical-align: middle;
}

#root [data-theme-key^="voting-panel-category"] .table td .text-end .btn {
    margin: 0;
}

#root [data-theme-key^="voting-panel-category"] .table td .text-end .btn-secondary:not(.text-danger) {
    grid-column: 1;
    min-width: 30px;
    padding: .2rem .5rem;
    font-size: .65rem;
    line-height: 1;
}

#root [data-theme-key^="voting-panel-category"] .table td .text-end .btn-secondary.text-danger:not(:first-child) {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#root .list-group .table .btn-secondary.text-danger {
    color: var(--ial-red) !important;
    border-color: var(--ial-red) !important;
}

#root .list-group .table .btn-secondary.text-danger:hover:not(:disabled) {
    background-color: var(--ial-red) !important;
    color: #fff !important;
}

#root .btn-primary.submit-votes-btn,
.modal .btn-primary.submit-votes-btn {
    --bs-btn-color: var(--ial-surface);
    --bs-btn-bg: var(--ial-outline);
    --bs-btn-border-color: var(--ial-outline);
    --bs-btn-hover-color: var(--ial-on-teal);
    --bs-btn-hover-bg: var(--ial-teal);
    --bs-btn-hover-border-color: var(--ial-teal);
    --bs-btn-active-color: var(--ial-on-teal);
    --bs-btn-active-bg: var(--ial-teal);
    --bs-btn-active-border-color: var(--ial-teal);
    --bs-btn-disabled-color: var(--ial-surface);
    --bs-btn-disabled-bg: var(--ial-outline);
    --bs-btn-disabled-border-color: var(--ial-outline);
    width: 100%;
    max-width: 380px;
    padding: .95rem 1.5rem;
    font-size: .88rem;
    letter-spacing: .06em;
}

#root .btn-primary.submit-votes-btn[disabled],
.modal .btn-primary.submit-votes-btn[disabled] {
    color: var(--ial-surface) !important;
}

#root .ranked-slot {
    border-radius: var(--ial-radius);
    border-color: var(--ial-line-strong);
}

#root .ranked-slot.filled {
    border-color: var(--ial-teal);
    background-color: var(--ial-teal-tint);
}

#root .ranked-slot-ordinal {
    font-family: var(--ial-display);
    color: var(--ial-purple) !important;
}

#root .ranked-slot-placeholder {
    font-family: var(--ial-display);
    letter-spacing: .06em;
}

#root [data-theme-key="voting-abstention-box"] {
    border-radius: var(--ial-radius) !important;
    border-color: var(--ial-line-strong) !important;
}

/* ---------- Dashboard ---------- */

#root .dashboard-container > .white-box:first-child {
    text-align: center;
    padding: 2rem 1.5rem !important;
}

#root .dashboard-container > .white-box:first-child p {
    font-size: 1.1rem;
    color: var(--ial-ink-soft);
}

#root .dashboard-container > .white-box:first-child p:last-child {
    margin-bottom: 0;
}

#root [data-theme-key="voting-totals"] {
    text-align: left !important;
    background-color: var(--ial-surface);
    border: 1px solid var(--ial-line);
    border-left: 4px solid var(--ial-teal);
    box-shadow: var(--ial-shadow);
    color: var(--ial-ink);
    font-size: 1.05rem;
    padding: 1rem 1.25rem;
}

#root [data-theme-key="voting-totals"]::before {
    content: "Progress";
    display: block;
    font: 800 .68rem/1 var(--ial-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ial-purple);
    margin-bottom: .4rem;
}

#root .white-box > [data-theme-key="dashboard-grid"] {
    margin: -1rem -1.5rem;
}

#root [data-theme-key="dashboard-grid"] {
    min-width: 0 !important;
}

#root [data-theme-key="dashboard-grid"] > .d-none {
    display: none !important;
}

#root [data-theme-key="dashboard-grid"] > .position-relative {
    max-height: none !important;
    overflow: visible !important;
}

#root [data-theme-key="dashboard-grid"] .tr {
    min-width: 0 !important;
    align-items: center;
    margin: 0 !important;
    padding: .4rem 1.25rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ial-line) !important;
    border-radius: var(--ial-radius) !important;
    background-color: transparent;
    transition: background-color var(--ial-ease);
}

#root [data-theme-key="dashboard-grid"] .tr:last-child {
    border-bottom: 0 !important;
}

#root [data-theme-key="dashboard-grid"] .tr:hover {
    background-color: var(--ial-teal-tint);
}

#root [data-theme-key="dashboard-grid"] .td {
    min-width: 0 !important;
    padding: .65rem .5rem !important;
    border: 0 !important;
    align-items: center !important;
}

#root [data-theme-key="dashboard-grid"] .tr > .header {
    display: none !important;
}

#root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[0];"] {
    flex: 0 0 3.25rem !important;
    width: 3.25rem !important;
    font-family: var(--ial-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: var(--ial-purple);
}

#root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[1];"] {
    flex: 1 1 0 !important;
    width: auto !important;
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ial-ink);
}

#root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[2];"] {
    flex: 0 0 8.5rem !important;
    width: 8.5rem !important;
    justify-content: center !important;
}

#root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[3];"] {
    flex: 0 0 7.5rem !important;
    width: 7.5rem !important;
    justify-content: flex-end !important;
}

#root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[3];"] .text-end {
    width: 100%;
}

#root [data-theme-key^="dashboard-grid-vote-counter["] {
    font-family: var(--ial-display);
    font-weight: 800;
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .04em;
    padding: .5em .85em .45em;
    min-width: 3.6rem;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 100px !important;
}

#root [data-theme-key^="dashboard-grid-vote-counter["].bg-danger {
    background-color: transparent !important;
    border-color: var(--ial-line-strong);
    color: var(--ial-muted) !important;
}

#root [data-theme-key^="dashboard-grid-vote-counter["].bg-success {
    background-color: var(--ial-teal) !important;
    border-color: var(--ial-teal);
    color: #000 !important;
}

#root [data-theme-key^="dashboard-grid-vote-counter["].bg-success::before {
    content: "\2713";
    margin-right: .4em;
    font-family: system-ui, sans-serif;
}

#root [data-theme-key^="dashboard-grid-vote-counter["].bg-warning {
    background-color: var(--ial-yellow) !important;
    border-color: var(--ial-yellow);
    color: #000000 !important;
}

#root [data-theme-key="dashboard-grid"] .btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ial-outline);
    --bs-btn-hover-bg: var(--ial-outline);
    --bs-btn-hover-border-color: var(--ial-outline);
    --bs-btn-active-bg: var(--ial-outline);
    --bs-btn-active-border-color: var(--ial-outline);
    color: var(--ial-ink) !important;
    border-width: 1px;
    padding: .45rem 1.05rem;
}

#root [data-theme-key="dashboard-grid"] .btn-primary:hover {
    color: var(--ial-surface) !important;
}

@media (max-width: 767.98px) {
    #root .white-box > [data-theme-key="dashboard-grid"] {
        margin: -1rem -1rem;
    }

    #root [data-theme-key="dashboard-grid"] .tr {
        flex-wrap: wrap;
        padding: .75rem 1rem !important;
    }

    #root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[0];"] {
        flex: 0 0 2.5rem !important;
        width: 2.5rem !important;
    }

    #root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[1];"] {
        font-size: 1rem;
    }

    #root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[2];"] {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    #root [data-theme-key="dashboard-grid"] .td[data-theme-key="grid-column:index=[3];"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        padding-top: 0 !important;
    }

    #root .entrant-card .title-row {
        font-size: 1.3rem;
    }

    #root .category-info-container {
        padding: 1.5rem 1rem 1.25rem !important;
    }
}

/* ---------- Modals ---------- */

.modal .modal-content {
    border: 0;
    border-radius: var(--ial-radius);
    background-color: var(--ial-surface);
    color: var(--ial-ink);
    font-family: var(--ial-body);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.modal .modal-header {
    border-bottom: 1px solid var(--ial-line);
    padding: 1.1rem 1.5rem;
}

.modal .modal-title {
    font-size: 1rem;
    letter-spacing: .06em;
}

.modal .modal-body {
    padding: 1.5rem;
}

.modal .modal-body h2 {
    font-family: var(--ial-body);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: .01em;
    text-transform: none;
}

.modal .modal-footer {
    border-top: 1px solid var(--ial-line);
}

/* ---------- Footer + cookie banner ---------- */

#root .footer {
    background-color: #000 !important;
    border-top: 3px solid var(--ial-teal);
    padding: 1.5rem 1rem !important;
    font-family: var(--ial-display);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a1a1aa;
}

#root .footer .text-secondary,
#root .footer .btn-link {
    color: #a1a1aa !important;
}

#root .footer .small,
#root .footer small,
#root .footer .btn-link {
    font-size: 1em;
}

#root .footer a {
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

#root [data-theme-key="cookie-consent:field=[banner]"] {
    background-color: #000 !important;
    color: #fff;
    border-top: 3px solid var(--ial-teal);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}

#root [data-theme-key="cookie-consent:field=[text]"] {
    color: #fff;
    font-size: .95rem;
}

#root [data-theme-key="cookie-consent:field=[necessary-button]"] {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .6);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

#root [data-theme-key="cookie-consent:field=[all-button]"] {
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    #root *,
    #root *::before,
    #root *::after {
        transition: none !important;
    }
}

/* ---------- Embed: NAACP people cards ---------- */

#layout[data-embedded] {
    --ial-ring-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 577.39 572.28'%3E%3Ccircle cx='262.54' cy='327.28' r='245' fill='%230d00b2'/%3E%3Cpath d='M560.14,187A291.24,291.24,0,0,0,354.84,7.78c-335.3,191.3-103.5,529.7-62.7,545.3,125.4,18.3,249.4-70.9,266.6-134a74.85,74.85,0,0,0-.3-43.2A255.64,255.64,0,0,0,560.14,187Z' fill='%234b0fe8'/%3E%3Cpath d='M308,60.78c12.4-25,27.8-43.9,46.9-53a290.16,290.16,0,0,0-171,11.6c-17.4,6.7-31.2,19.2-41.8,36.1C33.24,119.78-16.66,255,4.94,321.18c2.7,8.3,39.1,64.2,98.1,36.2,1.8-.8-6.9-62.4,15.9-117.3,16.6,128.6,81.7,269.5,170.7,297.6C269.34,497.08,222.44,257.88,308,60.78Z' fill='%2365e8dd'/%3E%3C/svg%3E");
    --ial-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E");
    --ial-scribble: url("data:image/webp;base64,UklGRoQCAABXRUJQVlA4IHgCAADwKwCdASosASwBPm02lkmkIqKhICk4gA2JaW7hbEJqYgMfMAKz9O5wAoCYhf1wiCjUowqjh03IaPZfeeBbBJspNUo2z5bs0k0hDZBY1NqabbPMwxEM8OMLNLF7E/EnnZs9RIOw9AdA6BjTL0xYrXqMuZi7qEjnh03B9qWrfYFYRAuZjWJK/2sxdZo8xQuxwCwDn7b6mneQNGQMaaQycY4KeLNwKl7f3fSBqbS3WqhwonNt0L5y87nxs8R3dGT9Bj8Thi90MNgwmtBAmLam1NfNtUDn58cHAHVIn+Tcm4APLdnk/J75QrjmkARktNzwx2dTBLGptTalrAVcYDrP2mFnllKt2MxRyVHDpuTb+BlbgAj0l45G6UrYdA6B0DoHQH9d8qi8l5/eUTcm5Nybk1gjANHy90ZQOgdAxSmGeZ4Ze6MoHPy7bDTcm5Nybk1REHZKqB0DoHQOgdBcx2Sm5HSbiHswjl35apgA/vozb//sOn+h0/0On29v/5NrjZxsz6qG27yMPFNzC3kwir+qdAb78ussbSraNE/HdVJcznnmXxFbyatHFHOgAnzKtD+u0wQS75MszkayAVAcOeJS5S9buHjA7mHY2PppuicCEEeYR4ykZwA+IXLoO4yAd3RIgvxWBpnqTxw2iZChuGzvvpfUBXarAPOE04NKfYMnq+1M67XE0FfhBXw6i8S9qFcy9h7w8MkAXvim++Oh7e24P42CViEC9BDkR+okYoFwo12OjOeiQB/51yTzcSqiuy7gAEOEnIfUW11iRqB+6gaN/Vue/YG5zN47pBTOuqTBAYrgNO8uwAV9X6RQnUW3G1eVwAC/nV8TAAAAAA==");
    --ial-ring-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252.66 252.01'%3E%3Cpath d='M245.88,162c.8-1.9,1.6-3.9,2.3-5.8C263.4,113.64,237.31,63.6,207.25,34.6,160.25,93.21,84,145.07,41.58,145.07c-9.57,0-23.54-.06-39.67-.65a133.45,133.45,0,0,0,97,106.25c9,2.4,21.3,1.5,35-2.1,54,.8,103.4-33.4,112.7-62a45.26,45.26,0,0,0,.9-25.6C247.28,161.07,246.78,161.37,245.88,162Z' fill='%23f9fa00'/%3E%3Cpath d='M207.25,34.6c-8.25-8-16.79-14.33-24.87-18.53-78.1-40.6-158.7.3-177.8,71.4a132.62,132.62,0,0,0-2.67,57c16.14.58,30.1.64,39.67.64C84,145.07,160.24,93.21,207.25,34.6Z' fill='%23ffcd00'/%3E%3C/svg%3E");
}

body:has(#layout[data-embedded]) {
    background-color: transparent;
}

#layout[data-embedded] .virtual-container {
    --vertical-gap: 40px;
}

#layout[data-embedded] .category-info-container,
#layout[data-embedded] .cat-nav,
#layout[data-embedded] .entrant-toolbar {
    display: none !important;
}

/* position:fixed inside a content-sized iframe spans the whole document, so Bootstrap's modal lands
   at the top of the embed regardless of where the visitor has scrolled. EmbedScrollToTopButton is
   the one box in the iframe that tracks the visitor's screen: it sets its own top from the bridged
   host viewport on every host scroll. It stays in layout, invisible, as the anchor the dialog is
   pinned to. opacity, not visibility: Chromium does not paint an element anchored to a
   visibility:hidden anchor. Everything sits under @supports so browsers without anchor positioning
   keep Bootstrap's own layout untouched. */
@supports (top: anchor(bottom)) {
    #layout[data-embedded] .embed-scroll-to-top,
    #layout[data-embedded] .embed-scroll-to-top.embed-scroll-to-top-hidden {
        display: flex !important;
        opacity: 0;
        pointer-events: none;
        anchor-name: --ial-host-bottom;
    }

    /* The dialog becomes a full-width bottom bar growing up from the screen's bottom edge, the one
       screen coordinate the anchor gives. The anchor button sits 14px above that edge
       (EmbedScrollToTopButton's EDGE_INSET), hence the +14px. Positioned by top with a fixed
       height: a box spanning two insets squashes to nothing when the visible slice of the iframe
       is shorter than the bar, and clamping top at 0 keeps the header and close button on screen
       for a first-row click near the top of the embed (the bar's lower part hides below the fold
       instead). Screen height is unknowable here, so the height steps by iframe width as a proxy:
       a phone-width embed is on a tall narrow screen, a laptop-width one on a ~650px viewport, and
       only a 1400px+ embed implies a desktop monitor. The phone value is deliberately near the
       smallest common phone viewport (~570-600px): the bar grows up from the screen bottom, so a
       taller one pushes the header off the top, and the header's X is the only way to dismiss this
       dialog (Dialog.tsx wires up no backdrop click and no Escape). */
    body:has(#layout[data-embedded]) .modal {
        --ial-sheet-height: 580px;
        position-anchor: --ial-host-bottom;
        top: max(0px, calc(anchor(bottom) + 14px - var(--ial-sheet-height)));
        bottom: auto;
        height: var(--ial-sheet-height);
        animation: ial-sheet-up 220ms ease-out;
    }

    @media (min-width: 768px) {
        body:has(#layout[data-embedded]) .modal {
            --ial-sheet-height: 600px;
        }

        body:has(#layout[data-embedded]) .modal .modal-body {
            padding-bottom: 0;
        }
    }

    @media (min-width: 1400px) {
        body:has(#layout[data-embedded]) .modal {
            --ial-sheet-height: 760px;
        }
    }

    body:has(#layout[data-embedded]) .modal .modal-dialog {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body:has(#layout[data-embedded]) .modal .modal-content {
        height: 100%;
        border-radius: 0;
        box-shadow: 0 -18px 48px rgba(0, 0, 0, .35);
    }

    @keyframes ial-sheet-up {
        from { transform: translateY(24px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        body:has(#layout[data-embedded]) .modal {
            animation: none;
        }
    }
}

/* The headshot is w-100 in a 5/12 column; at sheet height that is most of the body. Cap it to the
   sheet and let it shrink to fit instead of stretching to the column. */
body:has(#layout[data-embedded]) .modal .entrant-details-image-column .primary-image {
    display: block;
    width: auto !important;
    max-width: 100%;
    max-height: calc(var(--ial-sheet-height, 600px) - 220px);
    margin: 0 auto;
    object-fit: contain;
}

#layout[data-embedded] [data-theme-key^="entrants-panel-category"] {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#layout[data-embedded] .tile-container .entrant-card.small-card .card,
#layout[data-embedded] .tile-clickable {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

#layout[data-embedded] .tile-clickable:focus-visible {
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(var(--ial-teal-rgb), .35);
}

/* An admin card height clips the tile to a fixed box; NAACP's people cards are natural height,
   so the embed lets the card grow and keeps the buttons under the text instead of pinned. */
#layout[data-embedded] .tile-fixed-height {
    height: auto !important;
    overflow: visible;
}

#layout[data-embedded] .entrant-card.small-card > .card > .row > .entrant-card-buttons {
    margin-top: 0;
}

/* Geometry copied from naacp.org .people-listing .person .image: a 300px photo sits in a
   306px box (6px left pad); the ring svg is 300px wide at top 18px / right 6px, rotated 200deg.
   Percentages keep that offset as the tile scales. */
#layout[data-embedded] .entrant-card.small-card .image-container {
    display: block !important;
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 306px;
    aspect-ratio: 306 / 315;
    margin: 0 auto 40px;
    overflow: visible;
    background: transparent;
}

#layout[data-embedded] .entrant-card.small-card .image-container::before {
    content: "";
    position: absolute;
    top: 5.7143%;
    left: 0;
    width: 98.0392%;
    aspect-ratio: 577.39 / 572.28;
    background: var(--ial-ring-blue) center / contain no-repeat;
    transform: rotate(200deg);
    transition: transform var(--ial-ease), opacity var(--ial-ease);
    z-index: 1;
    pointer-events: none;
}

#layout[data-embedded] .entrant-card.small-card .image-container .background-image {
    display: none;
}

#layout[data-embedded] .entrant-card.small-card .image-container .main-image,
#layout[data-embedded] .entrant-card.small-card .image-container .placeholder-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 98.0392%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    z-index: 2;
}

#layout[data-embedded] .entrant-card.small-card .image-container .placeholder-image {
    padding: 0 !important;
    color: transparent;
    background: #9c21e9 var(--ial-scribble) center / cover no-repeat;
}

#layout[data-embedded] .entrant-card.small-card .card-block {
    padding: 0 !important;
    text-align: center;
}

#layout[data-embedded] .entrant-card.small-card dl {
    gap: 0;
}

#layout[data-embedded] .entrant-card.small-card dl dt {
    display: none !important;
}

#layout[data-embedded] .entrant-card.small-card .title-row {
    font-family: var(--ial-display);
    font-weight: 900 !important;
    font-size: 1.875rem;
    line-height: 2.25rem;
    letter-spacing: .03125rem;
    text-transform: none;
    color: var(--ial-ink);
    margin: 0;
    transition: color var(--ial-ease);
}

#layout[data-embedded] .entrant-card.small-card .title-row dd {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

#layout[data-embedded] .entrant-card.small-card dl > div[data-theme-key*="element=[data-row]"] {
    display: block;
    margin-top: .25rem;
}

#layout[data-embedded] .entrant-card.small-card .title-row + div[data-theme-key*="element=[data-row]"] {
    margin-top: 20px;
}

#layout[data-embedded] .entrant-card.small-card div[data-theme-key*="element=[data-row]"] dd,
#layout[data-embedded] .entrant-card.small-card div[data-theme-key*="element=[data-row]"] .fit-text {
    display: block;
    font: 400 1.3125rem/1.6875rem var(--ial-display) !important;
    letter-spacing: .03125rem;
    text-transform: none;
    color: var(--ial-ink);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

#layout[data-embedded] .entrant-card.small-card .card-buttons {
    padding: 14px 0 0;
    gap: .5rem;
}

#layout[data-embedded] .entrant-card.small-card .card-buttons button {
    width: auto;
    margin: 0;
}

#layout[data-embedded] .entrant-card.small-card .entrant-details-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: var(--ial-teal) !important;
    color: transparent !important;
    overflow: hidden;
    transition: background-color .3s ease-in-out .1s !important;
}

#layout[data-embedded] .entrant-card.small-card .entrant-details-button > * {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#layout[data-embedded] .entrant-card.small-card .entrant-details-button::after {
    content: "";
    width: 18px;
    height: 18px;
    background-color: #000;
    -webkit-mask: var(--ial-arrow) center / contain no-repeat;
    mask: var(--ial-arrow) center / contain no-repeat;
    transition: background-color .3s ease-in-out .1s;
}

#layout[data-embedded] .entrant-card:hover .entrant-details-button,
#layout[data-embedded] .entrant-card.small-card .entrant-details-button:hover,
#layout[data-embedded] .entrant-card.small-card .entrant-details-button:focus-visible {
    background-color: #000 !important;
}

#layout[data-embedded] .entrant-card:hover .entrant-details-button::after,
#layout[data-embedded] .entrant-card.small-card .entrant-details-button:hover::after,
#layout[data-embedded] .entrant-card.small-card .entrant-details-button:focus-visible::after {
    background-color: #fff;
}

#layout[data-embedded] .tile-clickable:hover .image-container::before,
#layout[data-embedded] .tile-clickable:focus-visible .image-container::before {
    transform: rotate(180deg);
}

#layout[data-embedded] .tile-clickable.selected .image-container::before {
    background-image: var(--ial-ring-yellow);
}

#layout[data-embedded] .tile-clickable.selected .title-row {
    color: var(--ial-purple-deep);
}

#layout[data-embedded] .tile-clickable .tile-rank-badge {
    top: 0;
    right: 0;
    background-color: var(--ial-ink);
    color: #fff;
}


#layout[data-embedded] [data-theme-key*="element=[image];entrant=[steve-jones];"] {
    object-position: 50% 20%;
}

/* Zoomed entrants grow the img box and re-clip it with clip-path to the same 150px circle the ring
   is drawn against (bubble centre 156px,150px of the 306x315 container): radius = 50% / zoom,
   centre = (bubble centre - box offset) / box size. object-position still picks the slice along
   the overflowing axis; left/top pan the other one. */
#layout[data-embedded] .entrant-card.small-card .image-container .main-image[data-theme-key*="entrant=[dr-dwaun-j-warmack];"] {
    width: 137.255%;
    right: auto;
    left: -33.987%;
    top: -19.048%;
    border-radius: 0;
    object-position: 50% 29%;
    clip-path: circle(35.714% at 61.905% 50%);
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[danielle-marck];"] {
    object-position: 50% 12%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[kaci-patterson];"] {
    object-position: 50% 9%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[cheryl-polote-williamson];"] {
    object-position: 80% 10%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[dr-stacii-jae-johnson];"] {
    object-position: 80% 30%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[jonathan-rabb];"] {
    object-position: 80% 0%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[josiah-price];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[tina-perry];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[trell-thomas];"] {
    object-position: 80% 30%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[ty-boyea-robinson];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[ivory-a-toldson-ph-d];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[harold-b-pettigrew-jr];"] {
    object-position: 80% 20%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[keith-g-pemberton-ii];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[sheley-secrest];"] {
    object-position: 80% 10%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[danielle-marck];"] {
    object-position: 80% 70%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[deanna-hamilton];"] {
    object-position: 80% 0%;
}
#layout[data-embedded] [data-theme-key*="element=[image];entrant=[marquelle-turner-gilchrist];"] {
    object-position: 80% 0%;
}

#layout[data-embedded] [data-theme-key*="element=[image];entrant=[kristin-mc-guire];"] {
    object-position: 50% 15%;
}

#layout[data-embedded] .entrant-card.small-card .image-container .main-image[data-theme-key*="entrant=[daquanna-harrison];"] {
    width: 119.608%;
    right: auto;
    left: -8.824%;
    top: -10.476%;
    border-radius: 0;
    clip-path: circle(40.984% at 50% 50%);
}

#layout[data-embedded] .entrant-card.small-card .image-container .main-image[data-theme-key*="entrant=[babette-bouvier-jones];"] {
    width: 137.255%;
    right: auto;
    left: -24.51%;
    top: -0.381%;
    border-radius: 0;
    object-position: 100% 50%;
    clip-path: circle(35.714% at 55% 36%);
}

#layout[data-embedded] .entrant-card.small-card .image-container .main-image[data-theme-key*="entrant=[kenneth-n-wilson];"] {
    width: 176.471%;
    right: auto;
    left: -37.255%;
    top: -46.667%;
    border-radius: 0;
    object-position: 35% 50%;
    clip-path: circle(27.778% at 50% 55%);
}


/* ---------- Show block: entrant details dialog ---------- */

.entrant-details-dialog [data-theme-key^="entrant-details-metadata-header;group-name=[socials]"] {
    display: none;
}

.entrant-details-dialog .entrant-details-info-column {
    display: flex;
    flex-wrap: wrap;
}

.entrant-details-dialog .entrant-details-info-column > * {
    width: 100%;
    order: 1;
}

.entrant-details-dialog [data-theme-key^="entrant-details-metadata-group"][data-theme-key*="group-name=[socials]"] {
    order: 0;
    width: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 .5rem .75rem 0 !important;
}

.entrant-details-dialog [data-theme-key^="entrant-details-metadata-group"][data-theme-key*="group-name=[socials]"] dl,
.entrant-details-dialog [data-theme-key^="entrant-details-metadata-group"][data-theme-key*="group-name=[socials]"] dl div,
.entrant-details-dialog [data-theme-key^="entrant-details-metadata-group"][data-theme-key*="group-name=[socials]"] dd,
.entrant-details-dialog [data-theme-key^="entrant-details-metadata-group"][data-theme-key*="group-name=[socials]"] dd span {
    display: contents;
}

.entrant-details-dialog .modal-body > .container-fluid {
    display: flex;
    flex-direction: column;
}

.entrant-details-dialog .modal-body > .container-fluid > .row {
    display: contents;
}

.entrant-details-dialog .modal-body > .container-fluid > .row > .col-xl-7,
.entrant-details-dialog .modal-body > .container-fluid > .row > .col-xl-5 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.entrant-details-dialog .modal-body > .container-fluid > .row > .col-xl-5 {
    order: 1;
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ial-line);
}