/* The theme's custom.css (loaded last), from union/brand/theme/custom.css, installed
   by union/brand/brand.sh. The header holding the logo scrolls with the page instead of
   staying fixed: fixed, it kept a 100px band over the ballot, a large share of a
   phone screen. */
#survey-nav.fixed-top {
    position: static;
}
body {
    padding-top: 0 !important;
}

/* The column every voter page reads in, one rule for all of them: the election's name, the header
   and the frame (layout_global.twig, nav_bar.twig, outerframe.twig), the error pages
   (layout_errors.twig), the home page (layout_survey_list.twig) and the election system's site pages.
   At most 48rem, centred; on a narrower screen its width, a phone's as before. The theme's col-xl-8
   in its place ran the window's width under 1200px, the text to the left edge on a desktop at a
   Mac's scaling, and two thirds of it over: 1310px lines on a 2000px window. */
.page-column {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

/* The header's menu holds only things these ballots do not use (language, save,
   clear all, question index); on the home page it showed as a lone "..." */
#navbar-menu {
    display: none;
}

/* Words stay whole. The theme hyphenates all text (#outerframeContainer), which on a
   phone split "eligible", "election" and "mandatory" across lines. Long addresses
   and links still break (the theme's word-wrap). */
#outerframeContainer {
    -webkit-hyphens: manual;
    hyphens: manual;
}

/* Even spacing from the title to Submit. The theme stacks a margin on each nested
   container, which left about 100px above the question and above Submit. */
.privacy {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.group-outer-container.space-col,
.group-container.space-col {
    margin-top: 0;
    margin-bottom: 0;
}
.group-outer-container.space-col {
    margin-top: 2rem;
}
.question-container {
    margin-bottom: 1rem;
}
.question-container .question-title-container {
    margin-bottom: 0.5rem;
}
.question-container .question-valid-container {
    margin-top: 0;
    margin-bottom: 0.75rem;
}
.checkbox-item:last-child,
.radio-item:last-child {
    margin-bottom: 0;
}
#navigator-container.space-col {
    margin-top: 0;
}

/* Submit on the column's left edge, under the answers, where there is no Previous
   (every ballot); a form with Previous keeps it on the left and Next on the right */
.navigator > .col-6:not(:has(.btn)) {
    display: none;
}
.navigator > .col-6:not(:has(.btn)) + .col-6 {
    flex: 1 1 0;
    text-align: start !important;
}
.navigator .ls-move-btn {
    min-width: 12rem;
}

/* The ranked ballot's box for the ranking: its grey on the list, not on the column
   around it, which ran into the page margin and on a phone to the screen's edge */
.select-sortable-lists:not(.ranking-advanced-style) .ranking-sorted-items {
    background-color: transparent;
}
.select-sortable-lists:not(.ranking-advanced-style) .sortable-rank {
    background-color: #f9f9fb;
    border-radius: 4px;
}

/* Yes and No: two buttons of one width, side by side across the column (at most
   30rem), the icon beside the word, the word copyable where Bootstrap's .btn made it not */
.yesno-button.btn-group {
    display: flex;
    width: 100%;
    max-width: 30rem;
    gap: 0.75rem;
}
.yesno-button.btn-group > .btn:not(:last-child) {
    margin-right: 0;
}
.yesno-button .ls-button-label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    font-size: 1.125rem;
    -webkit-user-select: text;
    user-select: text;
}
.yesno-button .ls-button-label .ls-icon {
    display: inline-block;
    font-size: 1.5rem;
}

/* Text fields at 16px: under that, Safari on a phone zooms the page in when one is
   tapped */
#outerframeContainer .form-control,
#outerframeContainer .form-select {
    font-size: 1rem;
}

/* A sign-up choice (a CB or DD column, radios in register_form.twig): its name and each choice read
   as the fields' labels, where the theme's legend had a rule under it and its own grey; each choice
   a box as tall as the ballot's Yes and No, side by side across the column as many as fit at 9rem
   (two on a 360px phone; a row each made the request form 136px taller), bordered like the
   fields, its radio bordered too and filled in the local's colour, where Bootstrap's is its own
   blue, and the one checked edged in that colour */
.register-form .register-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}
.register-form .form-check-input {
    flex: none;
    float: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
}
.register-form .form-check-input:not(:checked) {
    border: 2px solid rgb(30, 30, 30);
}
.register-form .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.register-form .register-choices legend {
    float: none;
    border-bottom: 0;
    color: rgb(30, 30, 30);
    font-size: inherit;
}
.register-form .register-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    margin-bottom: 0;
    padding: 0 1rem;
    border: 2px solid rgb(30, 30, 30);
    border-radius: 4px;
    cursor: pointer;
}
.register-form .register-choice:has(:checked) {
    border-color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary);
}

/* The sign-up check's field that only a script fills (SealedBallots, sign-up/BotCheck.php): off the
   screen, its aria-hidden keeping it from screen readers */
.sign-up-check {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* A sign-up text area (a TA column) as tall as its rows; the theme sets every field 44px */
.register-form textarea.form-control {
    height: auto;
}

/* The sign-up page on the column's edge, with the logo and the ballot pages: the
   theme's container, card and form each indented it, to three different edges, and
   the container's own widths, 540px and 720px, inset it from 576px to 991px wide */
.register-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.register-jumbotron .card-body {
    padding: 0 12px;
}

/* The request's button a thumb's height, 48px; the theme's was 38 */
.register-container #register_button {
    min-height: 3rem;
}

/* The page for a code mismatch, a used link or a closed ballot (layout_errors.twig)
   in the ballots' type, starting at the top like them, its words across the column:
   in the theme's flex container they shrank to their own width, at the column's left.
   LimeSurvey's picture beside the text made it 531px wide on a 393px phone, so it
   opened cut off at the right. */
body.error-page {
    font-family: "IBMPlexSans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.error-page .container {
    display: block;
    height: auto;
    margin-top: 0 !important;
    padding-top: 8px;
}
body.error-page .col.d-flex {
    display: none !important;
}
body.error-page .error-content {
    line-height: 1.4;
}

/* A test election's line at the top of each of its pages (test_election.twig) and on the election
   system's site page: one line in bold on Bootstrap's warning colours, on the column's edges */
.test-election {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ffe69c;
    border-radius: 4px;
    background-color: #fff3cd;
    color: #664d03;
    font-weight: 600;
    line-height: 1.4;
}

/* The election's title a band above the logo on each of its pages (election_name.twig), the column's
   width, white on the brand's colour, so a voter sees which ballot a page is for: at 1.25rem beside
   the logo it went unnoticed on a wide screen (Josh, 2026-11-05). Its bar, Bootstrap's sticky-top,
   stays at the top of the screen as the page scrolls, on the page's white: inside the header, which
   scrolls away, it left the screen as a phone filled in the request form, 1.5 screens tall (Jim,
   2026-11-06). The header under it starts at the logo; an error page's container sets it 8px down. */
.election-name-bar {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
    background-color: var(--bs-body-bg);
}
.election-name-bar + #survey-nav.fixed-top,
body.error-page .election-name-bar {
    padding-top: 0;
}
.election-name {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
}

/* On a phone each page as short as it reads well, so a voter scrolls less: at 390px wide the
   request form went from 1624px to 1210. Wide screens keep the theme's spacing. */
@media (max-width: 575.98px) {
    /* The title fits the screen */
    .large-heading,
    body.error-page .error-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    /* The logo 48px and 12px from the top, the first heading 12px under it: the theme's 68px
       logo and 2rem above the heading put the first word 150px down, 200 on the home page */
    #survey-nav.fixed-top {
        padding: 0.5rem 0 0;
    }
    .logo-container > img {
        max-height: 3.5rem;
        padding: 0.25rem 0;
    }
    body.error-page .error-logo-container {
        margin-bottom: 0.75rem;
    }
    body.error-page .error-logo-container > img {
        max-height: 3rem;
    }
    /* The election's title in its band at the fields' size */
    .election-name-bar {
        padding-bottom: 0.5rem;
    }
    .election-name {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }
    #main-col.space-col,
    #surveys-list-container {
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }
    #surveys-list-container > .col-12 {
        padding-top: 0 !important;
    }
    #surveys-list-container h1,
    .register-jumbotron h2,
    body.error-page .error-title {
        margin-top: 0;
    }
    /* The request form: its intro at the fields' size, each label 4px over its field and 10px
       under the field before it, the intro and the fields 14px apart, the button 8px under
       * Required; so the form stays under 1.5 screens with the line that the committee may contact
       them in the labels of Fellow or paid directly and the notes (1258px at 390 by 844) */
    .register-jumbotron .card-body > .form-heading {
        margin-bottom: 0.5rem;
    }
    .register-jumbotron .survey-description,
    .register-jumbotron p.form-heading {
        font-size: 1rem;
        line-height: 1.4;
    }
    .register-form label.control-label:not(.register-choice),
    .register-form legend.control-label {
        margin-bottom: 0.25rem;
        font-size: 1rem;
        line-height: 1.375;
    }
    .register-jumbotron.mb-3 {
        margin-bottom: 0.875rem !important;
    }
    .register-form .mb-3 {
        margin-bottom: 0.625rem !important;
    }
    .register-container #register_button {
        margin-top: 0.5rem;
    }
    /* The ballot: the secrecy note closer to the title and the question, Submit 28px under
       Yes and No, nothing under Submit */
    .privacy {
        margin-top: 1rem;
        line-height: 1.4;
    }
    .yesno-button .ls-button-label.mb-3 {
        margin-bottom: 0 !important;
    }
    .group-outer-container.space-col {
        margin-top: 1.25rem;
    }
    #navigator-container.space-col {
        margin-bottom: 0;
    }
    /* Submit (or Register) spans the column, beside Previous where a form has one */
    .navigator > .col-6 {
        flex: 1 1 0;
    }
    .navigator .ls-move-btn,
    #register_button {
        width: 100%;
    }
}