/*
 *  Onboarding, 2026.
 *
 *  populator/index.php is the signup funnel and it is driven end to end by
 *  js/populate-functions.js, which addresses the DOM by id and by bootstrap
 *  class: #step1 through #step8, .steps, .well, .form-control, .btn-success,
 *  .alert, .row-photos .item, .col-bios .bio-holder, .profile-check.selected
 *  and so on. Renaming any of those breaks the funnel silently, in the one
 *  flow on the site where a silent break costs money.
 *
 *  So this sheet changes how those elements look and changes nothing about
 *  what they are called. It loads after populate.css, sandstone.css and
 *  sinister.css and wins on order, with !important only where the sheet
 *  underneath used !important first.
 *
 *  Same tokens as css/wfa.css. Kept as a separate file rather than folded
 *  into that one because the funnel still needs bootstrap's grid underneath
 *  it, and the rest of the site no longer loads bootstrap at all.
 */

:root {
    --wfa-bg:          #F6F3EC;
    --wfa-bg-band:     #E3DDD1;
    --wfa-bg-card:     #ffffff;
    --wfa-bg-card-alt: #FCFBF7;
    --wfa-bg-quiet:    #F1EDE3;
    --wfa-bg-quiet-2:  #E6E0D2;
    --wfa-bg-chip:     #EFE9DC;
    --wfa-bg-accent-1: #FCEBD6;

    --wfa-ink:         #211E1A;
    --wfa-ink-body:    #4C463D;
    --wfa-ink-mute:    #6E675C;
    --wfa-ink-mute-3:  #8C8474;

    --wfa-accent:      #f58e1f;
    --wfa-accent-dark: #DB7A10;
    --wfa-link:        #B4600C;
    --wfa-accent-deep: #A85708;

    --wfa-line:        rgba(70,55,35,.14);
    --wfa-shadow-card: 0 1px 2px rgba(70,55,35,.05), 0 18px 40px -20px rgba(70,55,35,.30);
    --wfa-shadow-lift: 0 2px 3px rgba(70,55,35,.06), 0 26px 56px -18px rgba(70,55,35,.42);
}

/* ------------------------------------------------------------ the canvas */

html, body {
    background: var(--wfa-bg) !important;
    color: var(--wfa-ink);
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/*  populate.css paints a full-bleed overlay through body::after to grey the
 *  page out while a step is working. Kept, because the JS toggles body.faded
 *  to drive it, but tuned to the new background rather than the old mint. */
body::after { background: var(--wfa-bg) !important; }
body.faded::after { background: rgba(246,243,236,.72) !important; }

h1, h2, h3, h4, h5 {
    font-family: inherit !important;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--wfa-ink);
}

a { color: var(--wfa-link); }
a:hover, a:focus { color: #8E4A06; }
:focus-visible { outline: 2px solid var(--wfa-accent); outline-offset: 3px; }

#main { max-width: 1080px; padding-left: 18px; padding-right: 18px; }

/* ------------------------------------------------------------ the header */

/*  Added by populator/index.php. A signup page with no way back to the site
 *  is a dead end, and the old one offered a logo that pointed home and
 *  nothing else. */
.wfa-onb-top {
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 18px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wfa-onb-top img { height: 26px; width: auto; display: block; }
.wfa-onb-back {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wfa-ink-mute);
    text-decoration: none;
    white-space: nowrap;
}
.wfa-onb-back:hover { color: var(--wfa-link); }

/*  The old markup centered a cdnjs.lol logo that 302s out to Cloudinary.
 *  Replaced in the page by the local SVG the rest of the site uses, so this
 *  only has to keep the JS happy: populate-functions.js resets #logo-insta's
 *  src when a build restarts. */
#logo-insta { height: 26px !important; width: auto !important; }

/* ------------------------------------------------------------- step card */

.well {
    background: var(--wfa-bg-card) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: var(--wfa-shadow-card) !important;
    padding: clamp(24px, 4vw, 40px) clamp(20px, 3.4vw, 38px) !important;
    margin-bottom: 28px !important;
}

#step1 .well { max-width: 620px; margin-left: auto; margin-right: auto; float: none; }

/*  #heading h3 is the step title the JS writes into. */
#heading h3, #step1 h3 {
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
    color: var(--wfa-ink) !important;
    text-transform: none !important;
    margin: 0 0 22px !important;
}

/* ----------------------------------------------------------------- forms */

.form-group { margin-bottom: 20px; }

.control-label, label {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--wfa-ink) !important;
    margin-bottom: 7px !important;
}

.form-control {
    height: auto !important;
    font-family: inherit !important;
    /*  16px so iOS does not zoom the viewport when a field takes focus.
     *  With maximum-scale removed from the meta tag, a 15px field would
     *  make every step jump on an iPhone. */
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--wfa-ink) !important;
    background: var(--wfa-bg-card) !important;
    border: 1px solid var(--wfa-line) !important;
    border-radius: 14px !important;
    padding: 13px 16px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--wfa-accent) !important;
    box-shadow: 0 0 0 3px rgba(245,142,31,.18) !important;
}
.form-control::placeholder { color: var(--wfa-ink-mute-3) !important; }

/*  The addon and the field are one control, so the seam between them is the
 *  addon's right border and nothing else. */
.input-group { display: flex !important; align-items: stretch; }
.input-group .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-left: 0 !important; }
.input-group-addon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    background: var(--wfa-bg-quiet) !important;
    border: 1px solid var(--wfa-line) !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    color: var(--wfa-ink-mute) !important;
    font-size: 14px !important;
    padding: 0 14px !important;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236E675C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

.has-error .form-control { border-color: #B03A20 !important; }
.has-success .form-control { border-color: #3F8F4C !important; }

/* --------------------------------------------------------------- buttons */

.btn {
    font-family: inherit !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 999px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 14px 26px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    transition: background .15s ease, color .15s ease;
    white-space: normal;
}
.btn-lg { padding: 17px 32px !important; font-size: 16px !important; }
.btn-sm { padding: 11px 18px !important; font-size: 13.5px !important; }
/*  An icon inside a small button gets a gap rather than sitting flush
 *  against its label. */
.btn-sm .fal { margin-right: 5px; }

/*  btn-success is the funnel's forward action on every step, so it is the
 *  brand orange rather than the bootstrap green it inherited. */
.btn-success, .btn-primary {
    background: var(--wfa-accent) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(245,142,31,.34) !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--wfa-accent-dark) !important;
    color: #fff !important;
}

.btn-default, .btn-info {
    background: var(--wfa-bg-quiet) !important;
    color: #2C2822 !important;
}
.btn-default:hover, .btn-info:hover,
.btn-default:focus, .btn-info:focus {
    background: var(--wfa-bg-quiet-2) !important;
    color: #2C2822 !important;
}

.btn-danger { background: #B03A20 !important; color: #fff !important; }
.btn-danger:hover { background: #92301A !important; color: #fff !important; }

.btn-warning { background: var(--wfa-accent) !important; color: #fff !important; }

.btn.disabled, .btn[disabled] { opacity: .45 !important; box-shadow: none !important; }

/*  The big two-line buttons: a small kicker over a large label. */
#goto2a, .btn-big, .goto3, #goto4, #goto5, #goto7, #wait3 { text-align: center; }
#goto2a small, .btn-big small, .goto3 small, #goto4 small, #goto5 small, #goto7 small, #wait3 small {
    display: block;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: 3px;
}

#step1 .btn { width: 100%; margin-top: 6px; }

/* -------------------------------------------------------- step banner */

/*  Every step from 2 on opens with .alert carrying "Step N of 7" and one
 *  line of instruction. It was a bootstrap alert; it reads better as a
 *  headline with a step chip. */
.alert {
    background: var(--wfa-bg-band) !important;
    border: 0 !important;
    border-radius: 20px !important;
    color: var(--wfa-ink) !important;
    font-size: clamp(15px, 1.7vw, 18px) !important;
    line-height: 1.45 !important;
    font-weight: 600;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    text-shadow: none !important;
}
.alert strong { color: var(--wfa-accent-deep); }
.alert .btn { margin-top: 4px; }
.alert i.fal { color: var(--wfa-accent-deep) !important; opacity: .75; }

.alert-warning { background: #F8E2DC !important; color: #8C2D16 !important; }

/* --------------------------------------------------------- progress rail */

/*  The bullets were six background sprites positioned by negative offsets,
 *  one PNG per step in two states. They are a flex rail of bars and labels
 *  now: no images, no fixed widths, and it survives a step being added.
 *
 *  The li classes stay exactly as they were, because populate-functions.js
 *  toggles .current and .completed on them. */
#onboarding {
    display: block !important;
    table-layout: auto !important;
    margin: 10px 0 34px !important;
}
#onboarding ul {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 4px;
    margin: 0;
    padding: 0;
}
#onboarding ul li,
#onboarding ul li:first-of-type,
#onboarding ul li.step-profiles,
#onboarding ul li.step-username,
#onboarding ul li.step-bio,
#onboarding ul li.step-videos,
#onboarding ul li.step-photos,
#onboarding ul li.step-profiles.current,
#onboarding ul li.step-username.current,
#onboarding ul li.step-bio.current,
#onboarding ul li.step-videos.current,
#onboarding ul li.step-photos.current {
    background: none !important;
    background-image: none !important;
    display: flex !important;
    flex: 1 1 0;
    min-width: 90px;
    flex-direction: column;
    gap: 8px;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wfa-ink-mute-3);
}

/*  The rail itself: a bar above each label, filled once the step is done. */
#onboarding ul li::before {
    content: "";
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--wfa-bg-quiet-2);
}
#onboarding ul li.completed { color: var(--wfa-ink-mute); }
#onboarding ul li.completed::before { background: var(--wfa-accent); opacity: .45; }
#onboarding ul li.current { color: var(--wfa-accent-deep); font-weight: 700; }
#onboarding ul li.current::before { background: var(--wfa-accent); }

/* -------------------------------------------------- found profiles cards */

.well#found { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

#found div.holder, #found > div {
    background: var(--wfa-bg-card);
    border-radius: 20px;
    box-shadow: var(--wfa-shadow-card);
    padding: 20px;
}
#found div .img, #found .img {
    border-radius: 14px !important;
    overflow: hidden;
    background: var(--wfa-bg-band);
}
#found div img { border-radius: 14px; }
#found div strong { font-weight: 800; color: var(--wfa-ink); letter-spacing: -.01em; }
#found div a.link { color: var(--wfa-link); font-size: 13px; word-break: break-word; }

/*  The tick that marks a profile as claimed. populate.css sets the selected
 *  state per network with a brand color each; only the frame changes here. */
#step2 .profile-check {
    border-radius: 16px !important;
    transition: box-shadow .15s ease, transform .15s ease;
}
#step2 .profile-check.selected { box-shadow: 0 0 0 3px var(--wfa-accent) !important; }

/* ---------------------------------------------------------- connect grid */

/*  Step 3b was a centered row of 160px tiles while every card was a disabled
 *  "Coming soon" badge. They hold input fields now, so this is the same
 *  three-across grid of labeled inputs as the social row on step 3, and for
 *  the same reason: it is the same question, and somebody who has just
 *  filled that row in should not have to read a second layout to fill this
 *  one.
 *
 *  A card that becomes a real Connect button keeps a field's footprint, so a
 *  mixed row does not reflow around it. */
#row-connections {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 4px 16px;
    margin: 0 !important;
}
#row-connections:before, #row-connections:after { display: none !important; }
#row-connections .connection {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#row-connections .connection .input-group-addon img { border-radius: 4px; }

#row-connections .connect-live {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
}
#row-connections .connect-live img {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------- usernames */

/*  populate.css sets font-variant: small-caps on both the suggestion buttons
 *  and the type-your-own field. The suggestions are camel case ("DTaylor",
 *  "officialDara"), so small-caps rendered the capital letters full height
 *  and every lowercase letter as a small capital: "DTAYLOR" with the T
 *  through R shrunk. It reads as a broken font rather than a style.
 *
 *  Uppercase instead. Only the rendering changes - .text() still returns the
 *  camel case string the button was built with, and populate.php lowercases
 *  the username before it stores it either way. */
.row-usernames .btn.btn-info {
    background: var(--wfa-bg-card) !important;
    color: var(--wfa-ink) !important;
    box-shadow: 0 1px 2px rgba(70,55,35,.05), 0 10px 26px -16px rgba(70,55,35,.4) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    font-size: 16px !important;
    font-variant: normal !important;
    font-variant-caps: normal !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    word-break: break-all;
}
.row-usernames .btn.btn-info:hover {
    background: var(--wfa-bg-accent-1) !important;
    color: var(--wfa-accent-deep) !important;
}

#username {
    font-size: 16px !important;
    font-variant: normal !important;
    font-variant-caps: normal !important;
}

/* ------------------------------------------------------------------ bios */

.col-bios .bio-holder {
    background: var(--wfa-bg-card) !important;
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: var(--wfa-shadow-card) !important;
    padding: 24px !important;
    transition: box-shadow .15s ease;
}
.col-bios .bio-holder:hover { box-shadow: 0 0 0 3px var(--wfa-accent), var(--wfa-shadow-card) !important; }
.col-bios .label {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em;
    padding: 5px 11px !important;
}
.bio-overflow p { color: var(--wfa-ink-body); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------ media grid */

/*  Videos and photos. Both were fixed-width floats; they are a fluid grid
 *  that reflows from six across to two on a phone. */
.row-media, .row-photos {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
    gap: 14px;
    margin: 0 !important;
}
.row-media > .col-xs-6, .row-photos .item {
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/*  Isotope used to run on #row-photos, and it is what put the photo picker
 *  at two enormous tiles per row: it absolutely positions every .item and
 *  writes an explicit height on the container, measuring a column width from
 *  the first item - which the grid above had already stretched to a full
 *  column. Grid and isotope cannot both lay out the same box.
 *
 *  populate-functions.js no longer initialises it, so nothing writes those
 *  inline styles any more. These three lines only exist so that a stale
 *  cached copy of that file, or anything that turns isotope back on, cannot
 *  bring the two-across layout back with it. */
.row-photos { position: static !important; height: auto !important; }
.row-photos .item { position: static !important; left: auto !important; top: auto !important; }
.row-photos .item img, #step6 .col-xs-6 section img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 14px !important;
    display: block;
    cursor: pointer;
    transition: box-shadow .15s ease, opacity .15s ease;
    opacity: .58;
}
.row-photos .item img:hover, #step6 .col-xs-6 section img:hover { opacity: 1; }
.row-photos .item img.valid, .row-photos .item img.comperables.valid {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--wfa-accent) !important;
}
#step6 .col-xs-6 section { background: transparent !important; border: 0 !important; padding: 0 !important; }
#step6 .col-xs-6 section h3 { font-size: 13px !important; font-weight: 700; margin: 9px 0 0 !important; color: var(--wfa-ink-body) !important; line-height: 1.35; }

/*  populate.css hides everything past the tenth photo. Left in place: that
 *  is a deliberate cap on the grid, not a styling accident. */

/* -------------------------------------------------------- finished modal */

#step8 .modal-dialog { max-width: 660px; width: auto; margin: 0 auto; }
#step8 .modal-content {
    background: var(--wfa-bg-card) !important;
    border: 0 !important;
    border-radius: 26px !important;
    box-shadow: var(--wfa-shadow-lift) !important;
    overflow: hidden;
}
#step8 .modal-body { padding: clamp(24px, 4vw, 38px) !important; }
#step8 .modal-body hr { border-top: 1px solid var(--wfa-line); margin: 22px 0; }
#step8 .modal-body p { color: var(--wfa-ink-body); font-size: 15px; }
#step8 .final-banner h4 {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--wfa-link) !important;
    margin: 0 0 8px !important;
}
#pass, #finishedURL {
    font-weight: 800;
    color: var(--wfa-ink);
    font-size: 17px;
    word-break: break-all;
}
#step8 .modal-footer {
    background: var(--wfa-bg-card-alt) !important;
    border-top: 1px solid var(--wfa-line) !important;
    padding: 22px !important;
}
#step8 .modal-footer .btn { width: 100%; max-width: 420px; }

/*  The progress button: an orange fill that grows across it as the build
 *  runs. Pusher drives the width from populator/index.php. */
#loading-button { position: relative; overflow: hidden; text-align: left; padding: 18px 24px !important; }
#loading-button em {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,.22);
    width: 0; transition: width .4s ease;
}
#loading-button div { position: relative; z-index: 1; font-size: 14.5px; }
#loading-button strong { font-weight: 700; }

/* ----------------------------------------------------------- the modals */

.modal-content { border-radius: 22px !important; border: 0 !important; box-shadow: var(--wfa-shadow-lift) !important; }
.modal-body .label { border-radius: 999px !important; padding: 4px 10px !important; font-weight: 700; }
.modal-footer { border-top: 1px solid var(--wfa-line) !important; }

/* --------------------------------------------------------------- timer */

#timer, .timer {
    font-family: inherit !important;
    color: var(--wfa-ink-mute) !important;
    background: transparent !important;
    border: 0 !important;
}

/* ------------------------------------------------------------ the skip */

#skip { text-align: right; }
#skip .btn { margin-left: 8px; }

.hr-with-message div { background: var(--wfa-bg) !important; color: var(--wfa-ink-mute-3) !important; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------- see how it works */

/*  includes/howitworks.php sits inside #step1, and it opens a second
 *  bootstrap .container inside the one #main already is. Nested containers
 *  add their padding twice and the inner one keeps its own fixed width, so
 *  the laptop mockup ran off the right edge of the page and took the
 *  document's scroll width with it. */
#main .container, #main .container-fluid {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main .black-wrapper, #main .asseen-wrapper {
    background: transparent !important;
    margin-top: 20px !important;
}

#how-it-works h6 {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: var(--wfa-link) !important;
    margin: 44px 0 16px !important;
}
#how-it-works #video-holder {
    max-width: 860px;
    margin: 0 auto;
}
#how-it-works #video-holder img { width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------- responsive */

@media (max-width: 767px) {
    #main { padding-left: 14px; padding-right: 14px; }
    .well { border-radius: 20px !important; padding: 22px 18px !important; }
    .alert { padding: 16px 18px !important; border-radius: 16px !important; font-size: 15.5px !important; }

    /*  The step buttons that bootstrap laid out as columns. Full width on a
     *  phone, which is what a single forward action wants to be anyway. */
    #goto7, .goto3, #goto4, #goto5, #goto2a, .btn-big {
        width: 100% !important;
        float: none !important;
        margin-bottom: 10px;
    }

    /*  The alert on step 6 carries two buttons floated right. Stacked, they
     *  stop overlapping the instruction line. */
    #goto7top, #select-all { float: none !important; display: inline-block; margin: 10px 6px 0 0 !important; }

    .row-media, .row-photos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 10px; }

    #onboarding ul li { min-width: 0; font-size: 11px; }

    #step8 .modal-footer .btn { max-width: none; }
    .row-usernames .btn.btn-info { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================== leftovers from the old
 *
 *  Four things the older stylesheets were still doing to this page. The
 *  populator loads sandstone.css, populate.css, sinister.css and flapper.css
 *  before this file, and none of them were written for the new look.
 */

/*  populate.css has "#logo-insta { border-radius: 50% }", from when that id
 *  really was a circular Instagram avatar. It is now the site lockup, 196 by
 *  26, and a 50% radius on a wide rectangle clips both ends of it. */
#logo-insta { border-radius: 0 !important; }

/*  sandstone.css (and global.css) draw a 1px #666 rule down the left of
 *  every .alert with a :before. Against the beige panel it reads as a stray
 *  black line, and "border: 0" on the element itself cannot reach it. */
.alert:before { display: none !important; }

/*  The found-account cards are .col-md-6, so bootstrap's 15px gutter was
 *  their only horizontal separation, and the card padding set above
 *  overrides it. They sat edge to edge. A grid gives them a real gap in
 *  both directions and drops the float layout, which is also what makes
 *  them equal height. */
#found {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}
/*  ...and that !important is why the card list would not go away at the end
 *  of the scan. profilesDone() calls $('#found').hide(), which writes an
 *  inline display:none, and an inline declaration loses to an !important one
 *  in a stylesheet. So the last source's candidates sat under "Scanning
 *  complete: feel free to fill in the rest" with their "Yes, it's me" buttons
 *  still live, as if the step had not finished.
 *
 *  The class is what hides it now. profilesDone() adds it, and initProfile()
 *  takes it off again if another source turns up something. Keeping the
 *  !important on display:grid rather than dropping it, because the rule has
 *  to beat .well and bootstrap's own block. */
#found.wfa-scan-finished { display: none !important; }
/*  #found carries .clearfix, whose :before and :after become grid items the
 *  moment the container is a grid. They are empty, but they take the first
 *  two cells and push every card along by two. */
#found:before, #found:after { display: none !important; }
#found > div {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/*  The row that carries the source title and its skip button.
 *
 *  populate.css floats #heading left, and #skip is a plain block after it
 *  holding a right-aligned button, so the two never sat on a shared
 *  baseline: the title rode at the top of the row and the button dropped
 *  below it and to the right. Making the row a flex line puts them on one
 *  row, centered against each other, and lets them stack on a narrow
 *  screen instead of colliding.
 *
 *  The float and the 15px padding populate.css sets have to be undone
 *  here or the flex item still behaves like a float. */
.wfa-onb-headrow {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    margin: 0 0 18px !important;
}
/*  Same trap as #found. This is a bootstrap .row, and its :before and
 *  :after become flex items the moment the container is a flex box. They
 *  are empty but they still take cells, so space-between shared the line
 *  between four items and pushed the title and the button inward instead
 *  of out to the edges. */
.wfa-onb-headrow:before, .wfa-onb-headrow:after { display: none !important; }
.wfa-onb-headrow > #heading {
    float: none !important;
    padding-left: 0 !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
}
.wfa-onb-headrow > #skip {
    width: auto !important;
    margin: 0 !important;
    text-align: right;
}
.wfa-onb-headrow > #skip > .col-sm-12 {
    width: auto !important;
    padding: 0 !important;
    float: none !important;
}
.wfa-onb-headrow #heading h3 { margin: 0 !important; }
#skip .btn { margin: 0 !important; }


/*  The source name is a bootstrap .label, which sandstone.css draws as a
 *  dark rectangle with .25em of radius. At the h3's size that reads as
 *  square. Rounded to match the cards and buttons around it. */
#heading .label,
#found .label,
.alert .label {
    border-radius: 10px !important;
    border: 0 !important;
    padding: .25em .6em .3em !important;
}