[hidden] {
    display: none !important;
}

:root {
    /* lets the side navigation animate between its content width and the collapsed width */
    interpolate-size: allow-keywords;
    --app-font-display: 'Google Sans', 'Google Sans Text', Roboto, system-ui, sans-serif;
    --app-font-text: 'Google Sans Text', 'Google Sans', Roboto, system-ui, sans-serif;
    --app-bar-height: 4rem;
    --side-nav-width: 16rem;
    --side-nav-collapsed-width: 4.5rem;

    /* one step lighter than the MD3 defaults across every component */
    --mdui-typescale-title-medium-weight: 400;
    --mdui-typescale-title-small-weight: 400;
    --mdui-typescale-label-medium-weight: 400;
    --mdui-typescale-label-small-weight: 400;

    /* waste tints share the tone of the tonal buttons (MD3 secondary container) */
    --waste-residual-bg: #f6e1ef;
    --waste-residual-fg: #4f1d46;
    --waste-paper-bg: #f3eacb;
    --waste-paper-fg: #463a10;
    --waste-organic-bg: #dcefd6;
    --waste-organic-fg: #1f3b19;
    --waste-plastic-bg: #e5def8;
    --waste-plastic-fg: #33245e;
    --waste-glass-bg: #d8ebf5;
    --waste-glass-fg: #143847;
    --waste-garden-bg: #dfecd0;
    --waste-garden-fg: #263c17;
}

@media (prefers-color-scheme: dark) {
    :root {
        --waste-residual-bg: #573a51;
        --waste-residual-fg: #f6e1ef;
        --waste-paper-bg: #534a2b;
        --waste-paper-fg: #f3eacb;
        --waste-organic-bg: #37502f;
        --waste-organic-fg: #dcefd6;
        --waste-plastic-bg: #463e66;
        --waste-plastic-fg: #e5def8;
        --waste-glass-bg: #2f4f5c;
        --waste-glass-fg: #d8ebf5;
        --waste-garden-bg: #3f5232;
        --waste-garden-fg: #dfecd0;
    }
}

body {
    margin: 0;
    font-family: var(--app-font-text);
    background-color: rgb(var(--mdui-color-surface));
    color: rgb(var(--mdui-color-on-surface));
}

a {
    color: rgb(var(--mdui-color-primary));
}

strong {
    font-weight: 500;
}

/* top app bar, Google console style: flat surface, hairline at the bottom */

.app-bar,
.app-bar[scrolling] {
    height: var(--app-bar-height);
    /* the menu button and the navigation icons share the same axis, 2.25rem from the left edge */
    padding: 0 0.5rem 0 1rem;
    gap: 0.25rem;
    align-items: center;
    background-color: rgb(var(--mdui-color-surface));
    box-shadow: none;
    border-bottom: 0.0625rem solid rgb(var(--mdui-color-outline-variant));
}

mdui-card[variant="outlined"] {
    border-color: rgb(var(--mdui-color-outline-variant));
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0 0.5rem;
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.brand-name {
    font-family: var(--app-font-display);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.app-bar-spacer {
    flex-grow: 1;
}

/* .tag is declared later in the file, the compound selector keeps the pill shape */
.tag.next-pickup {
    gap: 0.625rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    padding: 0 1.25rem 0 0.5rem;
    border-radius: var(--mdui-shape-corner-full);
    background-color: rgb(var(--mdui-color-surface-container-high));
    color: rgb(var(--mdui-color-on-surface));
    font-family: var(--app-font-display);
    font-weight: var(--mdui-typescale-label-large-weight);
}

.waste-dots {
    display: inline-flex;
}

/* one coloured circle per waste type, slightly overlapped like an avatar group */
.waste-dot {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    border: 0.0625rem solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 0.125rem rgb(var(--mdui-color-surface-container-high));
}

.waste-dot + .waste-dot {
    margin-left: -0.375rem;
}

.waste-dot mdui-icon {
    font-size: 1rem;
}

/* as wide as the field; never taller than the free side of the screen, which can then hold it below or above the field */
.waste-types-menu {
    min-width: 0;
    max-width: none;
    max-height: calc(50vh - 3rem);
    overflow-y: auto;
}

.waste-type-option {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.waste-types-menu .waste-dot {
    box-shadow: none;
}

[data-waste-types-field] {
    cursor: pointer;
}

@media (max-width: 599.98px) {
    .tag.next-pickup {
        padding: 0 0.5rem;
    }

    .next-pickup-label {
        display: none;
    }
}

.account-avatar {
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    background-color: transparent;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* side navigation: expanded with labels, collapsed to icons */

.side-nav {
    box-sizing: border-box;
    width: max-content;
    padding: 0.5rem 0.75rem;
    overflow-x: hidden;
    background-color: rgb(var(--mdui-color-surface));
    transition: width var(--mdui-motion-duration-medium2) var(--mdui-motion-easing-standard);
}

.side-nav--collapsed {
    width: var(--side-nav-collapsed-width);
}

/* as wide as the longest label, every item stretches to that width */
.nav-list {
    flex: none;
    width: max-content;
    padding: 0;
}

/* the tooltip wrapper is inline by default */
.nav-list mdui-tooltip {
    display: block;
}

.nav-item {
    --shape-corner: var(--mdui-shape-corner-full);
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
    font-family: var(--app-font-display);
    white-space: nowrap;
}

.nav-item::part(container) {
    padding-left: 0.75rem;
}

.nav-item[active] {
    color: rgb(var(--mdui-color-on-secondary-container));
}

.side-nav--collapsed .nav-item::part(body) {
    display: none;
}

.side-nav--collapsed .nav-item {
    width: 3rem;
}

.side-nav--collapsed .nav-item::part(container) {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.side-nav--collapsed .nav-item::part(icon) {
    margin: 0;
}

.mobile-nav {
    width: var(--side-nav-width);
    padding: 0.5rem 0.75rem;
}

.mobile-nav-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 3.5rem;
    padding: 0 1rem;
}

@media (max-width: 599.98px) {
    .side-nav {
        display: none;
    }

    .page {
        padding: 1rem;
    }
}

/* page */

.page {
    box-sizing: border-box;
    width: 100%;
    padding: 1.5rem 1.5rem 2rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title {
    margin: 0.75rem 0 0;
    font-family: var(--app-font-display);
    font-size: 1.375rem;
    font-weight: 400;
}

.section-title:first-child {
    margin-top: 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.section-header:first-child {
    margin-top: 0;
}

.section-header .section-title {
    margin: 0;
}

/* near the right edge the fixed popup shrinks and wraps a short sentence on three lines */
.single-line-tooltip::part(popup) {
    max-width: none;
    white-space: nowrap;
}

.banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--mdui-shape-corner-medium);
    background-color: rgb(var(--mdui-color-secondary-container));
    color: rgb(var(--mdui-color-on-secondary-container));
}

.banner > span {
    flex-grow: 1;
}

.banner--error {
    background-color: rgb(var(--mdui-color-error-container));
    color: rgb(var(--mdui-color-on-error-container));
}

.banner--info {
    background-color: rgb(var(--mdui-color-surface-container));
    color: rgb(var(--mdui-color-on-surface-variant));
}

/* pickups */

.pickup {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
}

.pickup--tomorrow {
    background-color: rgb(var(--mdui-color-primary-container));
    color: rgb(var(--mdui-color-on-primary-container));
}

.pickup-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pickup-date {
    font-family: var(--app-font-display);
    font-size: 1.125rem;
    font-weight: 400;
}

.pickup-date::first-letter {
    text-transform: uppercase;
}

.pickup-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pickup-schedule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--mdui-typescale-body-medium-size);
    color: rgb(var(--mdui-color-on-surface-variant));
}

.pickup--tomorrow .pickup-schedule {
    color: inherit;
}

.pickup-schedule mdui-icon {
    font-size: 1.125rem;
}

/* the exposure note is secondary to the collection hours */
.pickup-schedule-note {
    opacity: 0.65;
}

.pickup-schedule-note::before {
    content: '·';
    margin-right: 0.5rem;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    padding: 0 0.75rem 0 0.5rem;
    box-sizing: border-box;
    border-radius: var(--mdui-shape-corner-small);
    font-size: var(--mdui-typescale-label-large-size);
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

.tag mdui-icon {
    font-size: 1.125rem;
}

.tonight-tag {
    height: 2.5rem;
    padding: 0 1.25rem 0 1rem;
    border-radius: var(--mdui-shape-corner-full);
    font-family: var(--app-font-display);
    font-weight: var(--mdui-typescale-label-large-weight);
    background-color: rgb(var(--mdui-color-primary));
    color: rgb(var(--mdui-color-on-primary));
}

/* same shape and weight as the tonal buttons */
.waste {
    height: 2.5rem;
    padding: 0 1.25rem 0 1rem;
    border-radius: var(--mdui-shape-corner-full);
    background-color: rgb(var(--mdui-color-secondary-container));
    color: rgb(var(--mdui-color-on-secondary-container));
    font-family: var(--app-font-display);
    font-weight: var(--mdui-typescale-label-large-weight);
    letter-spacing: var(--mdui-typescale-label-large-tracking);
}

.waste--residual { background-color: var(--waste-residual-bg); color: var(--waste-residual-fg); }
.waste--paper { background-color: var(--waste-paper-bg); color: var(--waste-paper-fg); }
.waste--organic { background-color: var(--waste-organic-bg); color: var(--waste-organic-fg); }
.waste--plastic { background-color: var(--waste-plastic-bg); color: var(--waste-plastic-fg); }
.waste--glass { background-color: var(--waste-glass-bg); color: var(--waste-glass-fg); }
.waste--garden { background-color: var(--waste-garden-bg); color: var(--waste-garden-fg); }

.empty-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    color: rgb(var(--mdui-color-on-surface-variant));
}

/* settings */

.settings-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
}

.settings-card form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* fields keep 1rem between them, the actions sit closer to the last helper text */
.settings-card form .form-row + .form-row {
    margin-top: 0.5rem;
}

.settings-card .form-actions {
    flex-direction: row;
}

.settings-text {
    margin: 0;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.form-row mdui-select,
.form-row mdui-text-field {
    width: 100%;
}

/* the clear button is secondary to the value: fainter and a little smaller */
mdui-text-field::part(clear-button) {
    opacity: 0.6;
}

mdui-text-field::part(clear-icon) {
    font-size: 1.25rem;
}

/* helper text starts at the left edge of the field box, a little fainter than the value */
mdui-text-field::part(supporting),
mdui-select::part(text-field__supporting) {
    padding-left: 0;
    padding-right: 0;
}

mdui-text-field::part(helper),
mdui-select::part(text-field__helper) {
    color: rgba(var(--mdui-color-on-surface-variant), 0.72);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.settings-card .form-actions--with-note {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.form-actions--with-note [data-primary-submit] {
    margin-left: auto;
}

.info-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    box-sizing: border-box;
    border-radius: var(--mdui-shape-corner-small);
    background-color: rgb(var(--mdui-color-surface-container-high));
    color: rgb(var(--mdui-color-on-surface-variant));
    font-size: var(--mdui-typescale-body-medium-size);
    line-height: var(--mdui-typescale-body-medium-line-height);
}

.info-tag mdui-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

/* an icon button beside a field, centred on the 3.5rem field box rather than on box plus helper */
.field-with-action {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.field-with-action .field-action {
    margin-top: 0.5rem;
}

.field-with-action--centered {
    align-items: center;
}

.field-with-action--centered .field-action {
    margin-top: 0;
}

.field-with-action-field {
    flex: 1 1 auto;
    min-width: 0;
}

.field-with-action-field mdui-select {
    width: 100%;
}

.form-errors {
    margin-top: 0.25rem;
    color: rgb(var(--mdui-color-error));
    font-size: var(--mdui-typescale-body-small-size);
}

.form-error {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.form-error mdui-icon {
    font-size: 1rem;
}

.field-progress {
    width: 1.5rem;
    height: 1.5rem;
}

.searchable {
    position: relative;
}

.search-results {
    margin-top: 0.25rem;
    border: 0.0625rem solid rgb(var(--mdui-color-outline-variant));
    border-radius: var(--mdui-shape-corner-small);
    background-color: rgb(var(--mdui-color-surface-container-low));
    max-height: 20rem;
    overflow-y: auto;
}

/* time picker dialog, Material 3 "time input" */

[data-time-picker],
[data-time-picker]::part(input) {
    cursor: pointer;
}

.time-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.time-input-part {
    box-sizing: border-box;
    width: 6rem;
    height: 4.5rem;
    border: 0.125rem solid transparent;
    border-radius: var(--mdui-shape-corner-small);
    outline: none;
    background-color: rgb(var(--mdui-color-surface-container-highest));
    color: rgb(var(--mdui-color-on-surface));
    font-family: var(--app-font-display);
    font-size: var(--mdui-typescale-display-medium-size);
    line-height: 1;
    text-align: center;
    caret-color: transparent;
}

.time-input-part:focus {
    border-color: rgb(var(--mdui-color-primary));
    background-color: rgb(var(--mdui-color-primary-container));
    color: rgb(var(--mdui-color-on-primary-container));
}

.time-input-separator {
    font-family: var(--app-font-display);
    font-size: var(--mdui-typescale-display-medium-size);
    color: rgb(var(--mdui-color-on-surface));
}

.time-input-labels {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    margin-top: 0.5rem;
    font-size: var(--mdui-typescale-body-small-size);
    color: rgb(var(--mdui-color-on-surface-variant));
}

.time-input-labels span {
    width: 6rem;
    text-align: center;
}

/* Google Home tutorial */

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem 1rem 4rem;
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--app-font-display);
    font-weight: var(--mdui-typescale-label-large-weight);
    /* same tone as the tonal buttons */
    background-color: rgb(var(--mdui-color-secondary-container));
    color: rgb(var(--mdui-color-on-secondary-container));
}

.step-title {
    margin: 0.25rem 0 0.5rem;
    font-family: var(--app-font-display);
    font-size: 1rem;
    font-weight: 500;
}

.step p {
    margin: 0;
    line-height: 1.5;
}

.copy-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: var(--mdui-shape-corner-small);
    background-color: rgb(var(--mdui-color-surface-container));
}

.copy-text {
    flex-grow: 1;
    font-family: inherit;
}

.google-home-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--app-font-display);
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.google-home-lead {
    color: rgb(var(--mdui-color-primary));
}

.google-home-title {
    flex-grow: 1;
}

.google-home-chevron {
    transition: transform var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);
}

.google-home-summary[aria-expanded="true"] .google-home-chevron {
    transform: rotate(180deg);
}

.google-home-tutorial {
    padding-top: 1rem;
    border-top: 0.0625rem solid rgb(var(--mdui-color-outline-variant));
}

/* login */

.login-page {
    --sky-top: #232058;
    --sky-middle: #5d4f9a;
    --sky-horizon: #e9a98f;
    --sky-star: #fffaf0;
    --sky-moon: #fdf6e3;
    --sky-mountains-far: #3a3170;
    --sky-mountains-near: #221d4a;
    background-color: var(--sky-top);
}

@media (prefers-color-scheme: dark) {
    .login-page {
        --sky-top: #07061a;
        --sky-middle: #171440;
        --sky-horizon: #3d2b55;
        --sky-moon: #e8e2ff;
        --sky-mountains-far: #15123a;
        --sky-mountains-near: #0a0920;
    }
}

.login-sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sky-top { stop-color: var(--sky-top); }
.sky-middle { stop-color: var(--sky-middle); }
.sky-horizon { stop-color: var(--sky-horizon); }
.moon-glow-inner { stop-color: var(--sky-moon); stop-opacity: 0.35; }
.moon-glow-outer { stop-color: var(--sky-moon); stop-opacity: 0; }
.sky-moon { fill: var(--sky-moon); }
.sky-mountains-far { fill: var(--sky-mountains-far); }
.sky-mountains-near { fill: var(--sky-mountains-near); }

.sky-star {
    fill: var(--sky-star);
    opacity: 0.85;
    animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 0.2; }
}

/* each shooting star crosses its own rotated axis in the first tenth of a long cycle, then stays hidden */
.shooting-star {
    opacity: 0;
    animation: shoot 15s ease-out infinite;
}

.shooting-star-head { stop-color: var(--sky-star); stop-opacity: 1; }
.shooting-star-end { stop-color: var(--sky-star); stop-opacity: 0; }

@keyframes shoot {
    0% { opacity: 0; transform: translateX(0); }
    1% { opacity: 1; }
    8% { opacity: 0; transform: translateX(420px); }
    100% { opacity: 0; transform: translateX(420px); }
}

.sky-moon-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: moon-pulse 6s ease-in-out infinite;
}

.sky-moon-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: moon-glow 6s ease-in-out infinite;
}

@keyframes moon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
}

@keyframes moon-glow {
    /* the halo never fades out: it only brightens and widens a little */
    0%, 100% { opacity: 0.8; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    .sky-star,
    .shooting-star,
    .sky-moon-pulse,
    .sky-moon-glow {
        animation: none;
    }
}

.login {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    box-sizing: border-box;
}

.login-card {
    width: min(100%, 25rem);
    padding: 2.5rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.login-logo {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

.login-title {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: 1.5rem;
    font-weight: 400;
}

.login-subtitle {
    margin: 0;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.login-button {
    width: 100%;
    margin-top: 0.5rem;
}

.login-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 0.0625rem solid rgb(var(--mdui-color-outline-variant));
    list-style: none;
}

.login-step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--mdui-typescale-body-small-size);
    color: rgb(var(--mdui-color-on-surface-variant));
}

.login-step-icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgb(var(--mdui-color-secondary-container));
    color: rgb(var(--mdui-color-on-secondary-container));
}

.login-step-icon mdui-icon {
    font-size: 1.25rem;
}

.login-step-arrow {
    padding-top: 0.5rem;
    color: rgb(var(--mdui-color-outline));
}

/* onboarding */

.onboarding {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.onboarding-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--app-bar-height);
    padding: 0 0.5rem 0 1rem;
}

.onboarding-main {
    box-sizing: border-box;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.onboarding-title {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}

.onboarding-intro {
    margin: 0 auto;
    max-width: 32rem;
    text-align: center;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.onboarding-step-title {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: 1.25rem;
    font-weight: 400;
}

/* numbered circles joined by a line, the done ones carry a check */
.stepper {
    display: flex;
    align-items: center;
    margin: 1rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.stepper-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--mdui-color-on-surface-variant));
    font-family: var(--app-font-display);
}

.stepper-step + .stepper-step::before {
    content: '';
    flex-shrink: 0;
    width: 2rem;
    height: 0.0625rem;
    margin: 0 0.5rem;
    background-color: rgb(var(--mdui-color-outline-variant));
}

.stepper-step:not(:last-child) {
    flex-grow: 0;
}

.stepper {
    justify-content: center;
}

.stepper-number {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0.0625rem solid rgb(var(--mdui-color-outline));
    border-radius: 50%;
    font-size: 0.875rem;
    box-sizing: border-box;
}

.stepper-number mdui-icon {
    font-size: 1.125rem;
}

.stepper-step--active,
.stepper-step--done {
    color: rgb(var(--mdui-color-on-surface));
}

.stepper-step--active .stepper-number,
.stepper-step--done .stepper-number {
    border-color: transparent;
    background-color: rgb(var(--mdui-color-secondary-container));
    color: rgb(var(--mdui-color-on-secondary-container));
}

.stepper-step--active .stepper-label {
    font-weight: 500;
}

@media (max-width: 599.98px) {
    .stepper-step + .stepper-step::before {
        width: 1rem;
    }

    .onboarding-title {
        font-size: 1.625rem;
    }
}

.onboarding-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0 0.5rem;
    text-align: center;
}

.onboarding-ready-status {
    display: grid;
    place-items: center;
    height: 3.5rem;
}

.onboarding-ready-icon {
    font-size: 3.5rem;
    color: rgb(var(--mdui-color-primary));
}

.onboarding-ready-message {
    margin: 0;
    max-width: 28rem;
    color: rgb(var(--mdui-color-on-surface-variant));
}

.banner--with-action {
    flex-wrap: wrap;
}

/* icon and text stay together when the action wraps below them */
.banner-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 20rem;
}

.banner--with-action mdui-button {
    margin-left: auto;
}