/* ============================================================================
   Account and onboarding.

   These are the only screens where somebody types something that matters before
   they have any reason to trust us, so they get more room and a slower hand than
   the consoles do. Same tokens as sasulwa.css; kept separate because it is a
   different moment in the product.

   ---------------------------------------------------------------------------
   THE BREAKPOINT LADDER

   Four widths, named here and used everywhere. CSS cannot put a custom property
   inside a media query, so the ladder is a written rule rather than a token —
   which is exactly why it has to be written down in one place.

     (base)          the phone. Not a breakpoint: it is what everything is
                     before anything widens. Most of this market never leaves it.
     40rem   640px   big phone in landscape, small tablet. Two-up becomes possible.
     60rem   960px   laptop. A form can sit beside its context instead of above it.
     80rem  1280px   desktop. Nothing grows past this — a line of text longer than
                     about 75 characters stops being readable, and a form wider
                     than its content reads as an empty room.

   Two rules that decide when a screen widens at all:

   1. A single linear form does NOT widen. Sign-in, the code entry, one question
      at a time — those stay at 34rem on a 4K monitor, because the alternative is
      a 900px-wide text input, which looks broken rather than generous.
   2. A screen with more than one *card* widens, and lays them out side by side.
      That is the whole of the difference. Room is for putting two things next to
      each other, not for stretching one thing.

   Pages opt in by wrapping their content in `.s-wide`. Everything else keeps the
   column, and keeping the column is a decision rather than an oversight.
   ========================================================================== */

.s-field__label {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    font-size: var(--s-fs-sm);
    font-weight: 560;
    color: var(--s-text);
}

.s-field__opt {
    font-size: var(--s-fs-xs);
    font-weight: 400;
    color: var(--s-text-faint);
}

.s-field__wrap { position: relative; display: flex; align-items: center; }

.s-field__prefix {
    position: absolute;
    left: var(--s-4);
    font-size: var(--s-fs-md);
    color: var(--s-text-faint);
    pointer-events: none;
}

.s-input--prefixed { padding-left: 4.5rem; }

.s-input:focus {
    border-color: var(--s-brand);
    box-shadow: 0 0 0 3px var(--s-brand-soft);
}

.s-field.is-wrong .s-input { border-color: var(--s-attention); }
.s-field.is-wrong .s-input:focus { box-shadow: 0 0 0 3px var(--s-attention-soft); }

.s-field__hint { font-size: var(--s-fs-sm); color: var(--s-text-faint); }

.s-field__err {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--s-fs-sm);
    color: var(--s-attention);
}

/* --- One box per digit, with the real input laid over the top. */

.s-code-entry { position: relative; display: flex; flex-direction: column; gap: var(--s-2); }

.s-code-entry__boxes { display: flex; gap: var(--s-2); }

.s-code-box {
    flex: 1;
    aspect-ratio: 3 / 4;
    max-width: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--s-border);
    border-radius: var(--s-r);
    background: var(--s-surface-2);
    font-family: var(--s-font-mono);
    font-size: var(--s-fs-lg);
    color: var(--s-text);
    transition: border-color var(--s-t-fast), background var(--s-t-fast);
}

.s-code-box.is-filled { background: var(--s-surface); border-color: var(--s-border-strong); }

.s-code-entry:focus-within .s-code-box.is-next {
    border-color: var(--s-brand);
    box-shadow: 0 0 0 3px var(--s-brand-soft);
}

.s-code-entry.is-wrong .s-code-box { border-color: var(--s-attention); }

/* Transparent, over the boxes: one caret, one paste target, the native keyboard. */
.s-code-entry__input {
    position: absolute;
    inset: 1.75rem 0 auto 0;
    width: 100%;
    height: 4.25rem;
    opacity: 0;
    border: 0;
    background: transparent;
    font-size: var(--s-fs-lg);
}

/* --- The focused shell every account screen sits in. */

.s-auth {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1100px 520px at 12% -12%, var(--s-brand-soft), transparent 62%),
        var(--s-bg);
}

/*
   The bar above the front door and every account screen (Components/SiteBar.razor).

   It is deliberately not tied to the column beneath it. The reading column is 34rem and the
   landing runs to 1040, and a bar that followed each would put the wordmark in a different
   place on either side of one tap. So the bar keeps its own width on every screen, and only
   what is under it changes.

   On a handset it is a header: no rule, no sticking, scrolls away like the first thing on a
   screen in an app. Past 940px it becomes chrome — pinned, edge to edge, page running under it.
*/
.s-sitebar {
    padding: max(var(--s-4), env(safe-area-inset-top)) var(--s-4) 0;
}

.s-sitebar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    max-width: var(--s-page-max);
    margin-inline: auto;
}

@media (min-width: 940px) {
    /* The rule only earns its keep once it runs the whole width — inside a padded column it was
       a line stopping short of both edges for no reason anyone could see. */
    .s-sitebar {
        position: sticky;
        top: 0;
        z-index: 20;
        padding-block: var(--s-3);
        border-bottom: 1px solid var(--s-border);
        background: color-mix(in srgb, var(--s-bg) 86%, transparent);
        backdrop-filter: blur(14px);
    }
}

/* The gutter matches .s-sitebar, so on a wide screen the heading starts under the wordmark
   rather than a few pixels right of it. */
.s-auth__body {
    flex: 1;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--s-5) var(--s-4) var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

/*
   The navigation strip above every account screen: a back chevron, a breadcrumb trail, or
   both. AuthNav omits the strip entirely when it would be empty, so this rule never has to
   account for a nav that has nothing in it.
*/
.s-authnav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    margin-bottom: calc(-1 * var(--s-4));
}

.s-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    font-size: var(--s-fs-sm);
    color: var(--s-text-faint);
}

.s-crumbs__up {
    padding: var(--s-1) 0;
    font-weight: 600;
    color: var(--s-text-dim);
}

.s-crumbs__up:hover { color: var(--s-text); }

/* The screen you are on is not a link to itself, and must not read as one. */
.s-crumbs__here {
    padding: var(--s-1) 0;
    font-weight: 600;
    color: var(--s-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s-auth__head { display: flex; flex-direction: column; gap: var(--s-2); }

.s-auth__title {
    font-family: var(--s-font-display);
    font-size: var(--s-fs-xl);
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.s-auth__sub { color: var(--s-text-dim); font-size: var(--s-fs-base); max-width: 46ch; }

.s-auth__card {
    background: var(--s-surface);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    padding: var(--s-6);
    box-shadow: var(--s-shadow);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.s-auth__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-size: var(--s-fs-sm);
    color: var(--s-text-dim);
}

/*
   Pinned, because these cards run long. A refusal that stays where it was drawn is a refusal
   nobody sees: the button that earned it is at the bottom of the form, and the banner is at the
   top. Sticky keeps it on screen for as long as any part of the card is.
*/
.s-auth__alert {
    position: sticky;
    top: var(--s-3);
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--s-r);
    background: var(--s-attention-soft);
    box-shadow: var(--s-shadow-sm);
    color: var(--s-attention);
    font-size: var(--s-fs-sm);
}

/* --- A stage of a form arriving once the one before it is answered. */

.s-reveal {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    animation: s-reveal var(--s-t-slow) both;
}

@keyframes s-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* --- Progress across a multi-step flow. Reads as a route, not a loading bar. */

.s-progress { display: flex; gap: var(--s-2); align-items: center; }

.s-progress__seg {
    flex: 1;
    height: 3px;
    border-radius: var(--s-r-pill);
    background: var(--s-border);
    transition: background var(--s-t);
}

.s-progress__seg.is-done { background: var(--s-brand); }
.s-progress__seg.is-now { background: var(--s-marker); }

/* --- Choosing a role: the most consequential tap in the app, so big targets. */

.s-rolepick { display: flex; flex-direction: column; gap: var(--s-3); }

.s-rolepick__item {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    text-align: left;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    background: var(--s-surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--s-t-fast), transform var(--s-t-fast), box-shadow var(--s-t-fast);
}

.s-rolepick__item:hover {
    border-color: var(--s-brand-line);
    transform: translateY(-1px);
    box-shadow: var(--s-shadow-sm);
}

.s-rolepick__item.is-on {
    border-color: var(--s-brand);
    box-shadow: 0 0 0 3px var(--s-brand-soft);
}

.s-rolepick__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: var(--s-r);
    background: var(--s-brand-soft);
    color: var(--s-brand);
}

.s-rolepick__title { font-weight: 600; display: block; }
.s-rolepick__body { font-size: var(--s-fs-sm); color: var(--s-text-dim); display: block; }

/* A button that reads as a link, for a secondary door that is not a role. */

.s-linkish {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--s-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.s-linkish:hover { color: var(--s-brand-hover); }

/* --- A quiet strip of seeded sign-ins. Development only, and it should look it.
   Folded away by default: the sign-in screen belongs to the person signing in, and a list of
   ten test accounts is the first thing they should not have to read past. */

.s-devbox {
    border: 1px dashed var(--s-border-strong);
    border-radius: var(--s-r);
    background: var(--s-surface-2);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.s-devbox__row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-sm);
    background: var(--s-surface);
    color: inherit;
    font: inherit;
    font-size: var(--s-fs-sm);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--s-t-fast);
}

.s-devbox__row:hover { border-color: var(--s-brand-line); }

/* --- The review queue an agent works. */

.s-appcard {
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    background: var(--s-surface);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.s-appcard__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.s-appcard__title { font-size: var(--s-fs-md); font-weight: 600; }

.s-appfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--s-3);
}

.s-appfact { display: flex; flex-direction: column; gap: 2px; }

.s-appfact__k {
    font-size: var(--s-fs-xs);
    color: var(--s-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.s-appfact__v { font-size: var(--s-fs-base); font-weight: 560; }

.s-appnote {
    padding: var(--s-3) var(--s-4);
    background: var(--s-surface-2);
    border-radius: var(--s-r);
    font-size: var(--s-fs-sm);
    color: var(--s-text-dim);
}

/* A muted card for an application that is over — kept, because a no is an answer. */
.s-appcard.is-over { opacity: .72; background: var(--s-surface-2); }
.s-appcard.is-over:hover { opacity: 1; }

/* The kind of thing an application is, said before anything else on the card. */
.s-kind {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1, 4px);
    font-size: var(--s-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s-brand);
}

/* What the figures come to, drawn while the application is still open. */
.s-appcard__worth {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: 1px dashed var(--s-border-strong);
    border-radius: var(--s-r);
}

.s-appsig { display: flex; align-items: center; gap: var(--s-3); }
.s-appsig .s-sigmark { width: 9rem; height: 3.3rem; }

/* The calculator beside the cards on a desk: the front door's arithmetic, on a new figure. */
.s-calc__out { display: flex; flex-direction: column; gap: 2px; }
.s-calc__num { font-size: var(--s-fs-xl, 1.5rem); font-weight: 650; }

/* --- Three promises, then a box. The terms step. */

.s-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.s-points li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--s-fs-sm); color: var(--s-text-dim); }

.s-points__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--s-r);
    background: var(--s-brand-soft);
    color: var(--s-brand);
}

/* A checkbox with a sentence beside it, big enough for a thumb. */
.s-agree {
    display: flex;
    gap: var(--s-3);
    align-items: flex-start;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r);
    background: var(--s-surface-2);
    font-size: var(--s-fs-sm);
    cursor: pointer;
}

.s-agree input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; accent-color: var(--s-brand); }
.s-field.is-wrong .s-agree { border-color: var(--s-attention); }

.s-subhead { display: flex; flex-direction: column; gap: var(--s-1, 4px); padding-top: var(--s-2); }

/* --- Signing. The box is the canvas; the hint sits under the pen until the first stroke. */

.s-sign__box {
    position: relative;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r);
    background: var(--s-surface);
    aspect-ratio: 600 / 220;
    overflow: hidden;
    touch-action: none;
}

.s-sign__canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.s-sign__hint {
    position: absolute;
    inset: auto 0 var(--s-3) 0;
    text-align: center;
    font-size: var(--s-fs-sm);
    color: var(--s-text-faint);
    pointer-events: none;
    display: none;
}

.s-sign__box.is-empty .s-sign__hint { display: block; }
.s-sign__box.is-empty::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 32%;
    border-bottom: 1px dashed var(--s-border-strong);
}

.s-field.is-wrong .s-sign__box { border-color: var(--s-attention); }

.s-sigmark { display: block; width: 100%; max-width: 20rem; height: auto; color: var(--s-text); }

/* --- The documents. A reading column a little wider than a form, and printable. */

.s-legal { display: flex; flex-direction: column; gap: var(--s-4); }
.s-legal h2 { font-size: var(--s-fs-md); font-weight: 600; margin-top: var(--s-3); }
.s-legal p { color: var(--s-text-dim); line-height: 1.55; max-width: 68ch; }
.s-legal strong { color: var(--s-text); }

.s-auth:has(.s-legal) .s-auth__body { max-width: 44rem; }

.s-particulars {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    background: var(--s-surface);
}

.s-particulars dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--s-1, 4px) var(--s-4);
    margin: 0;
    font-size: var(--s-fs-sm);
}

.s-particulars dt { color: var(--s-text-faint); }
.s-particulars dd { margin: 0; color: var(--s-text); }

.s-signblock {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--s-border);
}

@media print {
    .s-sitebar, .s-authnav, .s-noprint { display: none !important; }
    .s-auth { background: #fff; min-height: 0; }
    .s-auth:has(.s-legal) .s-auth__body { max-width: none; padding: 0; }
    .s-legal p, .s-legal h2, .s-particulars dd, .s-particulars dt { color: #000; }
    .s-particulars { border-color: #999; }
    .s-sigmark { color: #000; }
    a { color: inherit; text-decoration: none; }
}

/* --- Used at the end of every flow, so an ending always feels the same. */

.s-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4);
    text-align: center;
    padding: var(--s-6) 0;
}

.s-done__mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--s-r-pill);
    background: var(--s-brand-soft);
    color: var(--s-brand);
    animation: s-pop var(--s-t-slow) both;
}

@keyframes s-pop {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .s-done__mark { animation: none; }
    .s-reveal { animation: none; }
    .s-rolepick__item:hover { transform: none; }
}

/* --- Show what you typed. Typing a passphrase blind is where people give up and pick
   something short instead, so the toggle is what makes a long one bearable. */

.s-field__reveal {
    position: absolute;
    right: var(--s-2);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--s-r);
    background: transparent;
    color: var(--s-text-faint);
    cursor: pointer;
    transition: color var(--s-t-fast), background var(--s-t-fast);
}

.s-field__reveal:hover { color: var(--s-text); background: var(--s-surface-2); }
.s-field__reveal:disabled { opacity: .4; cursor: default; }

.s-input--revealable { padding-right: 3rem; }

/* --- Password strength. It advises as you type; only length ever refuses. */

.s-pw { display: flex; flex-direction: column; gap: var(--s-2); }

.s-pw__bars { display: flex; gap: 4px; }

.s-pw__bar {
    height: 4px;
    flex: 1;
    border-radius: 999px;
    background: var(--s-border);
    transition: background var(--s-t-fast);
}

.s-pw[data-verdict="tooshort"] .s-pw__bar.is-lit,
.s-pw[data-verdict="weak"] .s-pw__bar.is-lit { background: var(--s-attention); }
.s-pw[data-verdict="fair"] .s-pw__bar.is-lit { background: var(--s-warn, #c98a2b); }
.s-pw[data-verdict="strong"] .s-pw__bar.is-lit { background: var(--s-good, #2f9e6f); }

.s-pw__note { font-size: var(--s-fs-sm); color: var(--s-text-dim); }

.s-pw__rules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    list-style: none;
    padding: 0;
    margin: 0;
}

.s-pw__rules li {
    display: flex;
    align-items: center;
    gap: var(--s-1, 4px);
    font-size: var(--s-fs-xs);
    color: var(--s-text-faint);
}

.s-pw__rules li.is-met { color: var(--s-good, #2f9e6f); }

/* --- The capital pool, stated before anybody offers anything. */

.s-pool { display: flex; flex-direction: column; gap: var(--s-3); }

.s-pool__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }

.s-pool__figure { font-size: var(--s-fs-xl, 1.5rem); font-weight: 650; }

.s-pool__of { font-size: var(--s-fs-sm); color: var(--s-text-faint); white-space: nowrap; }

.s-pool__track {
    height: 8px;
    border-radius: 999px;
    background: var(--s-surface-2);
    overflow: hidden;
}

.s-pool__fill { height: 100%; border-radius: 999px; background: var(--s-brand); }

.s-pool__terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
    font-size: var(--s-fs-sm);
    color: var(--s-text-dim);
}

.s-pool.is-full .s-pool__fill { background: var(--s-good, #2f9e6f); }

/* --- Desks a member of staff works. */

.s-desks { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.s-desk {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--s-border);
    border-radius: 999px;
    background: var(--s-surface);
    font-size: var(--s-fs-xs);
    color: var(--s-text-dim);
    cursor: pointer;
}

.s-desk.is-on {
    border-color: var(--s-brand);
    background: var(--s-brand-soft);
    color: var(--s-brand);
}

/* --- The folded development sign-in list. */

.s-devfold {
    border: 1px dashed var(--s-border-strong);
    border-radius: var(--s-r);
    background: var(--s-surface-2);
}

.s-devfold > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-3) var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--s-fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s-text-faint);
}

.s-devfold > summary::-webkit-details-marker { display: none; }

.s-devfold > summary::after {
    content: "▾";
    margin-left: auto;
    transition: transform 120ms ease;
}

.s-devfold[open] > summary::after { transform: rotate(180deg); }

.s-devfold__body {
    padding: 0 var(--s-4) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

/* ============================================================================
   Widening. See the ladder at the top of this file.
   ========================================================================== */

/*
   The shell asks its content how much room it wants, rather than the page
   reaching up into the layout to set it. A page that wraps itself in .s-wide is
   saying "I have more than one card"; everything else keeps the reading column.
*/
.s-auth:has(.s-wide) .s-auth__body { max-width: 34rem; }

.s-wide {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

/*
   Cards side by side once there is room for two full ones, and never before:
   auto-fit with a 26rem floor means the second column appears when it can be
   a real column, not a squeezed one. The reveal inside each card still runs
   downward — that behaviour is right on every screen, it just no longer forces
   the whole page into one tall strip.
*/
.s-cols {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}

@media (min-width: 60rem) {
    /*
       Stop at the bar. Past 65rem the content would run wider than .s-sitebar, and a heading
       that starts left of the wordmark above it reads as two pages stacked.
    */
    .s-auth:has(.s-wide) .s-auth__body { max-width: calc(var(--s-page-max) + 2 * var(--s-4)); }

    .s-cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
        align-items: start;
    }
}

/*
   A short set of choices reads better as a row of cards than as a stack, once
   there is room — three doors seen at once is a smaller decision than three
   doors scrolled past. Below 60rem it stays exactly the list it was.
*/
@media (min-width: 60rem) {
    .s-wide .s-rolepick {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: var(--s-4);
    }

    .s-wide .s-rolepick__item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-3);
        padding: var(--s-5);
    }

    /* The chevron said "there is more this way". In a column of cards it points
       at nothing, and the whole card is already the target. */
    .s-wide .s-rolepick__go { display: none; }
}

/*
   Continue with Google. A second way in, not a better one — so it reads as an alternative to
   the form above it rather than the headline, and it keeps Google's own mark and their four
   colours, because a monochrome G is a brand-guideline violation and looks like a mistake.
*/
.s-or {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--s-text-faint);
    font-size: var(--s-fs-xs);
    text-transform: lowercase;
}

.s-or::before,
.s-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--s-border);
}

.s-btn--oauth {
    gap: var(--s-3);
    background: var(--s-surface);
    border-color: var(--s-border-strong);
    font-weight: 560;
}

.s-btn--oauth:hover { background: var(--s-surface-2); }

.s-oauth__mark { flex: none; }

/* ---- Money Sasulwa holds: the history, the questions, the business, the deposit --------- */

.s-money__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.s-money__tools { display: flex; align-items: center; gap: var(--s-2); }
.s-money__who { margin: 0 0 var(--s-3); }
.s-money__totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.s-money__totals > div { display: flex; flex-direction: column; gap: 2px; }
.s-money__totals .s-num { font-size: 1.15rem; }
.s-money__month { margin-top: var(--s-4); }
.s-moneyline { align-items: flex-start; }
.s-moneyline__icon { flex: none; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--s-surface-2); color: var(--s-text-dim); }
.s-moneyline.is-in .s-moneyline__icon { background: var(--s-brand-soft, var(--s-surface-2)); color: var(--s-brand); }
.s-moneyline__amt { flex: none; font-size: 1.05rem; }
.s-moneyline.is-in .s-moneyline__amt { color: var(--s-brand); }
.s-money__q { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--s-border-strong); }
.s-money__a { margin: 4px 0 0; padding-left: var(--s-3); border-left: 3px solid var(--s-brand); }
.s-money__ask { margin-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.s-money .s-linkish { background: none; border: 0; padding: 0; cursor: pointer; }

.s-question { display: flex; flex-direction: column; gap: var(--s-2); }
.s-question.is-over { opacity: .75; }
.s-question__head { display: flex; align-items: flex-start; gap: var(--s-3); }
.s-question__q { margin: 0; font-size: 1rem; }

.s-biz { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s-4); }
.s-biz__col { display: flex; flex-direction: column; gap: 6px; }
.s-biz__row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: .95rem; }
.s-biz__row--sum { border-top: 1px solid var(--s-border); padding-top: 6px; }
.s-biz__row--total { border-top: 2px solid var(--s-border-strong); padding-top: 6px; font-weight: 600; }
.s-biz__neg { color: var(--s-attention); }
.s-biz__tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.s-biz__tile .s-num { font-size: 1.3rem; }
.s-biz__tile.is-warm { border-color: var(--s-attention); }

.s-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: 6px 0; }
a.s-chip { text-decoration: none; }

/* One priced run of rooms on the owner's form, with its own way out once there is more than one. */
.s-tier { display: flex; align-items: flex-end; gap: var(--s-2); }
.s-tier__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-2); flex: 1; min-width: 0; }
.s-tier__drop { flex: none; margin-bottom: 2px; }
.s-chip { border: 1px solid var(--s-border-strong); background: var(--s-surface); color: var(--s-text); border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer; }
.s-chip.is-on, .s-chip--on { background: var(--s-brand); border-color: var(--s-brand); color: #fff; }

.s-fwd { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border: 1px dashed var(--s-border-strong); border-radius: var(--s-radius, 12px); }
.s-fwd__stepper { display: flex; align-items: center; gap: var(--s-3); }
.s-fwd__months { min-width: 6rem; text-align: center; }

.pn-fund { display: flex; flex-direction: column; gap: var(--s-3); border-color: var(--s-brand); }

.fd-wait, .fd-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-5) var(--s-4); }
.fd-wait__pulse, .fd-done__mark { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--s-brand-soft, var(--s-surface-2)); color: var(--s-brand); }
.fd-wait__pulse { animation: fd-pulse 1.6s ease-in-out infinite; }
.fd-wait__title { margin: 0; font-size: 1.3rem; }
.fd-wait__pin { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--s-text-faint); margin: 0; }
.fd-stalled { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border: 1px solid var(--s-attention); border-radius: var(--s-radius, 12px); }
.fd-stalled__title { font-weight: 600; }
@keyframes fd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.raising-warn { color: var(--s-attention); }

@media (max-width: 640px) {
    .s-money__totals { grid-template-columns: 1fr; }
}
.s-particulars > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: 4px 0; }
/* The networks' own colours, so a line is recognised before its name is read. */
.s-chip--mtn.is-on { background: #ffcc00; border-color: #ffcc00; color: #1a1a1a; }
.s-chip--airtel.is-on { background: #e4002b; border-color: #e4002b; color: #fff; }