/* ============================================================
   order.css — the brief form.

   Loaded after yuzutrace.css, which owns the shell and the tokens. The form is
   set as four numbered steps, matching the marked-up-document idea the rest of
   the site uses: a numbered pin, a hairline, no rounded corners.
   ============================================================ */

.overture--order { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

.order { margin-top: 2.5rem; }

/* ---------- A step ---------- */

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

.ostep legend {
    display: flex; align-items: baseline; gap: .85rem;
    padding: 0; margin-bottom: 1.35rem;
    font-family: var(--display); font-weight: 400;
    font-size: clamp(1.35rem, 2.6vw, 1.65rem); line-height: 1.2;
}
.ostep__num {
    font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
    color: var(--chalk-ink);
}

/* ---------- Choices ---------- */

.picks { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (min-width: 900px) { .picks { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 620px) { .picks--two { grid-template-columns: 1fr 1fr; } }

/* Past 1180px the reading column is capped at --column (720px), which is right
   for the questions and the fields but leaves three cards at 240px each. They
   reclaim the space the text deliberately leaves empty, exactly as the pricing
   page does — derived from the tokens, not measured by eye. */
@media (min-width: 1180px) {
    .picks:not(.picks--two) {
        margin-right: calc(-1 * (var(--frame) - 2 * var(--gutter) - var(--margin) - var(--column)));
    }
}

.pick { position: relative; display: block; background: var(--void); cursor: pointer; }
.pick--lead { background: var(--panel); }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }

/* A fixed-height flag row keeps the three names on one baseline whether or not
   a card carries the "most chosen" mark — otherwise the middle card sits lower
   than its neighbours and the row reads as a mistake. */
.pick__body { display: block; padding: 1.5rem 1.4rem 1.7rem; }
.pick--sm .pick__body { padding: 1.25rem 1.4rem 1.35rem; }
.picks:not(.picks--two) .pick__body { padding-top: 1.15rem; }

.pick__flag {
    display: block; height: 1.15rem; margin-bottom: .35rem;
    font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; line-height: 1.15rem;
    text-transform: uppercase; color: var(--chalk-ink);
}
.picks:not(.picks--two) .pick__body::before {
    content: ""; display: block; height: 1.15rem; margin-bottom: .35rem;
}
.picks:not(.picks--two) .pick--lead .pick__body::before { display: none; }

.pick__name {
    display: block; font-family: var(--display); font-size: 1.45rem; line-height: 1.15;
}
.pick__price {
    display: flex; align-items: baseline; gap: .45rem;
    margin: .6rem 0 .9rem; padding-bottom: .9rem;
    border-bottom: 1px solid var(--hair);
    font-family: var(--display); font-size: 1.85rem; line-height: 1;
}
.pick__cur { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); }
.pick__meta { display: block; font-size: .86rem; line-height: 1.55; color: var(--bone-2); }
.pick--sm .pick__price { border: 0; }

/* The selected card is marked, not merely tinted: a 2px rule on the inside
   edge, which survives a colour-blind reading and a black-and-white print. */
.pick::after {
    content: ""; position: absolute; inset: 0;
    border: 2px solid transparent; pointer-events: none;
}
.pick:has(input:checked)::after { border-color: var(--pen); }
.pick:has(input:focus-visible)::after { border-color: var(--chalk-ink); }
.pick:hover { background: var(--panel); }

/* ---------- Text fields ---------- */

.form-group { margin-bottom: 1.2rem; }
.form-group label,
.journey__head label {
    display: block; margin-bottom: .5rem;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-3);
}

.order input[type="url"],
.order textarea {
    width: 100%; display: block;
    padding: .9rem 1rem;
    font-family: var(--body); 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;
}
.order textarea { resize: vertical; min-height: 4.2rem; }
.order input[type="url"]::placeholder,
.order textarea::placeholder { color: var(--bone-3); }
.order input[type="url"]:focus,
.order textarea:focus { outline: none; border-color: var(--pen); }

.hint { margin: .6rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--bone-3); max-width: 58ch; }
.hint--lead { margin: -.6rem 0 1.35rem; }
.hint--fine { margin-top: 1rem; font-size: .8rem; }

/* ---------- Journeys ---------- */

.journeys { display: grid; gap: 1.2rem; }
.journey__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.journey__head label { margin-bottom: .5rem; }

.journey__remove {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bone-3);
}
.journey__remove:hover { color: var(--sev-1); }

.allowance {
    margin: 1rem 0 0;
    font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bone-3);
}

.addrow {
    margin-top: .9rem; padding: .7rem 1.1rem;
    background: none; border: 1px dashed var(--hair-firm); border-radius: 2px;
    cursor: pointer;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bone-2);
}
.addrow:hover { border-color: var(--pen); color: var(--pen); }
.addrow[hidden] { display: none; }

/* ---------- Checkout ---------- */

.checkout {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem;
    margin-top: 2.25rem; padding-top: 1.75rem;
    border-top: 1px solid var(--hair);
}
.checkout__label {
    display: block;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone-3);
}
.checkout__amount {
    display: block; margin-top: .3rem;
    font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1;
}
.checkout .btn { flex-shrink: 0; }
.checkout .btn[disabled] { opacity: .55; cursor: progress; }

/* ---------- Errors ---------- */

.order .alert {
    display: none;
    margin-top: 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;
}
.order .alert.show { display: block; }

/* ---------- Protocol picker + address ----------
   One control in two parts: the protocol is chosen, the address is typed.
   Most people paste an address without its protocol, and the validator used
   to reject them for it. */

.urlfield {
    display: grid;
    grid-template-columns: auto 1fr;
    border: 1px solid var(--hair-firm);
    border-radius: 2px;
    background: var(--void);
    max-width: 34rem;
    transition: border-color .15s ease;
}
.urlfield:focus-within { border-color: var(--pen); }

.urlfield select {
    appearance: none; -webkit-appearance: none;
    border: 0; border-right: 1px solid var(--hair);
    background: transparent;
    padding: .9rem 2rem .9rem 1rem;
    font-family: var(--mono); font-size: .82rem; color: var(--bone-2);
    cursor: pointer;
    /* The chevron is drawn here rather than left to the system, whose blue
       belongs to no palette on this site. */
    background-image:
        linear-gradient(45deg, transparent 50%, var(--bone-3) 50%),
        linear-gradient(135deg, var(--bone-3) 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 55%, calc(100% - .82rem) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.urlfield select:focus { outline: none; }
.urlfield select:focus-visible { outline: 2px solid var(--chalk-ink); outline-offset: -2px; }

/* The wrapper carries the border, so the input inside carries none. */
.urlfield input {
    border: 0; background: transparent;
    padding: .9rem 1rem;
    font-family: var(--sans); font-size: .96rem; color: var(--bone);
    min-width: 0;
}
.urlfield input:focus { outline: none; }

/* ---------- Second pass on the brief form ----------
   Fixes measured, not guessed.

   Contrast — the hints, labels and the allowance line ran at 3.15:1 against
   this ground, under the 4.5:1 AA floor. The same failure the pricing cards
   had; it was fixed there and not here. */

.hint, .allowance, .form-group label, .journey__head label { color: var(--bone-2); }

/* The example was a complete, plausible sentence inside the textarea. A reader
   in a hurry takes that for something already filled in. It now sits above the
   field, in italics, visibly not a place to type. */
.example {
    margin: -.9rem 0 1.35rem;
    padding-left: .9rem;
    border-left: 2px solid var(--hair-firm);
    font-style: italic;
    font-size: .9rem; line-height: 1.6; color: var(--bone-2);
    max-width: 58ch;
}

/* The chosen package took --panel against a --void card: a ratio of 1.08:1,
   which the eye cannot see. It takes the ink ground, like the pricing page. */
.picks:not(.picks--two) .pick.pick--lead { background: var(--void); }
.picks:not(.picks--two) .pick:has(input:checked) .pick__name,
.picks:not(.picks--two) .pick:has(input:checked) .pick__price { color: #fff; }
.picks:not(.picks--two) .pick:has(input:checked) .pick__flag { color: var(--chalk); }
.picks:not(.picks--two) .pick:has(input:checked) .pick__cur { color: rgba(255, 255, 255, .62); }
.picks:not(.picks--two) .pick:has(input:checked) .pick__meta { color: rgba(255, 255, 255, .82); }
.picks:not(.picks--two) .pick:has(input:checked) .pick__price { border-bottom-color: rgba(255, 255, 255, .22); }
.picks:not(.picks--two) .pick:has(input:checked):hover { background: var(--pen-deep, #0f2540); }

/* A card that can be chosen has to look like it. The 2px rule already marks
   the selection; this marks that a choice is on offer at all. */
.pick:hover { background: var(--panel); }
.pick:has(input:checked) .pick__name { font-weight: 500; }

/* The chosen card takes the ink ground. One card carries one signal: the flag
   still says which one we recommend, the ground says which one you picked. */
.picks:not(.picks--two) .pick:has(input:checked) { background: var(--pen); }
.picks:not(.picks--two) .pick:has(input:checked) .pick__flag { color: var(--chalk); }
.picks:not(.picks--two) .pick:has(input:checked):hover { background: var(--pen-deep, #0f2540); }

/* The amount is what the client is agreeing to. It was set lighter than the
   button beside it, so the eye met the action before the price. */
.checkout__amount { color: var(--bone); font-weight: 400; }
.checkout__label { color: var(--bone-2); }

/* Mono labels are small and uppercase, which costs legibility before colour
   does. They sit at --bone-2 (7.53:1) rather than --bone-3 (3.15:1). */
.ostep__num { color: var(--pen); }

/* The margin notes were touching. */
.overture--order .gutter .note + .note { margin-top: 2.25rem; }

/* ---------- Readiness ----------
   The button is dead until the form can be sent, and says why. A disabled
   control with no explanation makes a visitor click twice and leave. */

.blocked {
    margin: 1.5rem 0 0;
    padding-left: .9rem;
    border-left: 2px solid var(--sev-2);
    font-size: .88rem; line-height: 1.55; color: var(--bone-2);
}
.blocked:empty { display: none; }

.checkout .btn[disabled] {
    opacity: 1;                       /* not a ghost: a closed door */
    background: transparent;
    border-color: var(--hair-firm);
    color: var(--bone-3);
    cursor: not-allowed;
}

/* A section that has what it asked for turns its number to ink. The rest of
   the site numbers everything; this makes the numbers mean progress too. */
.ostep[data-done="true"] .ostep__num { color: var(--pen); font-weight: 500; }
.ostep[data-done="true"] .ostep__num::after {
    content: " ✓";
    font-size: .8em;
}
.ostep[data-done="false"] .ostep__num { color: var(--bone-3); }

/* ---------- Third pass ----------
   The disabled button became a pale outline on a pale ground and vanished.
   A closed door still has to be visible: the client must see where the action
   is, that it is blocked, and why. Solid grey, white text. */

/* #6b7278 rather than --bone-3: white on --bone-3 gives 3.40:1, under the AA
   floor. A disabled control still has to be readable — it is telling the
   client where the action is. This gives 4.88:1. */
.checkout .btn[disabled] {
    background: #6b7278;
    border-color: #6b7278;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

/* Small mono labels: the ratio was already 7.53:1, which passes. But at 10px
   uppercase with wide letter-spacing the strokes are thin enough that the
   measured ratio stops describing what the eye gets. Colour alone could not
   fix it — this adds weight and a little size, and takes the near-black ink. */
.order .form-group label,
.order .journey__head label,
.order .allowance,
.order legend + .hint,
.urlfield + .hint {
    color: var(--bone);
    font-weight: 500;
    font-size: .66rem;
    letter-spacing: .12em;
}
.order .allowance { font-size: .64rem; }

/* The amount is the thing being agreed to; it should outweigh the control. */
.checkout__amount { font-size: clamp(2.1rem, 4.4vw, 2.7rem); }

/* The two marginal notes were sitting on top of each other. */
.overture--order .gutter .note { margin-bottom: 2.5rem; }
.overture--order .gutter .note:last-child { margin-bottom: 0; }