/* The registration patterns (§6 of the Signup Garden Design System): the step
 * bar, the two-column wizard, the ledger blocks, and the session row.
 *
 * Foundations -- tokens, type, buttons, fields, panels, pills, notices -- moved
 * to config/static/base.css when the design system landed, so that every page
 * gets them and not only the eight templates that load this file. What is left
 * here is layout that only the registration surface has.
 */

/* Wizard chrome ---------------------------------------------------------- */

.register-header {
    margin: var(--space-7) 0;
    color: var(--fg-2);
}

.register-event {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-h3);
    line-height: var(--leading-h3);
    color: var(--fg);
    margin: 0;
}

.register-account {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-weight: 500;
    color: var(--fg-2);
    margin: var(--space-1) 0 0;
}

/* The step bar (§6). Four cells across the top of a bounded frame: the current
 * one lifts to straw, the rest stay on the panel tone. Column dividers are
 * solid because they divide inside a frame; the bar's own lower edge is dotted
 * because it separates the bar from the step beneath it.
 *
 * The order is details, waiver, selections, review -- the waiver comes before
 * the selections so a rider meets the legal gate before spending a step
 * building an itinerary rather than after (§4.4). The sequence itself lives in
 * registrations/wizard.py; this only draws it.
 */
.wizard-steps ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    overflow: hidden;
    background: var(--panel);
}

.wizard-steps li {
    flex: 1 1 10rem;
    padding: 14px var(--space-4);
    border-left: 1px solid var(--rule-column);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    line-height: var(--leading-ui);
    color: var(--fg-2);
}

.wizard-steps li:first-child {
    border-left: 0;
}

.wizard-steps li.is-current {
    background: var(--bg);
    color: var(--fg);
}

.wizard-steps a {
    color: inherit;
    text-decoration: none;
}

.wizard-steps a:hover {
    color: var(--action-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.step-number {
    margin-right: var(--space-2);
    color: var(--fg-2);
}

.wizard-steps li.is-current .step-number {
    color: var(--fg);
}

.step-state {
    display: block;
    font-weight: 500;
    font-size: var(--size-meta);
    color: var(--fg-2);
    margin-top: 2px;
}

/* The two-column wizard (§6): the step, and the rail that rides along beside
 * it. The rail is held by a rule rather than a card, so the cost panel reads
 * as part of the same page as the step and not as a separate object.
 */
.wizard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-7);
    align-items: start;
}

.wizard-main {
    min-width: 0;
}

.wizard-aside {
    border-left: 1px solid var(--rule-column);
    padding-left: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Inside the rail a panel loses its frame -- the rail's own left rule is the
   structure, and boxing each section inside it would draw the same boundary
   twice. */
.wizard-aside .panel {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    margin: 0;
}

.wizard-aside .panel h2 {
    font-size: var(--size-ui);
    margin: 0 0 var(--space-3);
}

@media (max-width: 1023px) {
    .wizard {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    /* Stacked, the rail is above the fold of nothing -- a left rule on a
       full-width block points at no column, so it becomes a top rule. */
    .wizard-aside {
        border-left: 0;
        border-top: 3px dotted var(--rule-dotted);
        padding-left: 0;
        padding-top: var(--space-5);
    }
}

/* Ledgers ---------------------------------------------------------------- *
 *
 * The cost panel: money, one line per product. Rows are separated by the ruled
 * -paper line -- 1px dotted ink at 40% -- because they are like items in a
 * ledger, and bounded by the frame around them rather than by a rule of their
 * own.
 *
 * `.record`, which shares that ruled-paper treatment for label-and-value pairs,
 * moved to base.css when the profile page grew a second one -- this file is for
 * what only the wizard and the registration record use.
 */
.cost {
    margin: 0;
}

.cost > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 10px 0;
    border-bottom: 1px dotted var(--rule-dotted);
}

.cost dt {
    color: var(--fg);
}

.cost dd {
    margin: 0;
    text-align: right;
    font-family: var(--font-ui);
    font-weight: 600;
}

.cost-total {
    font-weight: 600;
    border-bottom: 0;
}

/* The two charges, each with its own total, side by side with a rule between
   them (`.panel-grid` draws it, and stacks them in a narrow column). */
.cost-split > * > h3 {
    font-size: var(--size-ui);
    margin: 0 0 var(--space-2);
}

.cost-split .cost-total {
    padding-bottom: 0;
}

.wizard-aside .cost-split > * {
    padding: var(--space-3);
}

.cost dt .note {
    display: block;
    font-weight: 500;
    margin-top: var(--space-1);
    max-width: 34ch;
}

.slot-summary {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slot-summary > li {
    padding: var(--space-2) 0;
    border-bottom: 1px dotted var(--rule-dotted);
}

.slot-summary > li:last-child {
    border-bottom: 0;
}

.slot-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slot-name {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    color: var(--fg);
}

.chosen-session {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--size-ui);
}

/* Sessions --------------------------------------------------------------- */

.slot {
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    background: var(--card);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
}

.slot legend {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-h3);
    padding: 0 var(--space-2);
    margin-bottom: 0;
}

.slot-count {
    font-weight: 500;
    font-size: var(--size-meta);
    color: var(--fg-2);
    margin-left: var(--space-2);
}

.session-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The session row (§5). A category dot sits between the time and the title,
 * the time is fixed-width so rows align down the day, and the row clears 72px
 * so it is a target you can hit in gloves.
 */
.session-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4) var(--space-2);
    min-height: 72px;
    border-bottom: 1px dotted var(--rule-dotted);
}

.session-row:last-child {
    border-bottom: 0;
}

.session-row label {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    font-weight: 400;
    cursor: pointer;
}

.session-row.is-chosen {
    background: var(--surface-2);
}

/* A disabled row is still readable -- it says what filled up, and faint is
   never load-bearing (§4). It dims by losing the pointer, not the contrast. */
.session-row.is-disabled label {
    cursor: not-allowed;
}

/* Fixed width, so rows align down the day (§5) -- but wider than the design
   system's 94px, which is sized for a bare "6:30 AM". The registration record
   prefixes the weekday ("Sun 7:00 AM"), and at 94px that wraps onto two lines
   and breaks the alignment the fixed width exists to keep. Fixed and wide
   enough beats fluid: fluid would re-align every row to its own longest time. */
.session-time {
    flex: 0 0 112px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-ui);
    white-space: nowrap;
    padding-top: 2px;
}

.session-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.session-title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
}

.session-meta {
    font-size: var(--size-ui);
    color: var(--fg-2);
    line-height: 1.5;
    margin-top: 2px;
}

/* The organizer's description of a session: reading text, under the meta line,
   in the body colour because it is what the choice is made on. */
.session-description {
    font-size: var(--size-ui);
    line-height: 1.5;
    margin-top: 4px;
}

.session-row .dot {
    margin-top: 7px;
}

/* Pill where the row has spare width, dot on phone rows and dense lists (§5).
 *
 * Both are in the markup and the width decides which one shows, so a template
 * never has to guess the viewport it will be read at. A session row on a
 * 1180px page has room for the word; the same row on a phone does not, and
 * §5 is explicit that the dot is the dense-list answer rather than a
 * degraded one.
 *
 * Only these rows swap. The `.chosen-session` lines in the wizard rail are a
 * dense list at every width -- a 320px column beside the step -- so they keep
 * the dot, which is why this is scoped to `.session-row` and not to `.dot`.
 *
 * Neither is announced: `category_label` is already in `.session-meta`, so a
 * pill that read out would say the category twice, and §5 makes a category
 * read-only in any case -- no hover, no press.
 */
.session-row .category-pill {
    display: none;
}

@media (min-width: 768px) {
    .session-row .dot {
        display: none;
    }

    .session-row .category-pill {
        display: inline-block;
        flex: none;
    }
}

/* The phone itinerary (§6) tightens the row rather than stacking it: a 72px
   time column, a 14px gap, and a 17px title. At the desktop widths the title
   is left with about 110px on a 390px screen and every session wraps to three
   lines, which is what the narrower column exists to prevent.
   `white-space` goes back to normal because the registration record prefixes
   the weekday, and "Sat / 7:00 AM" over two short lines beats an overflow. */
@media (max-width: 767px) {
    .session-row {
        gap: 14px;
        padding: var(--space-4) 0;
    }

    .session-row label {
        gap: 14px;
    }

    .session-time {
        flex: 0 0 72px;
        white-space: normal;
    }

    .session-title {
        font-size: 17px;
    }

    .session-meta {
        font-size: 14px;
    }
}

/* Same reasoning as the fields in base.css: the label is the target, this is
   about seeing the state of the box at arm's length. */
.session-row input[type="checkbox"],
.session-row input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 4px;
    flex: none;
    accent-color: var(--action);
}

/* The seat badge (§4.9.1, E3.4). Full is a fact that stops a rider, so it
 * carries the warning colour; nearly-full is worth flagging with nothing to
 * fix, which is exactly gold's job (§1).
 *
 * Whatever refreshes these in place must keep the modifier class in step with
 * the text -- the colour is the badge as much as the words are.
 */
.seats {
    flex: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 12px;
    line-height: var(--leading-ui);
    padding: 4px 9px;
    border: 1px solid var(--faint);
    border-radius: var(--radius-pill);
    color: var(--fg-2);
    white-space: nowrap;
}

/* An open capped session says nothing, but the element stays in the DOM: it is
   the target the seat-map refresh writes into when the session crosses into
   nearly-full or fills (§4.9.1, E3.4), and a badge that has to be created
   before it can be updated is a second code path for no reason. */
.seats-open {
    display: none;
}

.seats-full,
.seats-full_and_mine {
    border-color: var(--warning);
    color: var(--warning-deep);
    background: var(--warning-tint);
}

.seats-nearly_full {
    border-color: var(--attention);
    color: var(--attention-text);
    background: var(--attention-tint);
}

/* Waivers ---------------------------------------------------------------- */

.waiver {
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    background: var(--surface);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
}

.waiver h2 {
    margin-top: 0;
    font-size: var(--size-h3);
}

.waiver-body {
    max-width: var(--measure);
}

.waiver-pdf {
    width: 100%;
    height: 24rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-field);
    background: var(--field-fill);
}

.accepted-note {
    font-family: var(--font-ui);
    font-size: var(--size-meta);
    font-weight: 500;
    color: var(--fg-2);
}

/* Pledges (E12) ---------------------------------------------------------- */

/* The commitment choice on the review step: two answers, and a box that only
   means anything under the second (§4.4). Indenting the nested one is what
   says so without a sentence. */
.choice-group {
    border: 1px solid var(--rule);
    border-radius: var(--radius-frame);
    background: var(--surface);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
}

.choice-group legend {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-h3);
    padding: 0 var(--space-2);
    margin-bottom: 0;
}

.choice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-2) 0;
}

.choice label {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
}

.choice label .note {
    display: block;
    font-weight: 500;
    margin-top: var(--space-1);
    max-width: 52ch;
}

.choice input {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    flex: none;
    accent-color: var(--action);
}

.choice-nested {
    margin-left: 28px;
}

.progress-figure {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--size-h2);
    line-height: var(--leading-h2);
    margin: 0;
}

/* A `meter` left alone paints its fill in the platform's own green, which is
   not a colour §1 has -- and on a page of straw and ink it is the brightest
   thing on the screen. Sage carries it: §1 gives sage the "done, and nothing
   to do about it" job, which is what a raised total is. The three value
   pseudo-elements are all set to the same fill because a bare meter with no
   low/high/optimum still picks between them, and a total climbing toward a
   goal is not better or worse at 30% than at 80% -- only further along. */
.progress-bar {
    width: 100%;
    height: var(--space-3);
    margin: var(--space-2) 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    overflow: hidden;
}

.progress-bar::-webkit-meter-bar {
    background: var(--surface-2);
    border: 0;
}

.progress-bar::-webkit-meter-optimum-value,
.progress-bar::-webkit-meter-suboptimum-value,
.progress-bar::-webkit-meter-even-less-good-value {
    background: var(--success);
}

.progress-bar::-moz-meter-bar {
    background: var(--success);
}

/* A settled commitment is a confirmation; an unsettled one is worth flagging
   with nothing yet to fix; a failed charge needs a fix before moving on. */
.status-funded,
.status-charged {
    border-color: var(--success);
    color: var(--cream);
    background: var(--success);
}

.status-unfunded {
    border-color: var(--attention);
    color: var(--attention-text);
    background: var(--attention-tint);
}

.status-charge_failed {
    border-color: var(--warning);
    color: var(--warning-deep);
    background: var(--warning-tint);
}