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

:root {
    --cctv-ink: #111111;
    --cctv-ink-soft: #3a3a3a;
    --cctv-muted: #6f6a62;
    --cctv-muted-rgb: 111, 106, 98;
    --cctv-primary: #ac8b4b;
    --cctv-primary-rgb: 172, 139, 75;
    --cctv-primary-hover: #8f7136;
    --cctv-primary-light: #f0c271;
    --cctv-primary-tint: #faf6ee;
    --cctv-primary-line: #e3d5b8;
    --cctv-primary-grad: none;
    --cctv-primary-alt-bg: #000000;
    --cctv-primary-alt-fg: #f0c271;
    --cctv-on-primary: #12100c;
    --cctv-label: #7d6021;
    --cctv-link: #7d6021;
    --cctv-link-rgb: 125, 96, 33;
    --cctv-accent: #d8a13b;
    --cctv-accent-rgb: 216, 161, 59;
    --cctv-accent-text: #8a5f12;
    --cctv-accent-tint: #fdf5e6;
    --cctv-error: #a02b2b;
    --cctv-error-rgb: 160, 43, 43;
    --cctv-error-tint: #faeeee;
    --cctv-success: #3d6b4a;
    --cctv-success-rgb: 61, 107, 74;
    --cctv-success-tint: #eef4f0;
    --cctv-page: #f7f5f2;
    --cctv-surface: #ffffff;
    --cctv-surface-alt: #faf8f5;
    --cctv-locked: #efece6;
    --cctv-line: #e6e0d6;
    --cctv-line-strong: #c9c1b3;
    --cctv-outline: #111111;
    --cctv-bar: #000000;
    --cctv-bar-alt: #141210;
    --cctv-bar-text: #a9a29a;
    --cctv-star-color: #ac8b4b;
    --cctv-bar-rule: #ac8b4b;
    --cctv-rule-solid: #ac8b4b;
    --cctv-bar-hairline: rgba(172, 139, 75, .55);
    --cctv-shadow: 0 1px 2px rgba(17, 17, 17, .05), 0 14px 30px -20px rgba(17, 17, 17, .28);
    --cctv-display: "Outfit", "Century Gothic", "Trebuchet MS", sans-serif;
    --cctv-body: "Outfit", "Century Gothic", "Trebuchet MS", sans-serif;
    --cctv-ease: 220ms ease;
    --cctv-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"] {
    --cctv-ink: #f4f1ec;
    --cctv-ink-soft: #d8d3cb;
    --cctv-muted: #a6a099;
    --cctv-muted-rgb: 166, 160, 153;
    --cctv-primary: #c8a458;
    --cctv-primary-rgb: 200, 164, 88;
    --cctv-primary-hover: #dfba6e;
    --cctv-primary-light: #f0c271;
    --cctv-primary-tint: rgba(200, 164, 88, .14);
    --cctv-primary-line: rgba(200, 164, 88, .45);
    --cctv-primary-grad: none;
    --cctv-primary-alt-bg: #000000;
    --cctv-primary-alt-fg: #f0c271;
    --cctv-on-primary: #161310;
    --cctv-label: #dcb96f;
    --cctv-link: #e2c37e;
    --cctv-link-rgb: 226, 195, 126;
    --cctv-accent: #e0ad4a;
    --cctv-accent-rgb: 224, 173, 74;
    --cctv-accent-text: #f0c271;
    --cctv-accent-tint: rgba(224, 173, 74, .14);
    --cctv-error: #df8078;
    --cctv-error-rgb: 223, 128, 120;
    --cctv-error-tint: rgba(223, 128, 120, .14);
    --cctv-success: #6fbc8c;
    --cctv-success-rgb: 111, 188, 140;
    --cctv-success-tint: rgba(111, 188, 140, .14);
    --cctv-page: #121110;
    --cctv-surface: #1c1a18;
    --cctv-surface-alt: #252220;
    --cctv-locked: #2b2825;
    --cctv-line: #37332e;
    --cctv-line-strong: #4d4841;
    --cctv-outline: #e8e3dc;
    --cctv-bar: #000000;
    --cctv-bar-alt: #141210;
    --cctv-bar-text: #a9a29a;
    --cctv-star-color: #c8a458;
    --cctv-bar-rule: #ac8b4b;
    --cctv-rule-solid: #ac8b4b;
    --cctv-bar-hairline: rgba(172, 139, 75, .55);
    --cctv-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(--cctv-primary);
    --bs-primary-rgb: var(--cctv-primary-rgb);
    --bs-danger: var(--cctv-error);
    --bs-danger-rgb: var(--cctv-error-rgb);
    --bs-success: var(--cctv-success);
    --bs-success-rgb: var(--cctv-success-rgb);
    --bs-warning: var(--cctv-accent);
    --bs-warning-rgb: var(--cctv-accent-rgb);
    --bs-form-invalid-color: var(--cctv-error);
    --bs-form-invalid-border-color: var(--cctv-error);
    --bs-body-font-family: var(--cctv-body);
    --bs-body-bg: var(--cctv-surface);
    --bs-body-color: var(--cctv-ink);
    --bs-secondary-bg: var(--cctv-page);
    --bs-tertiary-bg: var(--cctv-surface-alt);
    --bs-secondary-color: var(--cctv-muted);
    --bs-secondary-color-rgb: var(--cctv-muted-rgb);
    --bs-tertiary-color: var(--cctv-line-strong);
    --bs-border-color: var(--cctv-line-strong);
    --bs-light-border-subtle: var(--cctv-line);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-link-color: var(--cctv-link);
    --bs-link-color-rgb: var(--cctv-link-rgb);
    --bs-link-hover-color: var(--cctv-primary);
    --bs-link-hover-color-rgb: var(--cctv-primary-rgb);
    --bs-focus-ring-color: rgba(var(--cctv-primary-rgb), .3);
    --bs-box-shadow-sm: var(--cctv-shadow);
}

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

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

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

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

#root .navbar[data-theme-key="navbar"] {
    position: relative;
    background-color: var(--cctv-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(--cctv-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(--cctv-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(--cctv-bar-alt) !important;
    border-top: 1px solid var(--cctv-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(--cctv-display);
    font-weight: 500;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff !important;
    transition: color var(--cctv-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(--cctv-primary);
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: transform var(--cctv-ease);
}

#root .navbar .nav-link:hover {
    color: var(--cctv-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(--cctv-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(--cctv-primary-light);
    border-color: var(--cctv-primary-light);
}

#root .navbar .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--cctv-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(--cctv-surface);
    border: 1px solid var(--cctv-line);
    border-radius: 0;
    box-shadow: var(--cctv-shadow) !important;
}

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

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

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

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

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

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

#root .btn,
.modal .btn {
    font-family: var(--cctv-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(--cctv-ease), border-color var(--cctv-ease), color var(--cctv-ease), box-shadow var(--cctv-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(--cctv-on-primary);
    --bs-btn-bg: var(--cctv-primary);
    --bs-btn-border-color: var(--cctv-primary);
    --bs-btn-hover-color: var(--cctv-primary-alt-fg);
    --bs-btn-hover-bg: var(--cctv-primary-alt-bg);
    --bs-btn-hover-border-color: var(--cctv-primary-alt-bg);
    --bs-btn-active-color: var(--cctv-primary-alt-fg);
    --bs-btn-active-bg: var(--cctv-primary-alt-bg);
    --bs-btn-active-border-color: var(--cctv-primary-alt-bg);
    --bs-btn-disabled-color: var(--cctv-on-primary);
    --bs-btn-disabled-bg: var(--cctv-primary);
    --bs-btn-disabled-border-color: var(--cctv-primary);
    --bs-btn-focus-shadow-rgb: var(--cctv-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(--cctv-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 --cctv-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(--cctv-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(--cctv-outline) !important;
    color: var(--cctv-ink) !important;
}

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

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

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

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

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

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

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

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

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

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

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

#root .form-control::placeholder,
.modal .form-control::placeholder {
    color: var(--cctv-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(--cctv-locked);
    border-color: var(--cctv-line);
    color: var(--cctv-muted);
}

#root .form-control.is-invalid,
#root .form-control.is-invalid:focus {
    border-color: var(--cctv-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(--cctv-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(--cctv-label);
    border-color: var(--cctv-label);
}

#root .form-check-input:focus {
    border-color: var(--cctv-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--cctv-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(--cctv-line-strong);
    background-color: var(--cctv-surface);
    min-height: 2.75rem;
    box-shadow: none;
}

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

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

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

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

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

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

#root .react-select-wrapper .react-select-error [class$="-control"] {
    border-color: var(--cctv-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(--cctv-line-strong);
    background-color: var(--cctv-surface);
    box-shadow: var(--cctv-shadow);
    padding: .35rem 0;
}

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

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

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

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

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

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

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

.modal .modal-header {
    border-bottom: 1px solid var(--cctv-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(--cctv-body);
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: .01em;
    text-transform: none;
}

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

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

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

#root .footer .text-secondary,
#root .footer .btn-link {
    color: var(--cctv-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(--cctv-bar) !important;
    color: #fff;
    border-top: 3px solid var(--cctv-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(--cctv-bar);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: var(--cctv-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(--cctv-display);
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .1em;
    color: var(--cctv-label);
    margin-bottom: .75rem;
}

#root .white-box > h5.break-word + hr {
    border-color: var(--cctv-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(--cctv-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--cctv-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(--cctv-ink-soft);
    max-width: 78ch;
}

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

#root .form-text {
    font-size: .88rem;
    line-height: 1.45;
    color: var(--cctv-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(--cctv-surface);
    border: 1px solid var(--cctv-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--cctv-shadow) !important;
}

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

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

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

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

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

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

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

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

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

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

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

/* Category selection */
#root [data-theme-key^="category-group-label"] {
    display: block;
    font-family: var(--cctv-display);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cctv-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(--cctv-line-strong);
}

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

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

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

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

#root [data-theme-key^="category-price"] {
    color: var(--cctv-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(--cctv-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(--cctv-line);
    border-radius: 0;
    box-shadow: var(--cctv-shadow);
    background-color: var(--cctv-surface);
}

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

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

#root .drop-zone-icon {
    background-color: var(--cctv-primary-tint);
    color: var(--cctv-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(--cctv-bar);
}

#root [data-theme-key^="invoice:name=[header-hero]"] h1 {
    font-family: var(--cctv-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(--cctv-ink-soft);
}

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

#root .list-group-item.active h5 {
    color: var(--cctv-surface);
    font-family: var(--cctv-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(--cctv-display);
    font-weight: 400;
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cctv-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(--cctv-star-color);
    -webkit-mask: var(--cctv-stars) center / contain no-repeat;
    mask: var(--cctv-stars) center / contain no-repeat;
}

#root .white-box:has(> h5.break-word),
#root .progress-container.card {
    border-top: 3px solid var(--cctv-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(--cctv-display);
    font-weight: 500;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cctv-error) !important;
}

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

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

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

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