/*
 *  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; }

/*  The source logo in an input group.
 *
 *  populate-functions.js draws each scanned source as
 *  <span class="input-group-addon"><img src=...></span> in front of its
 *  field, so the image is the left cap of the control and only its left
 *  corners should be rounded. */
.input-group-addon img {
    border-radius: 10px 0 0 10px;
    margin-left: 4px;
}

/*  #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 caption under the name, on two lines.
 *
 *  wfaCardCaption() decides what goes in it. A source whose value is an
 *  identifier gets a label over it, because "UC6eVw26xXO_7Fzton" on its own
 *  says nothing about what it is; a source whose value is already a sentence
 *  gets the sentence and no label.
 *
 *  Both shapes come out two lines tall. With a label the value takes one
 *  line, without one it takes two, and min-height holds the space either way
 *  so the "Yes, it's me" buttons sit on one line across a row of cards
 *  rather than stepping down wherever a caption ran short. */
#found div i {
    display: block;
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    min-height: 40px;
    margin-bottom: 10px;
    overflow: hidden;
}
#found div i .wfa-ck {
    display: block;
    font-weight: 700;
    color: var(--wfa-ink-mute);
}
#found div i .wfa-cv {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--wfa-ink-body);
    word-break: break-word;
}
/*  One line for the value when a label is already using the other one. */
#found div i .wfa-ck + .wfa-cv {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

/*  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; }
/*  No forced square and no cropping.
 *
 *  aspect-ratio: 1/1 with object-fit: cover cut a headshot down to a square
 *  and threw away whatever fell outside it, which is why the pictures came
 *  out looking wrong. A photograph is shown at its own proportions here; the
 *  grid rows simply take the height of their tallest tile.
 *
 *  #step6's video stills are handled separately, further down, where the two
 *  sources DO need to match each other. */
.row-photos .item img, #step6 .col-xs-6 section img {
    width: 100% !important;
    height: auto !important;
    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; }

/*  Show every photograph, not the first ten.
 *
 *  populate.css carries these two, from when .row-photos was a row of 20%
 *  floats and a long list would have run off the page:
 *
 *      .row-photos .item:nth-child( n+11 ) { display: none }
 *      .row-photos .item:nth-child( n+9 )  { display: none }   under 991px
 *
 *  Nothing overrode them, so the picker built all 30 tiles and the browser
 *  drew 10. That is the whole of "it only shows 10 photos": not the scrape,
 *  not the 60 cap, not the wait. The other 20 were in the DOM the entire
 *  time, which is exactly why counting .item found 30 and the screen showed
 *  six and then four.
 *
 *  The grid above already reflows to the width available, so there is
 *  nothing left for a cap to protect. */
#step7 .row-photos .item:nth-child( n+9 ),
#step7 .row-photos .item:nth-child( n+11 ),
.row-photos .item:nth-child( n+9 ),
.row-photos .item:nth-child( n+11 ) {
    display: block !important;
}
.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;
}


/* ------------------------------------------------- connect cards, step 3b */

/*  Built to match the profile cards on the step before this one. Somebody
 *  who has just worked down a row of "Yes, it's me" cards meets the same
 *  shape here, for the same kind of question. The rules mirror #found's
 *  deliberately rather than sharing a class, because #found carries
 *  display:grid !important and a scan-finished hide that must not reach
 *  these. */
#row-connections .connect-card {
    background: var(--wfa-bg-card);
    border-radius: 20px;
    box-shadow: var(--wfa-shadow-card);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
#row-connections .connect-card .img {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--wfa-bg-band);
    display: flex;
    align-items: center;
    justify-content: center;
}
#row-connections .connect-card .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    margin: 0;
}
#row-connections .connect-card .connect-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
/*  Identical to #found div a.link and #found div i, not "similar to". The
 *  point of the card is that it reads as the same thing as the profile
 *  cards, and a heavier weight or an underline that those do not have is
 *  exactly what makes it look like a different component. */
/*  13px, the small one. #found carries two a.link rules and the second
 *  overrides the size to 24px, which is right for a person's name filling a
 *  profile card and far too big for a one-word platform label. The order
 *  wanted is: link small, <i> a little bigger, button same as Skip. */
#row-connections .connect-card .link {
    display: block;
    color: var(--wfa-link);
    font-style: normal;
    font-size: 13px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    cursor: pointer;
}
#row-connections .connect-card i {
    display: block;
    font-style: normal;
    font-size: 14px;
    margin-bottom: 10px;
    overflow: hidden;
}

/* --------------------------------------------- what we ask each platform */

#connect-privacy-panel {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 10, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1080;
}
#connect-privacy-panel[hidden] { display: none; }
.connect-privacy-box {
    background: var(--wfa-bg-card);
    border-radius: 20px;
    box-shadow: var(--wfa-shadow-card);
    padding: 28px;
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
}
.connect-privacy-box h4 { margin: 0 0 12px; font-weight: 800; letter-spacing: -.02em; }
/*  The text carries its own paragraph breaks, so they are honored rather
 *  than collapsed into one block. */
.connect-privacy-box p { white-space: pre-line; margin: 0 0 16px; }
.connect-privacy-box .connect-privacy-more { margin-bottom: 20px; font-size: 14px; }


/* --------------------------------------------------------- step 6, media */

/*  Three across, and each thumbnail a 3:2 frame so a row of mixed YouTube and
 *  Vimeo stills lines up instead of stepping up and down with whatever
 *  aspect each provider happened to return. */
#step6 .row-media {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (min-width: 1200px) {
    #step6 .row-media { grid-template-columns: repeat(3, 1fr); }
}
#step6 .row-media > [class*="col-"] {
    width: auto;
    float: none;
    padding-left: 0;
    padding-right: 0;
}
/*  .row carries .clearfix, and its ::before and ::after become grid items
 *  the moment the container is a grid - so the first video sat in slot 2
 *  with an empty box in front of it. Same trap #found already documents. */
#step6 .row-media::before,
#step6 .row-media::after {
    display: none !important;
}

/*  16:9, because that is what both sources already are.
 *
 *  Measured: a YouTube maxresdefault is 1280x720 and a Vimeo d_640 is
 *  640x360. Both are 16:9. An earlier pass framed these at 3:2 and stretched
 *  to fill, which distorted every single tile - 1280x720 rendering as
 *  326x217 - to solve a mismatch that does not exist.
 *
 *  Matching the frame to the content means the two sources line up with no
 *  stretching and no cropping, which is what was wanted. contain rather than
 *  cover so an odd-sized thumbnail letterboxes instead of being cut into. */
#step6 .row-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
    min-height: 0;
    background: var(--wfa-bg-band);
}

/*  The frame must not be shorter than the thing it frames.
 *
 *  populate.css still carries `#step6 .col-xs-6 section { height: 160px;
 *  overflow: hidden }` from when these tiles were two across and nearly
 *  square. The thumbnail above is 16:9 of the column, which at full width
 *  comes out around 186px tall, so every YouTube and Vimeo still had its
 *  bottom cut off inside a box 26px too short for it.
 *
 *  Not a bigger fixed number, which would only be right at one window
 *  width. auto is right at all of them, because the image's own
 *  aspect-ratio is what decides the height. */
#step6 .col-xs-6 section,
#step6 .row-media section {
    height: auto;
}

/*  The shadow read as a second card edge inside the card. */
#step6 .row-media .ImageWrapper,
#step6 .col-xs-6 section.ImageWrapper {
    box-shadow: none !important;
}

/*  Titles get room to breathe rather than being clipped to one line. */
#step6 .row-media section h3 {
    white-space: normal;
    line-height: 1.3;
}

@media (max-width: 767px) {
    #step6 .row-media { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    #step6 .row-media { grid-template-columns: 1fr; }
}

/*  The title sat in a fixed-height box with a shadow under it, which read as
 *  a second card edge inside the card. */
#step6 .col-xs-6 section h3,
#step6 .row-media section h3 {
    height: auto;
    padding: 5px 8px;
    box-shadow: none;
}

/*  Brand color per source, at the size the rest of these rows use. */
#step6 .row-media section h3 .fa-youtube {
    color: #CC181E;
    font-size: 25px;
    float: left;
    margin-right: 5px;
}
#step6 .row-media section h3 .fa-vimeo-square {
    color: #86c9ef;
    font-size: 25px;
    float: left;
    margin-right: 5px;
}


/*  ---------------------------------------------------------------------
 *  The video tile, rebuilt around what the two sources actually send.
 *
 *  Measured on a live signup rather than assumed:
 *
 *      YouTube   sddefault.jpg   640x480   4:3
 *      Vimeo     ..._d_640       640x360   16:9
 *
 *  They are not the same shape, and a portrait video makes it worse.
 *  YouTube pillarboxes one into 4:3 with bars baked into the JPEG, and
 *  those bars sample at #010101, which is black. Framing that at 16:9 over
 *  a cream page therefore gave every YouTube still two nested letterboxes,
 *  one black and one cream. The black one read as mid-gray only because
 *  the image is dimmed to show it is unselected, which is why this looked
 *  like a rendering fault rather than a letterbox.
 *
 *  So the frame is black. Whatever a source bakes in merges into it, and
 *  the tile reads as one deliberate letterbox.
 *
 *  contain, never cover. Cropping a portrait video into 16:9 cuts the
 *  person's head off, and the person is the entire point of the thumbnail.
 *  --------------------------------------------------------------------- */
#step6 .row-media .holder {
    padding: 0;
    overflow: hidden;
    background: var(--wfa-bg-card);
    border: 1px solid var(--wfa-line);
    transition: border-color .12s, box-shadow .12s;
}
#step6 .row-media section.ImageWrapper,
#step6 .col-xs-6 section {
    background: #000 !important;
    height: auto;
}
#step6 .row-media section img,
#step6 .col-xs-6 section img {
    background: transparent;
    transition: opacity .12s;
}

/*  The caption was absolutely positioned against the bottom of the frame,
 *  so it covered the bottom 35px of every still. It belongs under the
 *  picture, where it cannot hide any of it. z-index keeps it above the
 *  overlay that fills the same box. */
#step6 .row-media section h3,
#step6 .col-xs-6 section h3 {
    position: relative;
    z-index: 2;
    height: auto;
    margin: 0 !important;
    padding: 9px 10px;
    line-height: 1.35;
    background: var(--wfa-bg-card);
    color: var(--wfa-ink-body);
    transition: background .12s, color .12s;
}

/*  Selected has to look different from hovered, and it did not.
 *
 *  sinister.css answers `.ImageWrapper:hover` and `.active` with the same
 *  green plus-sign overlay, so "click this to add it" and "you have added
 *  this" were the same picture. That overlay is also laid out wrong: it
 *  comes out 1267px square inside a 336px tile, so the icon is clipped by
 *  the frame and lands half-drawn in a corner.
 *
 *  It is not worth repairing for this one step. The tile says what it is
 *  doing on its own caption bar, which is where somebody is already
 *  reading, and green for chosen is what step 2 uses for its profiles. */
#step6 .row-media .PStyleN {
    display: none !important;
}
#step6 .row-media section.ImageWrapper:hover img {
    opacity: .8;
}
#step6 .row-media > .active section img {
    opacity: 1;
}
#step6 .row-media > .active .holder {
    border-color: #27ae60;
    box-shadow: 0 0 0 3px #27ae60;
}
#step6 .row-media > .active section h3 {
    background: #7bed9f;
    color: inherit;
}
#step6 .row-media > .active section h3::after {
    content: "  \2713";
    font-weight: 700;
}

/*  The caption is two lines, and the second one ends in an ellipsis.
 *
 *  text-overflow: ellipsis only ever works on ONE line, which is why setting
 *  it here did nothing: it needs a single-line box to have an end to put the
 *  mark at. Two lines needs -webkit-line-clamp, which every current browser
 *  supports and which places the ellipsis itself.
 *
 *  The clamp goes on the title, not on the h3, because the h3 also holds the
 *  source icon and a clamped box cannot contain a float. So the h3 is a flex
 *  line - icon, then title - and the title is the box that gets clamped.
 *
 *  min-height reserves both lines whether or not the title needs them, so a
 *  row of tiles keeps one baseline instead of stepping up and down. */
#step6 .row-media section h3,
#step6 .col-xs-6 section h3 {
    display: flex;
    align-items: flex-start;
}
#step6 .row-media section h3 > i,
#step6 .col-xs-6 section h3 > i {
    float: none !important;
    flex: 0 0 auto;
    line-height: 24px;
}
#step6 .row-media section h3 .wfa-vt,
#step6 .col-xs-6 section h3 .wfa-vt {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 10px;
    word-break: break-word;
}

/*  The vimeo glyph carries less side bearing than the youtube one, so at a
 *  shared margin it sits tighter against its title than youtube does. */
#step6 .row-media section h3 .fa-vimeo-square {
    margin-right: 8px;
}


/*  A button that is only telling you to wait must not look pressable.
 *
 *  Both of these are the WAITING state of a step and both were painted
 *  .btn-warning, the same orange every live button on the page uses:
 *
 *      #wait3           COLLECTING DATA - Just a moment
 *      #loading-button  That's it, <name>. Sit back for a few seconds...
 *
 *  Neither does anything when clicked. The one on the last step is the more
 *  expensive of the two to get wrong: it is not the finished button at all,
 *  that is a second .btn-success sitting hidden behind it reading "It's all
 *  ready. Show me my website!", so somebody who clicked the orange one and
 *  got nothing had no way to know they were early rather than broken.
 *
 *  Gray, and genuinely inert. pointer-events keeps the click from
 *  registering at all rather than registering and being swallowed. */
#wait3,
#wait3:hover,
#wait3:focus,
#wait3:active,
#loading-button,
#loading-button:hover,
#loading-button:focus,
#loading-button:active {
    background: var(--wfa-bg-quiet-2) !important;
    border-color: var(--wfa-line) !important;
    color: var(--wfa-ink-mute) !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
}

/*  The build progress still reads, it just is not the go-ahead green it was.
 *  populate.css animates this element's width from 0 to 100%. */
#loading-button em {
    background: var(--wfa-ink-mute-3) !important;
    opacity: .28;
}


/*  "select all" and CONTINUE sat 5px below the middle of their bar: they are
 *  floated, and a float has no vertical relationship to the text beside it.
 *  Measured at alert centre 105 against button centre 110.
 *
 *  Flex puts them on the same centre line. float is ignored in a flex
 *  container, so the two are re-ordered explicitly to keep the arrangement
 *  the floats produced: text, then select all, then CONTINUE. */
#step6 .alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
#step6 .alert > a {
    float: none !important;
    margin-left: 0 !important;
}
#step6 .alert #select-all  { order: 2; margin-left: auto !important; }
#step6 .alert #goto7top    { order: 3; }