:root {
    --bs-body-font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-primary: #003d63;
    --bs-primary-rgb: 0, 61, 99;
    --bs-link-color: #003d63;
    --bs-link-color-rgb: 0, 61, 99;
    --bs-link-hover-color: #00548c;
    --bs-link-hover-color-rgb: 0, 84, 140;
    --bs-success: #386532;
    --bs-success-rgb: 56, 101, 50;
}

/* Forest green from the profile instead of Bootstrap green. White text on it is about 7:1. */
.btn-success {
    --bs-btn-bg: #386532;
    --bs-btn-border-color: #386532;
    --bs-btn-hover-bg: #2c5128;
    --bs-btn-hover-border-color: #2c5128;
    --bs-btn-active-bg: #234220;
    --bs-btn-active-border-color: #234220;
    --bs-btn-disabled-bg: #386532;
    --bs-btn-disabled-border-color: #386532;
    --bs-btn-focus-shadow-rgb: 56, 101, 50;
}

/* Forest on light green is about 5.9:1. */
.alert-success {
    --bs-alert-color: #386532;
    --bs-alert-bg: #e4f1e2;
    --bs-alert-border-color: #b0d6ab;
}

.text-lysio-forest {
    color: #386532;
}

body {
    font-family: var(--bs-body-font-family);
}

.btn-primary {
    --bs-btn-bg: #003d63;
    --bs-btn-border-color: #003d63;
    --bs-btn-hover-bg: #00548c;
    --bs-btn-hover-border-color: #00548c;
    --bs-btn-active-bg: #002f4d;
    --bs-btn-active-border-color: #002f4d;
    --bs-btn-disabled-bg: #003d63;
    --bs-btn-disabled-border-color: #003d63;
    --bs-btn-focus-shadow-rgb: 0, 61, 99;
}

.btn-outline-primary {
    --bs-btn-color: #003d63;
    --bs-btn-border-color: #003d63;
    --bs-btn-hover-bg: #003d63;
    --bs-btn-hover-border-color: #003d63;
    --bs-btn-active-bg: #003d63;
    --bs-btn-active-border-color: #003d63;
    --bs-btn-disabled-color: #003d63;
    --bs-btn-disabled-border-color: #003d63;
}

.form-check-input:checked {
    background-color: #003d63;
    border-color: #003d63;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #5991f0;
    box-shadow: 0 0 0 0.25rem rgba(0, 61, 99, 0.25);
}

/* Header in Lysio's primary colour #003d63 with white text (about 11:1), no line at the bottom. */
.lysio-header {
    background-color: #003d63;
}

.lysio-header-link,
.lysio-header-link:hover {
    color: #fff;
}

/* The menu of the role, on its own row under the name and Visa som. It wraps on a phone instead of
   scrolling sideways. */
.lysio-header-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lysio-header-nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.75rem;
    row-gap: 0.25rem;
}

/* The menu choice of the page you are on (aria-current): bold and a white line under it. */
.lysio-header-link {
    display: inline-block;
    padding: 0.6rem 0 0.45rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.lysio-header-link:hover,
.lysio-header-link:focus-visible {
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.lysio-header-link:focus-visible {
    outline: 3px solid #5991f0;
    outline-offset: 2px;
}

.lysio-header-link.active {
    font-weight: 700;
    border-bottom-color: #fff;
}

/* LUPP-portalen in the header is the link home. */
.lysio-brand:hover,
.lysio-brand:focus {
    color: #fff;
    text-decoration: underline !important;
}

/* A more compact header on a phone: a smaller name and lower menu choices. */
@media (max-width: 575.98px) {
    .lysio-brand {
        font-size: 1.25rem !important;
    }

    .lysio-header-nav {
        justify-content: center;
        column-gap: 1.25rem;
    }

    .lysio-header-link {
        padding: 0.4rem 0 0.3rem;
    }
}

/* The read only line right under the header, on a municipality's pages seen by MUCF, Lysio or a region. */
.lysio-header + .read-only-bar {
    margin-top: -1.5rem;
}

.read-only-bar {
    margin-bottom: 1.5rem;
    background-color: #dee9fc;
    color: #003d63;
    font-size: 0.875rem;
}

.read-only-bar a {
    color: #003d63;
    font-weight: 600;
}

/* Marine header row with alternating sand and light blue rows. Use on any table: class="table lysio-table-head". */
.lysio-table-head > thead > tr > th {
    background-color: #003d63;
    color: #fff;
}

.lysio-table-head > tbody > tr:nth-child(even) > * {
    background-color: #faf2e8;
}

.lysio-table-head > tbody > tr:nth-child(odd) > * {
    background-color: #dee9fc;
}

.icon-xl {
    font-size: 3.5rem;
}

.bg-lysio-sand {
    background-color: #faf2e8;
}

.bg-lysio-lightblue {
    background-color: #dee9fc;
}

.text-lysio-marin {
    color: #003d63;
}

.text-lysio-green {
    color: #7dba74;
}

.lysio-table thead {
    background-color: #003d63;
    color: #fff;
}

.lysio-table .lysio-section-row th {
    padding-top: 1.5rem;
    border: 0;
}

.lysio-table .lysio-header-row th {
    background-color: #003d63;
}

.lysio-table .lysio-header-row th {
    color: #fff;
}

.lysio-table tbody tr:not(.lysio-section-row):not(.lysio-header-row):nth-child(even) {
    background-color: #faf2e8;
}

.lysio-table tbody tr:not(.lysio-section-row):not(.lysio-header-row):nth-child(odd) {
    background-color: #dee9fc;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .timeline {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
}

.timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    column-gap: 0.75rem;
    align-items: center;
    text-align: left;
    color: #6c757d;
}

.timeline-step .timeline-label,
.timeline-step .timeline-description {
    grid-column: 2;
    font-size: 0.8rem;
    font-weight: 400;
    color: #495057;
    margin-top: 0.25rem;
}

.timeline-current {
    grid-column: 2;
    margin-top: 0 !important;
}

.timeline-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: 0.875rem;
    width: 2px;
    height: calc(100% - 1.75rem + 0.75rem);
    background-color: #dee2e6;
    z-index: 0;
}

@media (min-width: 768px) {
    .timeline-step {
        display: block;
        flex: 1 1 0;
        min-width: 110px;
        text-align: center;
    }

    .timeline-step .timeline-label {
        margin-top: 0.5rem !important;
    }

    .timeline-step .timeline-current {
        margin-top: 0.25rem !important;
    }

    .timeline-step:not(:last-child)::before {
        display: none;
    }

    .timeline-step:not(:first-child)::before {
        display: block;
        content: '';
        position: absolute;
        top: 0.875rem;
        left: -50%;
        width: 100%;
        height: 2px;
    }
}

.timeline-dot {
    grid-row: 1 / span 2;
    position: relative;
    z-index: 1;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.timeline-step.active {
    color: #003d63;
    font-weight: 600;
}

.timeline-step.active .timeline-dot {
    background-color: #ef7764;
    border-color: #ef7764;
}

.timeline-step.current {
    color: #003d63;
    font-weight: 600;
}

.timeline-step.current .timeline-dot {
    border-color: #ef7764;
    border-width: 3px;
}

.timeline-current {
    color: #003d63;
    font-size: 0.8rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .role-switcher {
        min-width: 10rem;
    }
}

/* A bit less text everywhere: 15 px body and smaller headings than Bootstrap's defaults. */
:root {
    --bs-body-font-size: 0.9375rem;
}

h1, .h1 {
    font-size: 1.75rem;
}

h2, .h2 {
    font-size: 1.35rem;
}

h3, .h3 {
    font-size: 1.1rem;
}

h4, .h4 {
    font-size: 1.05rem;
}

h5, .h5 {
    font-size: 1rem;
}

.btn {
    --bs-btn-font-size: 0.9375rem;
}

.btn-sm {
    --bs-btn-font-size: 0.875rem;
}

.form-control,
.form-select {
    font-size: 0.9375rem;
}

/* Elevantal: the field Ert antal is wide enough for the number in the table and in the cards. */
.counts-input {
    min-width: 5.5rem;
    max-width: 7rem;
}

.counts-card-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6rem;
    gap: 0.25rem 0.75rem;
    align-items: end;
    padding: 0.6rem 0;
    border-top: 1px solid #f2f2f2;
}

.counts-card-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.counts-card-own .counts-input {
    width: 100%;
    max-width: none;
}

/* Utkorgen: the text of an e-mail keeps its line breaks and long links wrap. */
.outbox-body {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Collapsible signup parts. The header and footer are shared by every part. */
.signup-section {
    border: 1px solid #d5dbe5;
    border-radius: 0.75rem;
    background-color: #fff;
}

.signup-section-header {
    padding: 0.75rem 1.25rem;
    background-color: #faf2e8;
    border-radius: 0.75rem;
}

.signup-section-header:has(+ .collapse.show),
.signup-section-header:has(+ .collapsing) {
    border-bottom: 1px solid #d5dbe5;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.signup-section-body {
    padding: 1.25rem;
}

.signup-section-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #d5dbe5;
}

.section-toggle.collapsed .when-open,
.section-toggle:not(.collapsed) .when-closed {
    display: none;
}

.section-toggle .bi-chevron-down {
    transition: transform 0.2s;
}

.section-toggle:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.section-toggle .toggle-text {
    margin-right: 0.25rem;
}

/* Så gör ni anmälan, folded once the signup is started. */
.signup-guide {
    padding: 0.75rem 1.25rem;
}

.signup-guide-body {
    padding-top: 0.75rem;
}

/* The last row of the signup page: Spara and Färdigmarkera anmälan. */
.signup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #d5dbe5;
}

@media (min-width: 768px) {
    .signup-actions {
        justify-content: flex-end;
    }
}

/* Every part is Klar but the signup is not färdigmarkerad: the row stands out. */
.signup-actions-ready {
    padding: 1rem 1.25rem;
    border: 1px solid #b0d6ab;
    border-radius: 0.75rem;
    background-color: #e4f1e2;
}

/* Narrow screens: smaller part headers so the first field comes sooner. The toggle keeps its text for
   screen readers but shows only the arrow. */
@media (max-width: 575.98px) {
    .signup-section-header {
        padding: 0.625rem 0.875rem;
        flex-wrap: nowrap !important;
    }

    .signup-section-header h2 {
        font-size: 1.1rem;
    }

    .signup-section-body {
        padding: 1rem 0.875rem;
    }

    .signup-section-footer {
        padding: 0.625rem 0.875rem;
    }

    .section-toggle .toggle-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .signup-guide {
        padding: 0.625rem 0.875rem;
    }
}

/* Bootstrap's badge is 0.75em, which is 11 px on a 15 px body. */
.badge {
    --bs-badge-font-size: 0.8125rem;
}

/* Key figures: a big number in marin on sand, with a short text in dark grey. */
.key-figure {
    background-color: #faf2e8;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #3f4040;
}

.key-figure-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: #003d63;
}

.key-figure-title {
    font-weight: 600;
    color: #003d63;
}

.key-figure-note {
    font-size: 0.875rem;
    color: #3f4040;
}

/* One response rate chart: heading, current value, drawn line and a table view. */
.response-figure figcaption .figure-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #003d63;
}

.response-figure figcaption .figure-note {
    font-size: 0.875rem;
    color: #3f4040;
    margin-bottom: 0.5rem;
}

.response-chart {
    display: block;
    width: 100%;
    height: auto;
}

/* The bar of a response rate: the same width and colour on every row. */
.rate-bar {
    display: inline-block;
    flex: 0 0 6rem;
    width: 6rem;
    height: 0.625rem;
    background-color: #ffffff;
    border-radius: 0.3125rem;
    overflow: hidden;
}

.rate-bar > span {
    display: block;
    height: 100%;
    background-color: #003d63;
    border-radius: 0.3125rem;
}

.rate-bar-text {
    min-width: 3rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    /* Narrow screens: a shorter bar and tighter cells, so the response table fits without sideways scrolling. */
    .rate-bar {
        flex-basis: 2.5rem;
        width: 2.5rem;
    }

    .sortable-rates th,
    .sortable-rates td {
        padding: 0.4rem 0.3rem;
        font-size: 0.875rem;
    }
}

/* The lists of municipalities (MUCF, Lysio, region): chips, phase dots, agreement icons and a calmer table. */
.lysio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lysio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background-color: #dee9fc;
    color: #003d63;
    text-decoration: none;
    font-size: 0.875rem;
}

.lysio-chip:hover {
    background-color: #bdd3f9;
    color: #003d63;
}

.lysio-chip.active {
    background-color: #003d63;
    color: #fff;
}

.lysio-chip-empty {
    background-color: #f0f3fb;
    color: #3f4040;
}

.lysio-chip .agreement-signed-on-chip {
    color: #386532;
}

.lysio-chip.active .agreement-signed-on-chip {
    color: #b0d6ab;
}

.lysio-list {
    --bs-table-bg: transparent;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
}

.lysio-list > :not(caption) > * > * {
    padding: 0.85rem 1rem;
    border-bottom-width: 0;
}

/* White and sand instead of sand and light blue: the same profile, a calmer list. */
.lysio-list.lysio-table-head > tbody > tr:nth-child(odd) > * {
    background-color: #fff;
}

.lysio-list.lysio-table-head > tbody > tr:nth-child(even) > * {
    background-color: #faf2e8;
}

.lysio-list.lysio-table-head > tbody > tr:last-child > * {
    border-bottom: 2px solid #faf2e8;
}

.lysio-list > thead > tr > th:first-child {
    border-top-left-radius: 0.75rem;
}

.lysio-list > thead > tr > th:last-child {
    border-top-right-radius: 0.75rem;
}

.lysio-list.lysio-table-head > tbody > tr:hover > * {
    background-color: #dee9fc;
    box-shadow: inset 0 -1px 0 #bdd3f9, inset 0 1px 0 #bdd3f9;
}

.lysio-list.lysio-table-head > tbody > tr:hover > td:first-child {
    box-shadow: inset 4px 0 0 #003d63, inset 0 -1px 0 #bdd3f9, inset 0 1px 0 #bdd3f9;
}

.lysio-search {
    width: auto;
    min-width: 0;
    max-width: 20rem;
    flex: 1 1 12rem;
}

.lysio-list a {
    color: #003d63;
    text-underline-offset: 0.2em;
}

.phase-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.phase-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 2px solid #003d63;
    background-color: transparent;
    box-sizing: content-box;
}

.phase-dot.done {
    background-color: #003d63;
}

.phase-dot.current {
    background-color: #ef7764;
    border-color: #ef7764;
}

.phase-name {
    font-size: 0.875rem;
}

.agreement-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.agreement-signed {
    color: #386532;
}

.agreement-sent {
    color: #003d63;
}

.agreement-none {
    color: #6c757d;
}

.agreement-rejected {
    color: #9a2110;
}

.lysio-badge-waiting {
    background-color: #fce8a0;
    color: #003d63;
}

/* The number of waiting questions is a link to Tilläggsfrågor for the municipality. */
a.lysio-badge-waiting {
    text-decoration: none;
}

a.lysio-badge-waiting:hover,
a.lysio-badge-waiting:focus-visible {
    background-color: #f7d66a;
    color: #003d63;
}

.lysio-list-card {
    background-color: #faf2e8;
}

.signup-progress {
    font-size: 0.875rem;
}

.signup-progress-done {
    color: #386532;
    font-weight: 600;
}

.progress-track {
    display: inline-block;
    width: 4.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: #bdd3f9;
    overflow: hidden;
}

.progress-fill {
    display: block;
    height: 100%;
    background-color: #003d63;
}

/* The next step of the signup under the bar, in the same words as the start page. */
.progress-next {
    font-size: 0.8125rem;
    color: #3f4040;
}

/* Lysio att göra: what waits for Lysio, only on Lysio's list. */
.lysio-todo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #003d63;
}

.lysio-todo .bi {
    color: #ef7764;
}

/* It leads to the box Nästa steg för Lysio on Lysio's page: underlined only on hover, like the chips. */
a.lysio-todo {
    text-decoration: none;
}

a.lysio-todo:hover,
a.lysio-todo:focus-visible {
    color: #003d63;
    text-decoration: underline;
}

/* Lysio's page for one municipality: the tasks in phase order, one short line each. Done has a forest green
   check, the next step a marin arrow, ongoing (the period while the collection runs) a marin hourglass on light
   blue, later a grey clock. */
.lysio-tasks {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.lysio-task {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.875rem;
    background-color: #faf2e8;
}

.lysio-task-next {
    background-color: #dee9fc;
}

.lysio-task-ongoing {
    background-color: #dee9fc;
}

.lysio-task-later {
    background-color: #f2f2f2;
    color: #3f4040;
}

.lysio-task-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: #ffffff;
    color: #003d63;
}

.lysio-task-done .lysio-task-icon {
    color: #386532;
}

.lysio-task-later .lysio-task-icon {
    color: #3f4040;
}

.lysio-task-body {
    min-width: 0;
}

.lysio-task-title {
    margin: 0.15rem 0 0.15rem;
    font-size: 1rem;
    font-weight: 600;
    color: #003d63;
}

.lysio-task-status {
    overflow-wrap: anywhere;
}

/* The way back to Lysio's page from the municipality's pages. */
.lysio-back-link {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background-color: #dee9fc;
    color: #003d63;
    font-weight: 600;
    text-decoration: none;
}

.lysio-back-link:hover,
.lysio-back-link:focus-visible {
    background-color: #bdd3f9;
    color: #003d63;
}

/* The map of registered municipalities on the start page (templates/public/start.html, static/js/start_map.js). */
.start-map-wrap {
    position: relative;
    max-width: 24rem;
    margin: 0 auto;
}

.start-map {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
}

.start-map-area {
    stroke: #fff;
    stroke-width: 0.5px;
    stroke-linejoin: round;
    /* The borders keep their thickness when the map is zoomed (start_map_zoom.js). */
    vector-effect: non-scaling-stroke;
    cursor: default;
}

.start-map-area.is-registered,
.start-map-key.is-registered {
    fill: #003d63;
    background-color: #003d63;
}

.start-map-area.is-open,
.start-map-key.is-open {
    fill: #dfe3e8;
    background-color: #dfe3e8;
}

/* The municipality under the pointer, in focus or tapped is filled orange; the white borders stay as they are. */
.start-map-area:hover,
.start-map-area:focus,
.start-map-area.is-active {
    fill: #ef7764;
    outline: none;
}

/* The zoom controls, on top of the map in its top left corner, where there is only sea and Norway. */
.start-map-controls {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.start-map-controls[hidden] {
    display: none;
}

.start-map-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #adb5bd;
    border-radius: 0.375rem;
    background-color: #fff;
    color: #003d63;
    font-size: 1.25rem;
    line-height: 1;
}

.start-map-button:hover:not(:disabled) {
    background-color: #dee9fc;
}

.start-map-button:focus-visible {
    outline: 3px solid #ef7764;
    outline-offset: 2px;
}

.start-map-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.start-map-wrap.is-dragging .start-map-area {
    cursor: grabbing;
}

.start-map-wrap.is-zoomed .start-map-area {
    cursor: grab;
}

.start-map-skip:focus {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.start-map-key {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #adb5bd;
    vertical-align: -0.15rem;
    margin-right: 0.25rem;
}

.start-map-tip {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    max-width: 14rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
    background-color: #212529;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.3;
}

.start-map-tip[hidden] {
    display: none;
}

/* The start page layout (templates/public/start.html): one column below lg, in the order box, map, links; from lg the
   map is the left column and the box with the links under it the right one. */
.start-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    max-width: 72rem;
}

@media (min-width: 992px) {
    .start-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "map hero"
            "map handbook"
            "map links";
        grid-template-rows: auto auto 1fr;
        column-gap: 3rem;
        row-gap: 2rem;
    }

    .start-hero {
        grid-area: hero;
    }

    .start-handbook {
        grid-area: handbook;
    }

    .start-map-section {
        grid-area: map;
    }

    .start-links {
        grid-area: links;
    }
}

/* The type scale of the start page, the same in every box: one size and weight for the headings, one size for the text
   (also the small lines under a button and the legend of the map), one size for the buttons in the boxes. Only the big
   button (Anmäl kommunen or Logga in) and the number in the circle are larger. */
.start-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.start-text {
    font-size: 1rem;
    line-height: 1.5;
}

.start-button {
    --bs-btn-font-size: 1.125rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
}

.start-button-main {
    font-size: 1.5rem;
    font-weight: 500;
    padding: 1rem 3rem;
}

/* The handbook box: the buttons are as wide as the text needs, centred, and Tidigare data (disabled) keeps its place. */
.start-handbook-buttons {
    max-width: 20rem;
    margin: 0 auto;
}

.start-previous-wrap {
    display: block;
    cursor: not-allowed;
}

.start-previous-wrap:focus-visible {
    outline: 3px solid #ef7764;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.start-previous-wrap .btn:disabled {
    pointer-events: none;
}

/* The number of registered municipalities: the number alone in a round circle that grows with its digits (three fit),
   and the rest of the sentence beside it. */
.start-count {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.start-count-circle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 5rem;
    aspect-ratio: 1 / 1;
    padding: 0 1rem;
    border-radius: 50%;
    background-color: #003d63;
    color: #fff;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}


/* The phase menu: one box per phase, the only navigation between the pages of a registration.
   Narrow: Start on its own row and the phases in a grid of two (phones) or three columns, so nothing
   scrolls sideways. Wide: one row, every box as wide as the others unless its text needs more. If a long
   date ever makes the row too wide, the last box wraps to a new row instead of scrolling. */
.phase-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.phase-menu-item {
    display: flex;
    min-width: 0;
}

.phase-menu-start {
    grid-column: 1 / -1;
}

@media (min-width: 576px) {
    .phase-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Below md the boxes are folded behind the row of #phase-compact, which has its own Start, so the Start box
   is not shown twice. From md up the boxes are always shown, whatever the collapse state. */
@media (max-width: 767.98px) {
    .phase-menu-start {
        display: none;
    }

    .phase-menu.show,
    .phase-menu.collapsing {
        margin-top: 0.5rem;
    }
}

@media (min-width: 768px) {
    .phase-menu.collapse:not(.show) {
        display: grid;
    }
}

.phase-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.5rem;
    border-radius: 0.875rem;
    background-color: #faf2e8;
    color: #003d63;
}

.phase-compact-start {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.625rem;
    color: #003d63;
    font-weight: 600;
    text-decoration: none;
}

.phase-compact-start:hover,
.phase-compact-start:focus-visible {
    background-color: #dee9fc;
    color: #003d63;
}

.phase-compact-start:focus-visible {
    outline: 3px solid #5991f0;
    outline-offset: 2px;
}

.phase-compact-start-active,
.phase-compact-start-active:hover,
.phase-compact-start-active:focus-visible {
    background-color: #003d63;
    color: #ffffff;
}

.phase-compact-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.25;
}

.phase-compact-toggle {
    flex: 0 0 auto;
    background-color: #ffffff;
}

.phase-compact-toggle .bi-chevron-down {
    display: inline-block;
    transition: transform 0.2s ease;
}

.phase-compact-toggle:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .phase-compact-toggle .bi-chevron-down {
        transition: none;
    }
}

@media (min-width: 1200px) {
    /* Eight boxes in one row: Start, 1a and 1b (the two tabs of phase 1, A1, a little wider) and phases 2 to 6.
       The names may wrap, so the row never needs a second line. */
    .phase-menu,
    .phase-menu.collapse:not(.show) {
        display: grid;
        grid-template-columns: auto 1.35fr 1.35fr repeat(5, minmax(0, 1fr));
    }

    .phase-menu-item {
        min-width: 0;
    }

    .phase-menu-start {
        grid-column: auto;
    }

    .phase-step-status {
        white-space: nowrap;
    }

    /* The dates may wrap, so a box does not grow with them. */
    .phase-step-dates {
        max-width: 8rem;
    }
}

.phase-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.875rem;
    background-color: #faf2e8;
    color: #003d63;
    text-decoration: none;
    line-height: 1.25;
}

.phase-menu-start .phase-step {
    width: auto;
    min-height: 0;
    padding: 0.45rem 0.9rem;
}

@media (min-width: 1200px) {
    .phase-menu-start .phase-step {
        min-height: 3.75rem;
    }
}

a.phase-step:hover,
a.phase-step:focus-visible {
    background-color: #dee9fc;
    color: #003d63;
}

a.phase-step:focus-visible {
    outline: 3px solid #5991f0;
    outline-offset: 2px;
}

.phase-step-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.phase-step-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.phase-step-status {
    font-size: 0.8125rem;
}

/* The dates of the phase (phases.phase_dates) in small text under the name, in every state. They may wrap. */
.phase-step-dates {
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.phase-card-dates {
    font-size: 0.875rem;
    color: #4a4a4a;
}

/* Done: sand with a forest green check (about 6:1 against sand). */
.phase-step-done .phase-step-status .bi {
    color: #386532;
}

/* Passed but still waiting for the municipality (counts not approved): sand without a check and a red line
   at the left. Red is decoration, never text. */
.phase-step-reminder {
    box-shadow: inset 4px 0 0 #ef7764;
}

/* The phase the municipality is in: light blue with a red line at the bottom. Red is decoration, never text. */
.phase-step-current {
    background-color: #dee9fc;
    box-shadow: inset 0 -4px 0 #ef7764;
}

a.phase-step-current:hover,
a.phase-step-current:focus-visible {
    background-color: #bdd3f9;
}

/* Not open yet: grey but readable, dark grey on light grey is about 9:1. */
.phase-step-later {
    background-color: #f2f2f2;
    color: #3f4040;
    cursor: default;
}

.phase-step-later .phase-step-name {
    font-weight: 500;
}

/* The page being viewed. */
.phase-step-active,
a.phase-step-active:hover,
a.phase-step-active:focus-visible {
    background-color: #003d63;
    color: #ffffff;
}

.phase-step-active .phase-step-number {
    background-color: #faf2e8;
    color: #003d63;
}

.phase-step-active.phase-step-done .phase-step-status .bi {
    color: #ffffff;
}

/* The start page: the card of the current phase and the short summary of the signup. */
.phase-card {
    background-color: #faf2e8;
    border-radius: 1.25rem;
}

.phase-card-eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: #003d63;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phase-card-step {
    color: #3f4040;
}

/* A reminder in a card on the start page or Lysio's page: white on sand, marine text, a red line at the left. */
.phase-card-notice {
    background-color: #ffffff;
    border-left: 4px solid #ef7764;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #003d63;
}

.phase-card-notice > .bi {
    flex: 0 0 auto;
}

.disclosure > summary {
    cursor: pointer;
    color: #003d63;
    font-weight: 600;
}

.signup-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

.signup-summary > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 1.5rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #f2f2f2;
}

.signup-summary dt {
    font-weight: 600;
    color: #003d63;
}

.signup-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .signup-summary > div {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}

/* The response rate as the big number of a card on Insamling for MUCF, Lysio and the region, below md. */
.collection-card-rate {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #003d63;
}

/* The rate per group in a card of Insamling, three side by side like the columns of the table. */
.collection-card-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.collection-card-groups dt {
    font-weight: 400;
}

.collection-card-groups dd {
    margin: 0;
    font-weight: 600;
}

/* Konton (Lysio's account page): the status of an account, where it came from and Ny. */
/* A field that cannot be changed (the contact person for everyone but the contact person and Lysio, and the
   names while the agreement is sent) looks locked, so nobody tries to type in it. */
.form-control[readonly] {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}

/* Mitt konto: the account, Användare i <kommun> and Byt lösenord in one column, in that order, so the users come
   before the password in narrow width. With the users, from lg and up the account and the password are the left
   column and the users the right one. */
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .account-layout-users {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        /* A long list of users makes the second row taller, never the gap under the account. */
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "facts users"
            "password users";
        column-gap: 1.5rem;
    }

    .account-layout-users .account-layout-facts { grid-area: facts; }
    .account-layout-users .account-layout-users-part { grid-area: users; }
    .account-layout-users .account-layout-password { grid-area: password; }
}

.account-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.account-status-aktiv {
    background-color: #dcebd9;
    color: #386532;
}

.account-status-inbjuden {
    background-color: #dee9fc;
    color: #003d63;
}

.account-status-vantar {
    background-color: #fce8a0;
    color: #003d63;
}

.account-status-sparrad {
    background-color: #f6d6d0;
    color: #9a2110;
}

/* Borttagen anmälan: Lysio removed the registration the account made through Anmäl er kommun. */
.account-status-borttagen {
    background-color: #e9e6e1;
    color: #4a4a4a;
}

.account-origin-self {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #003d63;
}

/* An address in Konton breaks after the @ or before a dot (<wbr> from account_admin.email_parts), never inside a word.
   break-word only cuts a part that is longer than the whole line, which an address in the table never is. */
.account-email {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Kontrollera adressen: the domain of an account that registered itself does not look like the municipality's. */
.account-check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background-color: #fce8a0;
    color: #003d63;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

/* In a card (below lg) the explanation is a line under the mark, since a phone has no hover for the title. */
.account-check-card .account-check {
    cursor: default;
}

.account-check-card {
    margin-bottom: 0.5rem;
}

.account-new {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background-color: #003d63;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mitt konto, Användare i <kommun> (K5), and Konton: the contact person among the municipality's accounts. A contact
   person who has not accepted the invitation yet has a dashed frame. */
.account-contact {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px #003d63;
    color: #003d63;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.account-contact-pending {
    box-shadow: none;
    outline: 1px dashed #003d63;
    outline-offset: -1px;
}