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

:root {
    --ccca-ink: #121019;
    --ccca-ink-soft: #38334a;
    --ccca-muted: #6b6580;
    --ccca-muted-rgb: 107, 101, 128;
    --ccca-primary: #3a1091;
    --ccca-primary-rgb: 58, 16, 145;
    --ccca-primary-hover: #4e1cb8;
    --ccca-primary-light: #a78bfa;
    --ccca-primary-tint: #f4f1fc;
    --ccca-primary-line: #d8cdf2;
    --ccca-primary-grad: none;
    --ccca-primary-alt-bg: #000000;
    --ccca-primary-alt-fg: #a78bfa;
    --ccca-on-primary: #ffffff;
    --ccca-label: #4318a3;
    --ccca-link: #4318a3;
    --ccca-link-rgb: 67, 24, 163;
    --ccca-accent: #c08a2e;
    --ccca-accent-rgb: 192, 138, 46;
    --ccca-accent-text: #8a5f12;
    --ccca-accent-tint: #fbf4e8;
    --ccca-error: #a02b2b;
    --ccca-error-rgb: 160, 43, 43;
    --ccca-error-tint: #faeeee;
    --ccca-success: #2f6b52;
    --ccca-success-rgb: 47, 107, 82;
    --ccca-success-tint: #edf4f0;
    --ccca-page: #f6f4fa;
    --ccca-surface: #ffffff;
    --ccca-surface-alt: #faf8fd;
    --ccca-locked: #eceaf2;
    --ccca-line: #e3dfed;
    --ccca-line-strong: #c5bfd6;
    --ccca-outline: #121019;
    --ccca-bar: #000000;
    --ccca-bar-alt: #121016;
    --ccca-bar-text: #a09aaf;
    --ccca-star-color: #ac8b4b;
    --ccca-bar-rule: #6b28d9;
    --ccca-rule-solid: #6b28d9;
    --ccca-bar-hairline: rgba(107, 40, 217, .55);
    --ccca-shadow: 0 1px 2px rgba(18, 16, 25, .06), 0 14px 30px -20px rgba(18, 16, 25, .32);
    --ccca-display: "Outfit", "Century Gothic", "Trebuchet MS", sans-serif;
    --ccca-body: "Outfit", "Century Gothic", "Trebuchet MS", sans-serif;
    --ccca-ease: 220ms ease;
    --ccca-stars: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 24'%3e%3cg fill='black'%3e%3cpath d='M12 1 14.59 8.44 22.46 8.6 16.19 13.36 18.47 20.9 12 16.4 5.53 20.9 7.81 13.36 1.54 8.6 9.41 8.44Z'/%3e%3cpath d='M39 1 41.59 8.44 49.46 8.6 43.19 13.36 45.47 20.9 39 16.4 32.53 20.9 34.81 13.36 28.54 8.6 36.41 8.44Z'/%3e%3cpath d='M66 1 68.59 8.44 76.46 8.6 70.19 13.36 72.47 20.9 66 16.4 59.53 20.9 61.81 13.36 55.54 8.6 63.41 8.44Z'/%3e%3cpath d='M93 1 95.59 8.44 103.46 8.6 97.19 13.36 99.47 20.9 93 16.4 86.53 20.9 88.81 13.36 82.54 8.6 90.41 8.44Z'/%3e%3c/g%3e%3c/svg%3e");
}

:root[data-bs-theme="dark"] {
    --ccca-ink: #f1eff8;
    --ccca-ink-soft: #d3cfe2;
    --ccca-muted: #a29cb5;
    --ccca-muted-rgb: 162, 156, 181;
    --ccca-primary: #8b6ce0;
    --ccca-primary-rgb: 139, 108, 224;
    --ccca-primary-hover: #a488ef;
    --ccca-primary-light: #c3aef7;
    --ccca-primary-tint: rgba(139, 108, 224, .16);
    --ccca-primary-line: rgba(139, 108, 224, .45);
    --ccca-primary-grad: none;
    --ccca-primary-alt-bg: #000000;
    --ccca-primary-alt-fg: #c3aef7;
    --ccca-on-primary: #120a24;
    --ccca-label: #b9a3f2;
    --ccca-link: #c3aef7;
    --ccca-link-rgb: 195, 174, 247;
    --ccca-accent: #d9a94f;
    --ccca-accent-rgb: 217, 169, 79;
    --ccca-accent-text: #ecc37e;
    --ccca-accent-tint: rgba(217, 169, 79, .16);
    --ccca-error: #e0827a;
    --ccca-error-rgb: 224, 130, 122;
    --ccca-error-tint: rgba(224, 130, 122, .16);
    --ccca-success: #6ebd92;
    --ccca-success-rgb: 110, 189, 146;
    --ccca-success-tint: rgba(110, 189, 146, .16);
    --ccca-page: #0f0d14;
    --ccca-surface: #191622;
    --ccca-surface-alt: #221e2d;
    --ccca-locked: #272335;
    --ccca-line: #332e42;
    --ccca-line-strong: #474057;
    --ccca-outline: #e8e5f2;
    --ccca-bar: #000000;
    --ccca-bar-alt: #121016;
    --ccca-bar-text: #a09aaf;
    --ccca-star-color: #c8a458;
    --ccca-bar-rule: #7c3aed;
    --ccca-rule-solid: #7c3aed;
    --ccca-bar-hairline: rgba(124, 58, 237, .55);
    --ccca-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -20px rgba(0, 0, 0, .75);
}

/* 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(--ccca-primary);
    --bs-primary-rgb: var(--ccca-primary-rgb);
    --bs-danger: var(--ccca-error);
    --bs-danger-rgb: var(--ccca-error-rgb);
    --bs-success: var(--ccca-success);
    --bs-success-rgb: var(--ccca-success-rgb);
    --bs-warning: var(--ccca-accent);
    --bs-warning-rgb: var(--ccca-accent-rgb);
    --bs-form-invalid-color: var(--ccca-error);
    --bs-form-invalid-border-color: var(--ccca-error);
    --bs-body-font-family: var(--ccca-body);
    --bs-body-bg: var(--ccca-surface);
    --bs-body-color: var(--ccca-ink);
    --bs-secondary-bg: var(--ccca-page);
    --bs-tertiary-bg: var(--ccca-surface-alt);
    --bs-secondary-color: var(--ccca-muted);
    --bs-secondary-color-rgb: var(--ccca-muted-rgb);
    --bs-tertiary-color: var(--ccca-line-strong);
    --bs-border-color: var(--ccca-line-strong);
    --bs-light-border-subtle: var(--ccca-line);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-link-color: var(--ccca-link);
    --bs-link-color-rgb: var(--ccca-link-rgb);
    --bs-link-hover-color: var(--ccca-primary);
    --bs-link-hover-color-rgb: var(--ccca-primary-rgb);
    --bs-focus-ring-color: rgba(var(--ccca-primary-rgb), .3);
    --bs-box-shadow-sm: var(--ccca-shadow);
}

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

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

#root ::selection {
    background: rgba(var(--ccca-primary-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(--ccca-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1.2;
    color: var(--ccca-ink);
}

#root h1 {
    font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
    letter-spacing: .14em;
}

#root h2 {
    font-size: 1.15rem;
    letter-spacing: .2em;
}

#root h3 { font-size: 1rem; letter-spacing: .18em; }
#root h4 { font-size: .9rem; letter-spacing: .18em; }
#root h5 { font-size: .85rem; letter-spacing: .16em; }

@media (max-width: 575.98px) {
    #root h1 { letter-spacing: .08em; }
    #root h2 { letter-spacing: .12em; }
}

#root a {
    color: var(--ccca-link) !important;
    text-decoration-color: var(--ccca-primary-line);
    text-underline-offset: 3px;
}

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

/* .text-warning resolves to the brand gold, which is far too light to read on a white surface. */
#root .text-warning {
    color: var(--ccca-accent-text) !important;
}

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

#root .navbar[data-theme-key="navbar"] {
    position: relative;
    background-color: var(--ccca-bar) !important;
    border-bottom: 0;
    box-shadow: none !important;
}

/* A border-bottom cannot carry a gradient, and the rule under the bar is the one place the brand signature lives. */
#root .navbar[data-theme-key="navbar"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ccca-bar-rule);
}

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

#root .navbar > [data-theme-key="navbar-branding"] {
    min-height: 64px;
}

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

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

/* The stacked layout gives the brand its own row, so the mark can carry more weight there. */
@media (min-width: 992px) {
    #root .navbar.flex-lg-column [data-theme-key="navbar-image"] {
        height: 62px !important;
    }
}

/* The divider only makes sense between a logo and the brand text; shows without a logo must not get a stray rule. */
#root [data-theme-key="navbar-branding"] .navbar-brand > img + 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:empty,
#root [data-theme-key="navbar-branding"] .navbar-brand > span:has(> p:only-child:empty) {
    display: none;
}

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

/* Stacked layout: the links row is painted with --bs-body-bg by Navbar.css, which would drop a light band
   under the black brand row. Keep the whole header as one dark block. */
#root .navbar .navbar-collapse.navbar-light {
    background-color: var(--ccca-bar-alt) !important;
    border-top: 1px solid var(--ccca-bar-hairline);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

#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(--ccca-display);
    font-weight: 500;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff !important;
    transition: color var(--ccca-ease);
}

#root .navbar .navbar-collapse.navbar-light .nav-link {
    padding: .9rem 1.1rem !important;
}

@media (min-width: 992px) {
    #root .navbar .navbar-collapse.navbar-light .nav-links-container .navbar-nav {
        margin-left: -1.35rem;
    }
}

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

#root .navbar .nav-link:hover {
    color: var(--ccca-primary-light) !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 {
    font-weight: 600;
}

#root .navbar .auth-nav {
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    padding: .45rem 1rem;
    font-size: .72rem;
}

#root .navbar .auth-nav:hover {
    background: #fff !important;
    color: var(--ccca-ink) !important;
    border-color: #fff !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(--ccca-primary-light);
    border-color: var(--ccca-primary-light);
}

#root .navbar .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--ccca-primary-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,
    #root .navbar .navbar-collapse.navbar-light .nav-link {
        padding: .7rem .5rem !important;
    }

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

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

    #root .navbar .navbar-collapse.navbar-light .nav-links-container .navbar-nav {
        margin-left: 0;
    }

    #root .navbar .utility-links-container .navbar-nav {
        flex-wrap: wrap;
        gap: .85rem;
        padding: .25rem 0 .5rem;
    }
}

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

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

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

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

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

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

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

#root .card {
    background-color: var(--ccca-surface);
    border: 1px solid var(--ccca-line);
    border-radius: 0;
    box-shadow: var(--ccca-shadow);
}

#root .card-header,
#root .card-footer {
    background-color: var(--ccca-surface-alt);
    border-color: var(--ccca-line);
    border-radius: 0 !important;
    padding: .85rem 1.15rem;
}

/* CMS authors reach for Bootstrap's contextual backgrounds to colour a card header. Left alone they put a
   second, unrelated colour scheme on the page, so they all resolve to the brand accent. */
#root .card-header:is(.bg-success, .bg-primary, .bg-info, .bg-secondary, .bg-dark, .bg-warning) {
    background-color: var(--ccca-primary) !important;
    background-image: var(--ccca-primary-grad);
    border-bottom: 0;
}

#root .card-header:is(.bg-success, .bg-primary, .bg-info, .bg-secondary, .bg-dark, .bg-warning),
#root .card-header:is(.bg-success, .bg-primary, .bg-info, .bg-secondary, .bg-dark, .bg-warning) * {
    color: var(--ccca-on-primary) !important;
}

#root .card-header h1,
#root .card-header h2,
#root .card-header h3,
#root .card-header h4,
#root .card-header h5 {
    font-size: .82rem;
    letter-spacing: .18em;
    margin-bottom: .15rem;
}

#root .card .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ccca-ink);
    --bs-table-border-color: var(--ccca-line);
    margin-bottom: 0;
}

#root .card .table td {
    padding: .7rem .25rem;
    border-color: var(--ccca-line);
}

#root .card .text-muted {
    color: var(--ccca-muted) !important;
}

/* :has() sits in its own block so a browser without it drops only this rule. */
#root .card:has(> .card-header.bg-success) .text-success,
#root .card:has(> .card-header.bg-primary) .text-primary,
#root .card:has(> .card-header.bg-info) .text-info,
#root .card:has(> .card-header.bg-warning) .text-warning {
    color: var(--ccca-label) !important;
}

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

#root .btn,
.modal .btn {
    font-family: var(--ccca-display);
    font-weight: 500;
    font-size: .78rem;
    line-height: 1.25;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: .7rem 1.7rem;
    border-width: 2px;
    border-radius: 0 !important;
    transition: background-color var(--ccca-ease), border-color var(--ccca-ease), color var(--ccca-ease), box-shadow var(--ccca-ease);
}

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

#root .btn-primary,
.modal .btn-primary {
    --bs-btn-color: var(--ccca-on-primary);
    --bs-btn-bg: var(--ccca-primary);
    --bs-btn-border-color: var(--ccca-primary);
    --bs-btn-hover-color: var(--ccca-primary-alt-fg);
    --bs-btn-hover-bg: var(--ccca-primary-alt-bg);
    --bs-btn-hover-border-color: var(--ccca-primary-alt-bg);
    --bs-btn-active-color: var(--ccca-primary-alt-fg);
    --bs-btn-active-bg: var(--ccca-primary-alt-bg);
    --bs-btn-active-border-color: var(--ccca-primary-alt-bg);
    --bs-btn-disabled-color: var(--ccca-on-primary);
    --bs-btn-disabled-bg: var(--ccca-primary);
    --bs-btn-disabled-border-color: var(--ccca-primary);
    --bs-btn-focus-shadow-rgb: var(--ccca-primary-rgb);
}

/* Button.css forces disabled primary text to white, which is unreadable on the light fills used here. */
#root .btn-primary[disabled],
.modal .btn-primary[disabled] {
    color: var(--ccca-on-primary) !important;
}

/* A flat metal reads as grey; the sheen is what makes it read as a second metal beside the gold.
   Themes without a metallic primary set --ccca-primary-grad to none and get a plain fill. */
#root .btn-primary:not(.scroll-to-top-btn):not(.submit-votes-btn),
.modal .btn-primary {
    background-image: var(--ccca-primary-grad);
}

#root .btn-primary:hover,
#root .btn-primary:active,
#root .btn-primary:focus,
.modal .btn-primary:hover,
.modal .btn-primary:active,
.modal .btn-primary:focus {
    background-image: none;
}

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

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

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

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

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

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

/* Bootstrap keeps its own --bs-btn-disabled-* on the outline variants, so a disabled outline button falls
   back to #0d6efd; Button.css then paints its label black at 40%, which disappears on the dark theme.
   The resend-code countdown has to stay readable while it counts, so these read muted rather than faded. */
#root .btn[class*="btn-outline-"][disabled],
.modal .btn[class*="btn-outline-"][disabled] {
    color: var(--ccca-muted) !important;
    background-color: transparent !important;
    border-color: var(--ccca-line-strong) !important;
    opacity: 1;
}

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

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

#root .btn-primary.scroll-to-top-btn[disabled] {
    color: var(--ccca-surface) !important;
}

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

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

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

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

/* Bootstrap's .form-control:disabled fill loses to the rule above, so locked fields need their own. */
#root .form-control:disabled,
#root .form-control[readonly],
#root .form-control.is-read-only,
.modal .form-control:disabled,
.modal .form-control[readonly] {
    background-color: var(--ccca-locked);
    border-color: var(--ccca-line);
    color: var(--ccca-muted);
}

#root .form-control.is-invalid,
#root .form-control.is-invalid:focus {
    border-color: var(--ccca-error);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a02b2b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23a02b2b' stroke='none'/%3e%3c/svg%3e");
}

#root .form-check-input {
    border-color: var(--ccca-line-strong);
}

/* The navbar theme toggle is a .form-switch and has to keep its pill shape. */
#root .form-check:not(.form-switch) .form-check-input,
#root [data-theme-key^="category-input"] .form-check-input {
    border-radius: 0;
}

/* Bootstrap paints the tick as a hard-coded white SVG, so the fill has to be dark enough to carry it. */
#root .form-check-input:checked {
    background-color: var(--ccca-label);
    border-color: var(--ccca-label);
}

#root .form-check-input:focus {
    border-color: var(--ccca-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--ccca-primary-rgb), .25);
}

/* react-select injects hashed emotion classes at runtime, after this sheet; suffix matching is the only hook. */
#root .react-select-wrapper [class$="-control"] {
    border-radius: 0;
    border-color: var(--ccca-line-strong);
    background-color: var(--ccca-surface);
    min-height: 2.75rem;
    box-shadow: none;
}

#root .react-select-wrapper [class$="-control"]:hover {
    border-color: var(--ccca-primary);
}

#root .react-select-wrapper [class$="-control"]:has(input:disabled) {
    background-color: var(--ccca-locked);
    border-color: var(--ccca-line);
}

#root .react-select-wrapper [class$="-menu"] {
    border-radius: 0;
    border: 1px solid var(--ccca-line-strong);
    background-color: var(--ccca-surface);
    box-shadow: var(--ccca-shadow);
}

#root .react-select-wrapper [class$="-option"]:active {
    background-color: var(--ccca-primary-tint);
}

#root .react-select-wrapper [class$="-singleValue"] {
    color: var(--ccca-ink);
}

#root .react-select-wrapper [class$="-placeholder"] {
    color: var(--ccca-muted);
}

#root .react-select-wrapper .react-select-error [class$="-control"] {
    border-color: var(--ccca-error);
}

#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: 0;
    border: 1px solid var(--ccca-line-strong);
    background-color: var(--ccca-surface);
    box-shadow: var(--ccca-shadow);
    padding: .35rem 0;
}

#root .dropdown-header {
    font-family: var(--ccca-display);
    font-weight: 600;
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ccca-label);
    padding: .65rem 1rem .35rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

#root .footer {
    background-color: var(--ccca-bar) !important;
    border-top: 3px solid var(--ccca-rule-solid);
    padding: 1.5rem 1rem !important;
    font-family: var(--ccca-display);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ccca-bar-text);
}

#root .footer .text-secondary,
#root .footer .btn-link {
    color: var(--ccca-bar-text) !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: var(--ccca-bar) !important;
    color: #fff;
    border-top: 3px solid var(--ccca-rule-solid);
    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: var(--ccca-bar);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--ccca-bar);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}

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

/* ---------- Submit: entry form ---------- */

#root h1.fs-2 {
    font-size: 1.6rem !important;
    margin-bottom: 1rem;
}

#root .white-box > h5.break-word {
    font-family: var(--ccca-display);
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .1em;
    color: var(--ccca-label);
    margin-bottom: .75rem;
}

#root .white-box > h5.break-word + hr {
    border-color: var(--ccca-line);
    opacity: 1;
    margin: 0 0 1.25rem;
}

/* CMS help text is prose written by the show, so its headings stay in the body face and mixed case. */
#root [data-theme-key^="help-text"] h1,
#root [data-theme-key^="help-text"] h2,
#root [data-theme-key^="help-text"] h3,
#root [data-theme-key^="help-text"] h4,
#root [data-theme-key^="help-text"] h5 {
    font-family: var(--ccca-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ccca-ink);
    margin-bottom: .6rem;
}

#root [data-theme-key^="help-text"] h1 { font-size: 1.35rem; }
#root [data-theme-key^="help-text"] h2 { font-size: 1.25rem; }
#root [data-theme-key^="help-text"] h3 { font-size: 1.1rem; }
#root [data-theme-key^="help-text"] h4,
#root [data-theme-key^="help-text"] h5 { font-size: 1rem; }

#root [data-theme-key^="help-text;"][data-theme-key*="elementType=[Step]"],
#root [data-theme-key^="help-text;"][data-theme-key*="elementType=[Section]"] {
    color: var(--ccca-ink-soft);
    max-width: 78ch;
}

#root .form-label {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--ccca-ink);
    margin-bottom: .35rem;
}

#root .form-text {
    font-size: .88rem;
    line-height: 1.45;
    color: var(--ccca-muted);
}

#root .white-box .row > [data-theme-key^="grouping;"][data-theme-key*="elementType=[Field]"] {
    margin-bottom: 1.35rem !important;
}

#root [data-theme-key^="grouping;"][data-theme-key*="adminOnly=[true]"] > .alert-warning {
    border-left-width: 4px;
}

/* Step progress bar */
#root .progress-container.card {
    background-color: var(--ccca-surface);
    border: 1px solid var(--ccca-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--ccca-shadow) !important;
}

#root .progress-bar-wrapper {
    padding: 1.5rem 1.5rem .75rem;
}

#root .progress-step::before {
    height: 2px;
    background: linear-gradient(to left, var(--ccca-line) 50%, var(--ccca-primary) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}

#root .progress-step .step-index,
#root .progress-step .step-icon {
    background-color: var(--ccca-surface-alt);
    border: 1px solid var(--ccca-line-strong);
    color: var(--ccca-ink);
    font-family: var(--ccca-display);
    font-size: .85rem;
    height: 2.25rem;
    width: 2.25rem;
    line-height: 2.25rem;
}

#root .progress-step.current .step-index {
    background-color: var(--ccca-primary);
    border-color: var(--ccca-primary);
    color: var(--ccca-on-primary);
}

#root .progress-step.completed .step-index,
#root .progress-step.completed .step-icon {
    background-color: var(--ccca-outline);
    border-color: var(--ccca-outline);
    color: var(--ccca-surface);
}

#root .progress-step.completed .step-icon svg path {
    stroke: var(--ccca-surface);
}

#root .progress-step.has-error .step-index,
#root .progress-step.has-error .step-icon {
    background-color: var(--ccca-error);
    border-color: var(--ccca-error);
    color: #fff;
}

#root .progress-step .step-label {
    font-size: .85rem;
    line-height: 1.3;
    color: var(--ccca-muted);
    padding: 0 .35rem;
}

#root .progress-step.current .step-label {
    font-weight: 600;
    color: var(--ccca-ink);
}

/* Sections */
#root fieldset.border {
    border-radius: 0 !important;
    border-color: var(--ccca-line-strong) !important;
    padding: 1.25rem 1.5rem 1rem !important;
    margin-top: .5rem;
}

#root fieldset.border > legend {
    float: none;
    width: auto;
    font-family: var(--ccca-display);
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ccca-label);
    padding: 0 .6rem !important;
    margin: 0 0 .5rem -.6rem;
}

/* Category selection */
#root [data-theme-key^="category-group-label"] {
    display: block;
    font-family: var(--ccca-display);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ccca-muted);
    margin: .5rem 0 .25rem;
}

#root [data-theme-key^="category-input"] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding-left: 0;
    margin: .5rem 0;
}

#root [data-theme-key^="category-input"] .form-check-input {
    float: none;
    margin: .25rem 0 0;
    flex: 0 0 auto;
    border-radius: 0;
    border-color: var(--ccca-line-strong);
}

#root [data-theme-key^="category-input"] .form-check-input:checked {
    border-color: var(--ccca-label);
}

#root [data-theme-key^="category-label"] {
    margin: 0 !important;
    line-height: 1.5;
}

#root [data-theme-key^="category-number"] {
    font-family: var(--ccca-display);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ccca-label);
    margin-right: .15rem;
}

#root [data-theme-key^="category-separator"] {
    display: none;
}

#root [data-theme-key^="category-price"] {
    color: var(--ccca-muted);
    font-size: .92rem;
}

/* Navigation row under the form */
#root form .d-flex.justify-content-between.my-3 {
    align-items: center;
    padding-top: .5rem;
}

#root form .d-flex.justify-content-between.my-3 .text-secondary {
    font-size: .9rem;
    color: var(--ccca-muted) !important;
}

#root [data-theme-key="form-next-button"],
#root [data-theme-key="form-previous-button"],
#root [data-theme-key="form-submit-button"] {
    min-width: 128px;
    padding: .72rem 1.4rem;
}

/* ---------- Submit: dashboard cards, drop zone, summary (from source, not rendered) ---------- */

#root [data-theme-key^="form-card-container"] {
    border: 1px solid var(--ccca-line);
    border-radius: 0;
    box-shadow: var(--ccca-shadow);
    background-color: var(--ccca-surface);
}

#root [data-theme-key^="form-card-header"] {
    margin-bottom: .75rem;
}

#root .drop-zone {
    border-radius: 0;
    border-color: var(--ccca-line-strong);
    background-color: var(--ccca-surface-alt);
}

#root .drop-zone-icon {
    background-color: var(--ccca-primary-tint);
    color: var(--ccca-label);
}

/* Invoice header logo has no size rule in the app and renders at the file's natural size,
   and the show's uploaded mark is the white-on-dark lockup, so it needs a dark plate to read here. */
#root [data-theme-key^="invoice:name=[header-logo]"] {
    height: auto;
    max-height: 84px;
    max-width: min(60%, 380px);
    width: auto;
    box-sizing: content-box;
    padding: .9rem 1.4rem;
    background-color: var(--ccca-bar);
}

#root [data-theme-key^="invoice:name=[header-hero]"] h1 {
    font-family: var(--ccca-display);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: .08em;
}

#root [data-theme-key^="invoice:name=[header-hero]"] h5 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 1rem;
    color: var(--ccca-ink-soft);
}

#root .list-group-item.active {
    background-color: var(--ccca-outline);
    border-color: var(--ccca-outline);
    color: var(--ccca-surface);
    border-radius: 0 !important;
}

#root .list-group-item.active h5 {
    color: var(--ccca-surface);
    font-family: var(--ccca-display);
    font-weight: 400;
    letter-spacing: .08em;
    margin-bottom: 0;
}

#root .list-group-item.active p {
    margin-bottom: .35rem;
}

#root .summary-display .field-label {
    font-family: var(--ccca-display);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ccca-label);
}

/* ---------- Submit: Critics Choice trim ---------- */

#root h1.fs-2 {
    text-align: center;
}

#root h1.fs-2::after {
    content: "";
    display: block;
    width: 84px;
    height: 19px;
    margin: .85rem auto .25rem;
    background-color: var(--ccca-star-color);
    -webkit-mask: var(--ccca-stars) center / contain no-repeat;
    mask: var(--ccca-stars) center / contain no-repeat;
}

#root .white-box:has(> h5.break-word),
#root .progress-container.card {
    border-top: 3px solid var(--ccca-rule-solid) !important;
}

/* The full class set is what FrontEndValidationError renders; bare small.text-danger is reused by CMS strings. */
#root small.text-danger.mt-1.d-block.break-word {
    font-family: var(--ccca-display);
    font-weight: 500;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ccca-error) !important;
}

#root [data-theme-key^="category-group-container"] {
    border-left: 1px solid var(--ccca-line);
    padding-left: 1rem;
    margin-bottom: 1rem;
}

#root [data-theme-key^="category-input"] .form-check-input:checked + [data-theme-key^="category-label"] {
    color: var(--ccca-ink);
    font-weight: 500;
}

#root .list-group-item {
    border-radius: 0 !important;
    border-color: var(--ccca-line);
}

#root [data-theme-key^="invoice:name=[header-hero]"] h1::after {
    display: none;
}

/* The dashboard filter row ships as .mb-1, which leaves the grid header sitting on the search field. */
#root .input-group.mb-1:has(+ .k-grid) {
    margin-bottom: 1.25rem !important;
}

/* Center the navbar tabs (Dashboard, Guidelines) like the CCBTL site. */
@media (min-width: 992px) {
    .navbar .nav-links-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }
}

/* Hide category numbers and prices on the submit site */
:root *[data-theme-key*="category-number"],
:root *[data-theme-key*="category-price"] {
  display: none !important;
}

/* Show the category description under the category name (not beside it) */
#root [data-theme-key^="category-input"] {
  flex-wrap: wrap;
}
#root [data-theme-key^="category-input"] > .form-text {
  flex: 0 0 100%;
  padding-left: 51px;
  margin-top: 0;
}

/* Remove extra space at the bottom of the Eligibility section */
#root .white-box fieldset .row > [data-theme-key^="grouping;"][data-theme-key*="name=[eligibility]"] {
  margin-bottom: 0 !important;
}
#root [data-theme-key*="name=[eligibility]"] [data-theme-key^="top-help-text"] > :last-child,
#root [data-theme-key*="name=[eligibility]"] [data-theme-key^="top-help-text"] li:last-child > p:last-child {
  margin-bottom: 0;
}


/* Hide the category select when it's labelled hidden-object */
*[data-theme-key*="name=["][data-theme-key*="hidden-object"] {
  display: none !important;
}