@import '_content/FarmOS.Shared.UI/FarmOS.Shared.UI.xdzeti7kh1.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
    The admin shell. A desk surface: sidebar left, one content column, capped at 1280px so a
    table on a wide monitor does not stretch into something you have to track across with a
    finger.
*/

.page[b-a7akp1gv4n] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--fo-canvas);
}

.sidebar[b-a7akp1gv4n] {
    border-bottom: var(--fo-border) solid var(--fo-line);
    background: var(--fo-surface-1);
}

main[b-a7akp1gv4n] {
    flex: 1;
    min-width: 0;
}

.content[b-a7akp1gv4n] {
    max-width: 1280px;
    padding: var(--fo-s6) var(--fo-s4);
    margin-inline: auto;
}

@media (min-width: 841px) {
    .page[b-a7akp1gv4n] {
        flex-direction: row;
    }

    .sidebar[b-a7akp1gv4n] {
        position: sticky;
        top: 0;
        flex: none;
        width: 240px;
        height: 100vh;
        border-right: var(--fo-border) solid var(--fo-line);
        border-bottom: 0;
    }

    .content[b-a7akp1gv4n] {
        padding: var(--fo-s8) var(--fo-s6);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/*
    Steel, not a gradient. The chrome carries no saturated colour at all, so that green on
    this screen always means settled and never means "you are here".
*/

.nav-menu[b-06ve6z1ozr] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s4);
    height: 100%;
    padding: var(--fo-s4) var(--fo-s3);
}

.brand[b-06ve6z1ozr] {
    padding: 0 var(--fo-s2);
    color: var(--fo-ink);
    font-size: var(--fo-text-xl);
    font-weight: var(--fo-weight-heavy);
    letter-spacing: -0.02em;
    text-decoration: none;
}

/*
    The groups. Scrolls as one column so a long list still reaches Setup at the bottom, and the
    brand stays put above it.
*/
.groups[b-06ve6z1ozr] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s4);
    overflow-y: auto;
    scrollbar-width: thin;
}

section[b-06ve6z1ozr] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s1);
}

/*
    A label, not a heading in the visual sense: muted, small, and set in the chip's letterspacing
    so it reads as chrome rather than as content. The design system forbids all-caps for labels on
    content; this is navigation furniture, where it earns the scan.
*/
h2[b-06ve6z1ozr] {
    margin: 0;
    padding: 0 var(--fo-s3);
    color: var(--fo-muted);
    font-size: var(--fo-text-2xs);
    font-weight: var(--fo-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

ul[b-06ve6z1ozr] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

[b-06ve6z1ozr] .nav-link {
    display: flex;
    gap: var(--fo-s3);
    align-items: center;
    min-height: var(--fo-target-min);
    padding: var(--fo-s2) var(--fo-s3);
    border-left: 3px solid transparent;
    border-radius: 0 var(--fo-radius-control) var(--fo-radius-control) 0;
    color: var(--fo-secondary);
    font-weight: var(--fo-weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

[b-06ve6z1ozr] .nav-link:hover {
    background: var(--fo-surface-2);
    color: var(--fo-ink);
}

/*
    "You are here" is a steel emphasis — weight, a rule and a fill — not a colour. Colour is
    spent on state and there is nothing stateful about the page you happen to be looking at.
*/
[b-06ve6z1ozr] .nav-link.active {
    border-left-color: var(--fo-ink);
    background: var(--fo-surface-2);
    color: var(--fo-ink);
    font-weight: var(--fo-weight-bold);
}

[b-06ve6z1ozr] .fo-icon {
    flex: none;
    color: var(--fo-muted);
}

[b-06ve6z1ozr] .nav-link.active .fo-icon {
    color: var(--fo-ink);
}

/* Narrow: the list becomes a scrolling row rather than collapsing behind a toggle. */
@media (max-width: 840px) {
    .nav-menu[b-06ve6z1ozr] {
        gap: var(--fo-s2);
        padding: var(--fo-s3);
    }

    .groups[b-06ve6z1ozr] {
        flex-direction: row;
        gap: var(--fo-s4);
        overflow-x: auto;
        overflow-y: visible;
    }

    section[b-06ve6z1ozr] {
        flex: none;
    }

    ul[b-06ve6z1ozr] {
        flex-direction: row;
        gap: var(--fo-s2);
    }

    /* On a narrow window the headings stop being worth their line and become a quiet caption
       above the row they label. */
    h2[b-06ve6z1ozr] {
        padding: 0 var(--fo-s2);
    }

    [b-06ve6z1ozr] .nav-link {
        border-left: 0;
        border-bottom: 3px solid transparent;
        border-radius: var(--fo-radius-control);
    }

    [b-06ve6z1ozr] .nav-link.active {
        border-left-color: transparent;
        border-bottom-color: var(--fo-ink);
    }
}
/* /Components/Layout/OperatorBar.razor.rz.scp.css */
/*
    A quiet strip. It is not a state and it is not a warning in the ordinary case, so it carries
    no saturated colour — the exception is a surface that cannot identify anybody, which is a
    real problem and says so in held.
*/

.operator-bar[b-8djbhrl8lf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--fo-s3);
    padding: var(--fo-s2) var(--fo-s4);
    border-bottom: var(--fo-border) solid var(--fo-line);
    background: var(--fo-surface-1);
    font-size: var(--fo-text-sm);
}

.who[b-8djbhrl8lf] {
    color: var(--fo-secondary);
}

.who strong[b-8djbhrl8lf] {
    color: var(--fo-ink);
    font-weight: var(--fo-weight-medium);
}

/*
    Ordinary, never commit-green. Signing out is not an affirmative act on the record — it takes
    nothing back and settles nothing.
*/
.sign-out[b-8djbhrl8lf] {
    min-height: var(--fo-target-min);
}

.sign-in[b-8djbhrl8lf] {
    color: var(--fo-ink);
    font-weight: var(--fo-weight-medium);
}

.unconfigured[b-8djbhrl8lf] {
    color: var(--fo-held);
    font-weight: var(--fo-weight-medium);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/*
    The reconnect dialog.

    The selectors in the first two blocks are the framework's own state machine — the class
    names are set by ReconnectModal.razor.js — so they are reproduced exactly. Everything
    below them is skin.
*/

.components-reconnect-first-attempt-visible[b-88x0pn3dr7],
.components-reconnect-repeated-attempt-visible[b-88x0pn3dr7],
.components-reconnect-failed-visible[b-88x0pn3dr7],
.components-pause-visible[b-88x0pn3dr7],
.components-resume-failed-visible[b-88x0pn3dr7],
.components-rejoining-animation[b-88x0pn3dr7] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-retrying[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-failed[b-88x0pn3dr7],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-88x0pn3dr7] {
    display: block;
}

#components-reconnect-modal[b-88x0pn3dr7] {
    width: min(22rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: var(--fo-s6);
    border: var(--fo-border) solid var(--fo-line);
    border-radius: var(--fo-radius-card);
    background: var(--fo-surface-1);
    color: var(--fo-body);
}

#components-reconnect-modal[b-88x0pn3dr7]::backdrop {
    background: rgb(14 18 20 / 55%);
}

.components-reconnect-container[b-88x0pn3dr7] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s4);
    align-items: center;
}

#components-reconnect-modal p[b-88x0pn3dr7] {
    margin: 0;
    text-align: center;
}

/* Losing the server is a pending state, not a failure — it is usually about to come back. */
#components-reconnect-modal .components-reconnect-first-attempt-visible[b-88x0pn3dr7],
#components-reconnect-modal .components-reconnect-repeated-attempt-visible[b-88x0pn3dr7],
#components-reconnect-modal .components-pause-visible[b-88x0pn3dr7] {
    color: var(--fo-pending);
}

#components-reconnect-modal .components-reconnect-failed-visible[b-88x0pn3dr7],
#components-reconnect-modal .components-resume-failed-visible[b-88x0pn3dr7] {
    color: var(--fo-held);
}

/*
    Blazor injects this modal's markup itself, so these are real <button> elements rather than
    FluentButtons — the only place in the product where that is true outside the verb tiles.
    That makes this the one button rule worth keeping, and the one that had to be brought over
    to the new language by hand: it carried the old transparent-outline treatment, which would
    have made the reconnect prompt the only outlined button on any surface.
*/
#components-reconnect-modal button[b-88x0pn3dr7] {
    min-height: var(--fo-target-min);
    padding: var(--fo-s2) var(--fo-s6);
    border: var(--fo-border) solid transparent;
    border-radius: var(--fo-radius-control);
    background: var(--fo-quiet);
    color: var(--fo-ink);
    font-weight: var(--fo-weight-bold);
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-88x0pn3dr7] {
    filter: brightness(0.96);
}

/* The one animation on this surface: a pulse that says the attempt is still running. */
.components-rejoining-animation[b-88x0pn3dr7] {
    position: relative;
    width: 56px;
    height: 56px;
}

.components-rejoining-animation div[b-88x0pn3dr7] {
    position: absolute;
    border: 3px solid var(--fo-pending);
    border-radius: 50%;
    opacity: 1;
    animation: components-rejoining-animation-b-88x0pn3dr7 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-88x0pn3dr7] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-88x0pn3dr7 {
    0%, 4.9% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 28px;
        left: 28px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 56px;
        height: 56px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/Devices/Index.razor.rz.scp.css */
/* The register form on a card, its fields one column on a phone. */
.register[b-zjeu4xr5uc] {
    margin-bottom: var(--fo-s8);
}

.register h2[b-zjeu4xr5uc] {
    margin-top: 0;
}

.register .fo-card-body[b-zjeu4xr5uc] {
    display: grid;
    gap: var(--fo-s3);
}

.register[b-zjeu4xr5uc]  fluent-button {
    justify-self: start;
}
/* /Components/Pages/Admin/Herd/AnimalAction.razor.rz.scp.css */
/*
    One act on one animal. The act is the heading; the animal it is done to sits under it, in the
    same handle the record leads with - a goat's name, a rabbit's tag in mono.
*/

.action-head[b-xg3beunx0v] {
    display: grid;
    gap: var(--fo-s1);
    margin-bottom: var(--fo-s4);
}

.action-head h1[b-xg3beunx0v] {
    margin: 0;
}

.who[b-xg3beunx0v] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--fo-s1) var(--fo-s2);
    margin: 0;
}

.who .tag[b-xg3beunx0v] {
    white-space: nowrap;
    font-family: var(--fo-font-num);
    font-size: var(--fo-text-xl);
    font-weight: var(--fo-weight-bold);
    color: var(--fo-ink);
}

.who .tag.named[b-xg3beunx0v] {
    font-family: var(--fo-font-ui);
    letter-spacing: 0;
}

.who .name[b-xg3beunx0v] {
    color: var(--fo-secondary);
}

.who .name.is-tag[b-xg3beunx0v] {
    font-family: var(--fo-font-num);
}
/* /Components/Pages/Admin/Herd/Index.razor.rz.scp.css */
/* The herd desk: two entry panels, the cage wall, then the animals and their metrics. */

h1[b-vju81utbes] {
    margin-bottom: var(--fo-s6);
}

h2[b-vju81utbes] {
    margin-bottom: var(--fo-s3);
}

section[b-vju81utbes] {
    margin-bottom: var(--fo-s8);
}

.panel[b-vju81utbes] {
    padding: var(--fo-s4);
    border: var(--fo-border) solid var(--fo-line);
    border-radius: var(--fo-radius-card);
    background: var(--fo-surface-1);
}

/*
    Entry is a row that wraps, not a stacked form. These are short fields typed in sequence at
    a desk, and a column of eight would put the button below the fold for no reason.
*/
.form-row[b-vju81utbes] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-s3);
    align-items: end;
}

/*
    Fluent renders the field wrapper and the button inside child components, so these need
    ::deep to be reachable from an isolated stylesheet. Without it the rule compiles to a
    scoped selector that matches nothing and every field collapses to its content width.
*/
.form-row[b-vju81utbes]  fluent-field {
    flex: 1 1 9rem;
    min-width: 0;
}

.form-row[b-vju81utbes]  fluent-button {
    flex: 0 0 auto;
    min-height: var(--fo-target-min);
}

.cage-grid[b-vju81utbes] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--fo-s3);
}

/*
    The section head: the heading on the left, the two disclosure buttons on the right.

    They sit beside the heading rather than above the list because they are about the list,
    and a control floating over a page belongs to the page.
*/
.section-head[b-vju81utbes] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fo-s3);
    margin-bottom: var(--fo-s3);
}

.section-head h2[b-vju81utbes] { margin: 0; }

.adders[b-vju81utbes] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-s2);
}

/*
    An open disclosure keeps its fill and gains the ink border, so it reads as "this is the one
    that is open" without becoming the loudest thing on a screen whose subject is the form it
    just revealed.
*/
.adders button.open[b-vju81utbes] {
    border-color: var(--fo-ink);
}
/* /Components/Pages/Admin/Overview.razor.rz.scp.css */
/*
    The landing tiles.

    Each one is a count and a destination, so the whole tile is the target — no hover-revealed
    link, which is undiscoverable and does not survive touch (design system §7).

    The counts are set as figures, in the mono face, because that is what a figure looks like
    everywhere else in this product and a count of overdue tasks is no less a number than a
    weight. Tabular so a column of them does not shift as digits change.

    Each tile's icon sits on a tile of its own colour, from the .fo-verb-* pair on the link.
*/

.today[b-rb3zd8vnnn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-s2) var(--fo-s4);
    align-items: baseline;
    margin-bottom: var(--fo-s6);
}

.today h1[b-rb3zd8vnnn] {
    margin: 0;
}

.tiles[b-rb3zd8vnnn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--fo-s4);
    margin-bottom: var(--fo-s8);
}

.tile[b-rb3zd8vnnn] {
    display: flex;
    flex-direction: column;
    gap: var(--fo-s1);
    padding: var(--fo-s4);
    border: var(--fo-border) solid var(--fo-line);
    border-radius: var(--fo-radius-card);
    background: var(--fo-surface-1);
    color: var(--fo-body);
    text-decoration: none;
    transition: transform var(--fo-motion-base) var(--fo-ease),
                border-color var(--fo-motion-base) var(--fo-ease);
}

.tile:hover[b-rb3zd8vnnn] {
    border-color: var(--fo-verb);
    transform: translateY(-2px);
}

.tile:focus-visible[b-rb3zd8vnnn] {
    outline: 3px solid var(--fo-focus);
    outline-offset: 2px;
}

.icon[b-rb3zd8vnnn] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--fo-s2);
    border-radius: var(--fo-radius-control);
    background: var(--fo-verb-bg);
    color: var(--fo-verb);
}

/*
    Something is waiting on you.

    Rust — the "held, overdue, manual" colour, and an overdue task is exactly that — as the
    whole tile's tint rather than a stripe down its edge. Deliberately not amber: amber means
    settling or queued, which is a thing in progress rather than a thing late. And never colour
    alone — the count and its word carry the meaning, the tint only makes it findable.
*/
.tile.needs-you[b-rb3zd8vnnn] {
    border-color: transparent;
    background: var(--fo-held-bg);
}

.tile.needs-you .count[b-rb3zd8vnnn] {
    color: var(--fo-held);
}

.count[b-rb3zd8vnnn] {
    font-family: var(--fo-font-num);
    font-size: var(--fo-figure);
    font-weight: var(--fo-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--fo-ink);
}

.label[b-rb3zd8vnnn] {
    color: var(--fo-ink);
    font-size: var(--fo-text-base);
    font-weight: var(--fo-weight-bold);
}

.verb-heading[b-rb3zd8vnnn] {
    display: flex;
    align-items: center;
    gap: var(--fo-s2);
}

.verb-heading .verb[b-rb3zd8vnnn] {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--fo-radius-control);
    background: var(--fo-verb-bg);
    color: var(--fo-verb);
}

.context h2[b-rb3zd8vnnn] {
    margin: 0 0 var(--fo-s3);
    font-size: var(--fo-text-xl);
}

@media (prefers-reduced-motion: reduce) {
    .tile[b-rb3zd8vnnn] {
        transition: none;
    }

    .tile:hover[b-rb3zd8vnnn] {
        transform: none;
    }
}

/* A phone-width browser is a real case here: an operator checking from the house. */
@media (max-width: 560px) {
    .tiles[b-rb3zd8vnnn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--fo-s3);
    }

    .count[b-rb3zd8vnnn] {
        font-size: var(--fo-text-2xl);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*
    The front door.

    The page is quiet everywhere except the ticket. That is the whole composition: steel type on
    paper, one saturated chip, one filled button, and a block of mono figures that is allowed to
    be the largest thing on the screen. Spending the boldness in one place is what keeps it from
    reading as a brochure - and this surface has no web font to lean on, so the personality has
    to come from the scale and from the sans/mono contrast instead.

    38rem measure, inherited from body: this loads on rural 4G and is read on a phone outdoors.
*/

.brand[b-nqzjdeeqoz] {
    margin-bottom: var(--fo-s8);
}

/*
    The wordmark is small on purpose. It is not the thesis and it is not what a grower came for;
    putting it at display size would be the page talking about itself.
*/
.wordmark[b-nqzjdeeqoz] {
    color: var(--fo-secondary);
    font-size: var(--fo-text-sm);
    font-weight: var(--fo-weight-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.thesis[b-nqzjdeeqoz] {
    margin: 0 0 var(--fo-s8);
    max-width: 18ch;
    color: var(--fo-ink);
    font-size: var(--fo-text-2xl);
    font-weight: var(--fo-weight-heavy);
    line-height: var(--fo-leading-tight);
    letter-spacing: -0.02em;
}

/* ---- The ticket ---- */

.ticket[b-nqzjdeeqoz] {
    margin: 0 0 var(--fo-s8);
    padding: var(--fo-s4);
    border: var(--fo-border) solid var(--fo-line);
    border-radius: var(--fo-radius-card);
    background: var(--fo-surface-1);
}

.ticket figcaption[b-nqzjdeeqoz] {
    display: flex;
    gap: var(--fo-s3);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--fo-s4);
}

.eyebrow[b-nqzjdeeqoz] {
    color: var(--fo-muted);
    font-size: var(--fo-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/*
    The provenance chip, in the one green that means settled. It carries a word as well as a
    colour, because no state in this product is told by colour alone.
*/
.chip[b-nqzjdeeqoz] {
    padding: 2px var(--fo-s2);
    border-radius: var(--fo-radius-chip);
    background: var(--fo-settled-bg);
    color: var(--fo-settled);
    font-size: var(--fo-text-2xs);
    font-weight: var(--fo-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ticket dl[b-nqzjdeeqoz] {
    margin: 0;
}

.line[b-nqzjdeeqoz] {
    display: flex;
    gap: var(--fo-s4);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--fo-s2) 0;
}

.line dt[b-nqzjdeeqoz] {
    color: var(--fo-secondary);
    font-size: var(--fo-text-sm);
}

/*
    Figures are mono and tabular so the decimals stack down the column, which is the only reason
    a ticket is readable at a glance.
*/
.line dd[b-nqzjdeeqoz] {
    margin: 0;
    color: var(--fo-ink);
    font-family: var(--fo-font-num);
    font-size: var(--fo-text-lg);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.unit[b-nqzjdeeqoz] {
    margin-left: 0.4ch;
    color: var(--fo-muted);
    font-size: var(--fo-text-sm);
}

/*
    The rule above the total is load-bearing, not ornamental: it marks where the arithmetic
    closed. It is drawn once, above the one line that is a total of the lines above it.
*/
.total[b-nqzjdeeqoz] {
    margin-top: var(--fo-s2);
    border-top: var(--fo-border-heavy) solid var(--fo-ink);
    padding-top: var(--fo-s3);
}

.total dt[b-nqzjdeeqoz] {
    color: var(--fo-ink);
    font-weight: var(--fo-weight-bold);
}

/* The one figure the page is built around, so it is the largest thing on it. */
.total dd[b-nqzjdeeqoz] {
    font-size: var(--fo-figure);
    font-weight: var(--fo-weight-bold);
    line-height: var(--fo-leading-tight);
}

.total .unit[b-nqzjdeeqoz] {
    font-size: var(--fo-text-lg);
}

.ticket .basis[b-nqzjdeeqoz] {
    margin: var(--fo-s4) 0 0;
    padding-top: var(--fo-s3);
    border-top: var(--fo-border) solid var(--fo-line);
}

/* ---- How it works ---- */

.how[b-nqzjdeeqoz] {
    margin-bottom: var(--fo-s8);
}

.how h2[b-nqzjdeeqoz] {
    margin-bottom: var(--fo-s4);
    font-size: var(--fo-text-lg);
}

.steps[b-nqzjdeeqoz] {
    display: grid;
    gap: var(--fo-s4);
    margin: 0;
}

/*
    Label and sentence, not a numbered list. The order is real, but a reader does not need 01/02
    to follow three steps they are already living through.
*/
.step dt[b-nqzjdeeqoz] {
    color: var(--fo-ink);
    font-weight: var(--fo-weight-bold);
}

.step dd[b-nqzjdeeqoz] {
    margin: var(--fo-s1) 0 0;
    color: var(--fo-body);
}

/* ---- Starting ---- */

.start[b-nqzjdeeqoz] {
    margin-bottom: var(--fo-s8);
}

/*
    The only filled control on the page, at commit size: this is the action the page exists for
    and a cold thumb has to hit it (design system, section 9).
*/
.choice[b-nqzjdeeqoz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--fo-target-commit);
    padding: var(--fo-s3) var(--fo-s6);
    border-radius: var(--fo-radius-control);
    background: var(--fo-settled);
    color: var(--fo-on-accent);
    font-size: var(--fo-text-lg);
    font-weight: var(--fo-weight-bold);
    text-align: center;
    text-decoration: none;
}

.alternate[b-nqzjdeeqoz] {
    margin: var(--fo-s4) 0 0;
    color: var(--fo-secondary);
    text-align: center;
}

/* ---- The way back, for people who are not here to sign up ---- */

.back[b-nqzjdeeqoz] {
    padding-top: var(--fo-s6);
    border-top: var(--fo-border) solid var(--fo-line);
    color: var(--fo-muted);
    font-size: var(--fo-text-sm);
}

.back p[b-nqzjdeeqoz] {
    margin: 0 0 var(--fo-s2);
}

.back a[b-nqzjdeeqoz] {
    color: var(--fo-secondary);
}