/* ============================================================
   apply.css — the tester recruitment page.

   Loaded after yuzutrace.css, which owns the shell, the tokens and the .method /
   .step component reused here for "what a session is" — the structure is the
   same numbered sequence, so it borrows the component rather than cloning it.

   Every other class was checked as free in yuzutrace.css before being written.
   ============================================================ */

/* ---------- What the words become ----------
   The picture claims the width the reading column leaves empty, the same
   breakout the pricing cards use — derived from the tokens, not measured. */

/* On a phone the figure follows the steps, which is its DOM order and reads
   as their conclusion. From 1024px it moves into the column the annotation
   gutter leaves empty on this one section. */
.figband { margin: 2.5rem 0 0; }

@media (min-width: 1024px) {
    .sheet--session {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
        column-gap: clamp(2rem, 4vw, 3.25rem);
        align-items: start;
    }
    .sheet--session .col { grid-column: 2; max-width: none; }
    .sheet--session .figband { grid-column: 1; grid-row: 1; margin: .4rem 0 0; }
}

.figband img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--hair);
    /* The generated image runs warm against a cool ground; a touch of
       desaturation settles it into the palette without killing the light. */
    filter: saturate(.92);
}

.figband figcaption {
    display: grid; gap: .5rem;
    margin-top: 1.1rem; padding-top: 1.1rem;
    border-top: 1px solid var(--hair);
}
.figband figcaption b {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.2; color: var(--bone);
}
.figband figcaption span {
    font-size: .95rem; line-height: 1.65; color: var(--bone-2); max-width: 60ch;
}

/* ---------- Pay ---------- */

.payline { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 1.75rem 0 1.25rem; }
.payline__amount { font-family: var(--display); font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1; }
.payline__per {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--bone-3);
}

.paynote {
    margin-top: 2rem; padding: 1.1rem 1.25rem;
    background: var(--void); border-left: 2px solid var(--chalk-ink);
}
.paynote span {
    display: block; margin-bottom: .3rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-3);
}
.paynote p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--bone-2); }

/* ---------- Who we want, and what we never ask ---------- */

.ticklist, .nevlist { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 62ch; }
.ticklist li, .nevlist li {
    position: relative; padding-left: 1.9rem;
    font-size: .97rem; line-height: 1.6; color: var(--bone-2);
}
.ticklist li::before {
    content: "+"; position: absolute; left: 0; top: -.05em;
    font-family: var(--mono); font-size: .85rem; color: var(--chalk-ink);
}
/* A cross, not a tick: this list is the promises we do NOT make, and giving
   both lists the same marker would invert the meaning of half the page. */
.nevlist li::before {
    content: "×"; position: absolute; left: 0; top: -.05em;
    font-family: var(--mono); font-size: .95rem; color: var(--sev-1);
}

.whono {
    margin: 2rem 0 0; padding: 1.1rem 1.25rem;
    border: 1px dashed var(--hair-firm);
    font-size: .95rem; line-height: 1.62; color: var(--bone); max-width: 62ch;
}

/* ---------- The card ----------
   The form opens in place instead of throwing the reader to the bottom of the
   page. A native <dialog>, so focus, Escape and the backdrop are the
   browser's job rather than ours to reimplement badly. */

.card {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(90vh, 56rem);
    padding: 0;
    border: 1px solid var(--hair-firm);
    border-radius: 2px;
    background: var(--panel);
    color: var(--bone);
    overflow: auto;
    overscroll-behavior: contain;
}
.card::backdrop { background: rgba(15, 17, 19, .55); }

/* Without showModal the dialog is opened inline: it becomes a normal panel in
   the flow rather than a floating card, and the form still works. */
.card:not([open]) { display: none; }
.card[open] { display: block; }

.card__inner { padding: clamp(1.75rem, 4vw, 2.75rem); position: relative; }
.card__inner .title { margin-top: .35rem; }

/* The × is the only way out, so it has to look like one: a bordered target
   from the start, not a mark that only appears on hover. 44px is the smallest
   a finger reliably hits. */
.card__close {
    position: absolute; top: 1rem; right: 1rem;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--void); border: 1px solid var(--hair-firm); border-radius: 2px;
    cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--bone-2);
    transition: border-color .12s ease, color .12s ease;
}
.card__close:hover { color: var(--bone); border-color: var(--pen); }
.card__close:focus-visible { outline: 2px solid var(--chalk-ink); outline-offset: 2px; }

/* Keep the heading clear of it rather than letting a long title run underneath. */
.card__inner .sectionmark { padding-right: 3.5rem; }

/* ---------- The form ---------- */

.apply { margin-top: 2rem; }

/* ---------- A numbered question ----------
   The form was the one section on this page with no numbering and no
   marginalia, which is exactly why it read as a generic contact form dropped
   into a designed page. Each group now carries a pin and a hairline, the same
   spine the method steps and the report findings use. */

.q {
    border: 0; padding: 2rem 0 0; margin: 0 0 2rem;
    border-top: 1px solid var(--hair);
}
.q:first-of-type { border-top: 0; padding-top: .5rem; }
.q--last { margin-bottom: 2.5rem; }

.q__title {
    display: flex; align-items: baseline; gap: .9rem;
    padding: 0; margin-bottom: 1.1rem;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2;
    color: var(--bone);
}
/* yuzutrace.css sizes .pin for a body-text baseline; inside a serif heading it
   needs holding down, or the number outweighs the question. */
.q__title .pin { flex: 0 0 auto; position: static; transform: none; }

/* Visible to a screen reader, not to the eye: the serif question above already
   names this field, and repeating it in mono would say the same thing twice. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.field { border: 0; padding: 0; margin: 0 0 1.9rem; }
.pair .field:last-child { margin-bottom: 0; }
.field label, .field legend {
    display: block; padding: 0; margin-bottom: .5rem;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-3);
}
/* Hints carry instructions, not decoration: --bone-3 measured 3.15:1 here.
   Placeholders keep --bone-3 on purpose, since they must read as lighter than
   a real answer. */
.hint { margin: -.2rem 0 .8rem; font-size: .86rem; line-height: 1.55; color: var(--bone-2); max-width: 56ch; }

.pair { display: grid; gap: 0; }
@media (min-width: 620px) { .pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.apply input[type="text"],
.apply input[type="email"],
.apply textarea {
    width: 100%; display: block; padding: .9rem 1rem;
    font-family: var(--sans); font-size: .96rem; line-height: 1.5; color: var(--bone);
    background: var(--void);
    border: 1px solid var(--hair-firm); border-radius: 2px;
    transition: border-color .15s ease;
}
.apply textarea { resize: vertical; min-height: 4rem; }
.apply input::placeholder, .apply textarea::placeholder { color: var(--bone-3); }
.apply input:focus, .apply textarea:focus { outline: none; border-color: var(--pen); }

/* ---------- Select ----------
   Seven markets was too many chips for a single answer. The native control is
   also what a phone renders as its own picker, which beats any list we could
   build for a one-of-seven choice. */

.selectwrap { position: relative; max-width: 26rem; }

/* The arrow is ours, drawn in the ink of the page, because the browser default
   is a system blue that belongs to no palette here. */
.selectwrap::after {
    content: ""; position: absolute; right: 1rem; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 1.5px solid var(--bone-2);
    border-bottom: 1.5px solid var(--bone-2);
    transform: rotate(45deg);
    pointer-events: none;
}

.apply select {
    width: 100%; display: block;
    padding: .9rem 2.75rem .9rem 1rem;
    font-family: var(--sans); font-size: .96rem; line-height: 1.5; color: var(--bone);
    background: var(--void);
    border: 1px solid var(--hair-firm); border-radius: 2px;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s ease;
}
.apply select:focus { outline: none; border-color: var(--pen); }
.apply select:focus-visible { outline: 2px solid var(--chalk-ink); outline-offset: 2px; }
/* Until a country is picked the control is a prompt, not an answer. */
.apply select:invalid,
.apply select option[value=""] { color: var(--bone-3); }
.apply select optgroup {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--bone-3);
}
.apply select option { color: var(--bone); font-family: var(--sans); font-size: .95rem; }

/* ---------- A field that appears ----------
   Indented under the choice that summoned it, so the connection is visible
   rather than implied by proximity alone. */

.reveal {
    margin: 1.25rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--hair);
    max-width: 34rem;          /* holds the system/browser pair side by side */
}
.reveal[hidden] { display: none; }
.reveal label {
    display: block; margin-bottom: .45rem;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-2);
}
/* Names the device the two fields below belong to. Without it "System" and
   "Browser" appear four times with nothing saying which is which. */
.reveal__title {
    margin: 0 0 .7rem;
    font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--bone);
}
/* ---------- Consent ----------
   Deliberately plain body text, not a mono micro-label: this is the one line
   on the form that carries a legal consequence, and it has to be as readable
   as the questions above it. */
.consent { margin: 1.9rem 0 .4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.consent__box {
    display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
    font-size: .93rem; line-height: 1.6; color: var(--bone);
}
.consent__box input {
    flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .22rem;
    accent-color: var(--pen); cursor: pointer;
}
.consent__box a { color: var(--pen); text-decoration: underline; text-underline-offset: 2px; }
.consent__note {
    margin: .6rem 0 0 1.75rem; font-size: .84rem; line-height: 1.55; color: var(--bone-2);
    max-width: 56ch;
}

/* Same mono label as .reveal label, but it introduces a chip row rather than a
   single control, so it stands on its own line. */
.reveal__ask {
    margin: 1.1rem 0 .55rem;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--bone-2);
}
.reveal .chips { margin: 0; }
.reveal .pair { gap: 1rem; }
@media (min-width: 620px) { .reveal .pair { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.reveal .selectwrap { max-width: none; }

/* ---------- Chips ----------
   Checkboxes and radios share this shape on purpose: the difference between
   "pick several" and "pick one" is carried by the question above them, not by
   a control the eye has to decode. */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    display: block; padding: .6rem 1rem;
    border: 1px solid var(--hair-firm); border-radius: 2px;
    font-size: .9rem; line-height: 1.3; color: var(--bone-2);
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.chip:hover span { border-color: var(--bone-3); color: var(--bone); }
.chip input:checked + span {
    border-color: var(--pen); background: var(--pen); color: #fff;
}
/* A chosen answer is worth reading back at a glance, so it carries a mark of
   its own rather than only a fill — the same reasoning as the pricing cards. */
.chip input:checked + span::before {
    content: "✓ "; font-family: var(--mono); font-size: .78em;
}
/* Visible focus even when the real control is off-screen — a keyboard user
   must be able to see where they are. */
.chip input:focus-visible + span { outline: 2px solid var(--chalk-ink); outline-offset: 2px; }

/* ---------- Outcome ---------- */

.alert {
    display: none;
    margin: 0 0 1.5rem; padding: .95rem 1.1rem;
    border-left: 3px solid var(--sev-1); background: rgba(193, 39, 45, .06);
    font-size: .93rem; line-height: 1.55;
}
.alert.show { display: block; }

/* The send block closes the document: a rule, the action, and the one line of
   consent that belongs next to the button rather than buried above it. */
.sendbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
    padding-top: 1.75rem; border-top: 1px solid var(--hair);
}
.sendbar .btn { flex: 0 0 auto; }
.sendbar .btn[disabled] { opacity: .55; cursor: progress; }
.sendbar__aside {
    flex: 1 1 18rem; margin: 0;
    font-size: .82rem; line-height: 1.55; color: var(--bone-3); max-width: 44ch;
}

.applied {
    margin-top: 2.5rem; padding: 2rem 1.75rem;
    border: 1px solid var(--hair-firm); border-left: 3px solid var(--pen);
}
.applied h3 {
    margin: 0 0 .6rem;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15;
}
.applied p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--bone-2); max-width: 56ch; }
.applied[hidden] { display: none; }

/* ---------- Second pass on the application card ---------- */

/* Small mono labels: 7.53:1 passes on paper, but at 10px uppercase with wide
   letter-spacing the strokes are thin enough that the measured ratio stops
   describing what the eye receives. Weight and size, not only colour. */
.apply .field label,
.apply .field legend,
.apply .hint {
    color: var(--bone);
}
.apply .field label,
.apply .field legend {
    font-weight: 500;
    font-size: .66rem;
    letter-spacing: .12em;
}
.apply .hint { color: var(--bone-2); font-size: .89rem; }

/* The example moves out of the textarea, where a full sentence read as an
   answer already given. */
.apply .example {
    margin: -.4rem 0 1rem;
    padding-left: .9rem;
    border-left: 2px solid var(--hair-firm);
    font-style: italic;
    font-size: .89rem; line-height: 1.6; color: var(--bone-2);
    max-width: 56ch;
}

/* A chip that can be chosen has to look choosable. Unselected, they read as
   labels; the selected state was already strong, the invitation was not. */
.chip span {
    background: var(--void);
    box-shadow: inset 0 -2px 0 var(--hair);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, color .12s ease;
}
.chip:hover span {
    border-color: var(--pen);
    color: var(--bone);
    box-shadow: inset 0 -2px 0 var(--pen);
}
.chip input:checked + span { box-shadow: none; }

/* The market picker was a raw system select beside styled controls, and half
   the width of the fields above it. */
.apply select {
    width: 100%;
    max-width: none;
    appearance: none; -webkit-appearance: none;
    padding: .9rem 2.6rem .9rem 1rem;
    font-family: var(--sans); font-size: .96rem; color: var(--bone);
    background-color: var(--void);
    border: 1px solid var(--hair-firm); border-radius: 2px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bone-2) 50%),
        linear-gradient(135deg, var(--bone-2) 50%, transparent 50%);
    background-position: calc(100% - 1.35rem) 55%, calc(100% - 1.05rem) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.apply select:focus { outline: none; border-color: var(--pen); }
.apply select:focus-visible { outline: 2px solid var(--chalk-ink); outline-offset: 2px; }

/* The close mark belonged to no other button on the site. */
.card__close {
    border-radius: 50%;
    border-color: var(--hair);
    font-size: 1.25rem;
}
.card__close:hover { background: var(--panel); border-color: var(--pen); }