/*
 * THE VENDOR PORTAL'S SURFACE — vendors.crolle.ai. One file, for the reason css/auth-surface.css and
 * css/team-portal.css both state: Blazor scopes a component's stylesheet to that component, so a rule shared by five
 * vendor pages would be five copies, five chances to drift, and five places to fix one colour.
 *
 * EVERY NUMBER HERE IS THE DESIGN'S OWN, taken literally from
 * docs/Design/vendore portal/Vendor portal design request latestes/ (Sign Up.dc.html, Sign In.dc.html,
 * Vendor Home.dc.html) with docs/Design/vendor-portal/DECISIONS.md applied over it. The design composes its pages
 * from constants at the top of its script — GREEN, IN, BT, B and TONE — and those are transcribed here in the same
 * order, so a reader can check this file against the design line by line:
 *
 *   GREEN  #047A62      the brand panel, and nothing else
 *   paper  #F3F1ED      the page behind both columns
 *   ink    #141413      every word on the paper
 *   line   #BDBAB2      a control's border
 *   bad    #A8352A      a control's border when it has a fault, and the fault's own words
 *   IN     height 52px, padding 0 14px, radius 3, white, 16px
 *   BT     height 52px, padding 0 22px, radius 3, 16px, weight 600
 *   B.pri  border 0, background #0E0F12, white
 *
 * WHAT THIS FILE IS NOT. It is not a second copy of the product's sign-in shell. The five product pages (Login,
 * Forgot, Reset, Activate, Domains) keep their own scoped stylesheets and their own palette, exactly as they are; the
 * vendor portal is a different surface on a different host for a different kind of account, and its design is the
 * newer delivery. Merging the two is a change to those five pages and belongs to whoever owns them.
 */

/* ---------------------------------------------------------------- the shell */

/* HIDDEN MEANS HIDDEN INSIDE THE VENDOR FRAME. The browser's own rule for the hidden attribute is weaker than any
 * class that sets a display, so a `.vp-form` or `.vp-grid` marked hidden stayed on screen: the password form did not
 * step aside when a state brought its own way on (found on the reset page, 29 September 2026), and every page that
 * hides a form, a list or a row by the attribute had the same hole. */
.vp-auth [hidden] {
    display: none !important;
}

.vp-auth {
    display: grid;
    grid-template-columns: 620px minmax(0, 1fr);
    min-height: 100vh;
    background: #f3f1ed;
    color: #141413;
    font-family: 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------- the panel Crolle speaks from */

.vp-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 64px 58px 56px;
    background: #047a62;
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
}

/* THE PANEL'S TWO DECORATIONS, both aria-hidden in the markup. The design draws them on the green panel and they
   are the whole of its texture: a stripe every 84px at 5% white, and one 760px circle outline offset off the
   top-left corner. The arc is desk-only in the design; the stripes are on both sizes. Neither is content, which is
   why neither is announced. */
.vp-brand-stripes {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 84px);
    pointer-events: none;
}

.vp-brand-arc {
    position: absolute;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    top: -280px;
    inset-inline-start: -240px;
    pointer-events: none;
}

/* THE BRAND'S WORDMARK, AS crolle.ai DRAWS IT (owner, 30 September 2026: "the logo should be the same as the
   website"): IBM Plex Sans at 650, the letters pulled together by the site's own -3.2px at 42px, and the orange full
   stop. The staff sign-in pages and the Crolle emails already carry it; the vendor portal now does too. */
.vp-wordmark,
.vp-bar-wordmark {
    font-family: 'IBM Plex Sans', Arial, sans-serif;
    font-weight: 650;
    letter-spacing: -0.076em;
    font-synthesis: none;
}

.vp-wordmark-dot {
    color: #ed895e;
}

.vp-wordmark {
    align-self: flex-start;
    /* THE SIZE THE STAFF SIGN-IN PAGES GIVE THE SAME WORDMARK on the same kind of panel. */
    font-size: 25px;
    /* `normal`, WHICH IS WHAT THE DESIGN'S OWN SPAN INHERITS. The page sets a line-height for its prose, so a span
       that inherits it is a different height from the design's — 23px against 17 at this size. Nothing about the
       wordmark is prose, and the 6px it cost was visible twice: the phone's green header came out 187 tall where the
       design draws 177, and the desktop's mid block was 5px too tall, which put the hero at 259 where 3a draws 255. */
    line-height: normal;
    color: #fff;
    text-decoration: none;
}

/* the hero sits in the middle of the panel, whatever the page's content is */
.vp-brand-mid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: auto;
    margin-bottom: auto;
}

/* MONOSPACE, and that is the design's own choice rather than a taste: `ui-monospace, Menlo, Consolas` at 10.5px with
   .08em of tracking reads as a small caps label above the hero, where a sans-serif at 13px reads as a sentence. */
.vp-kicker {
    margin: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    /* `normal`, for the reason the wordmark above gives: a label is not prose, and the design's own span inherits
       `normal`. It is 16px tall under the page's line-height against the design's 11. */
    line-height: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.vp-hero-phone {
    display: none;
}

/* THE HERO'S TWO SIZES, and the design draws both. A landing frame's hero is 64px on a wide screen; a STEP frame's
   is 46px, because the step list and the lead share its column. The frame carries `vp-hero-step` on a step frame and
   nothing on a landing, so this is the one place the numbers live. */
.vp-hero {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: 64px;
}

.vp-hero-step {
    font-size: 46px;
}

.vp-lead {
    margin: 0;
    max-width: 500px;
    font-size: 19px;
    line-height: 1.55;
    color: #e3f4ee;
}

/* ---------------------------------------------------- the steps a vendor walks */

.vp-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.vp-step {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
}

.vp-step-now {
    background: rgba(255, 255, 255, 0.14);
    font-weight: 700;
}

.vp-step-ahead {
    color: #cfede4;
}

.vp-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.vp-step-dot-now {
    background: #fff;
    color: #047a62;
}

.vp-step-dot-ahead {
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    color: #cfede4;
}

.vp-step-tag {
    margin-inline-start: auto;
    font-size: 12px;
    font-weight: 500;
    color: #bfe6da;
}

/* the three things the portal does, stated once, on the wide shell only.
   THE DESIGN DRAWS THEM AS THREE COLUMNS with a rule above the row and a hairline between the columns — the panel's
   own last band, not three stacked lines. The numbers are its own: a 1px rgba(255,255,255,0.3) top border with 14px
   of air above the words, and 1px rgba(255,255,255,0.22) dividers at the column edges. */
.vp-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    list-style: none;
}

/* THE DIVIDER IS ON EVERY COLUMN'S END, not between the columns, and the 14px of padding-right is what makes the
   words wrap where the design draws them. Both are the design's own numbers: its pillar cell is
   `padding-inline-end: 14px; border-inline-end: 1px solid rgba(255,255,255,0.22)`. Under the six-column pitch of
   620 - 116 = 504, a third of the band is 168px, so each cell's text gets 154 — and "Keep documents current" at
   13px/700 needs 155, so it takes the second line the design draws it on. The earlier rule spread the band with an
   18px column gap instead: 156px of text, the words fitted, and the drawn two-line wrap was lost. */
.vp-pillar {
    display: flex;
    flex-direction: column;
    /* 6px, THE DESIGN'S OWN `gap: 6px` on its pillar cell, and it is what holds the band's height at 67. At 2px the
       band came out 63 tall, and because the band is the panel's last child the four missing pixels moved its TOP
       down — the rule landed at 781 where the design draws 777. The number to keep an eye on is the RULE'S y, not
       the words': a change to the key's size or this gap moves it. */
    gap: 6px;
    padding-inline-end: 14px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.22);
}

.vp-pillar-key {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 9.5px;
    /* 400, WHICH IS THE DESIGN'S OWN: its pillar-key span carries no font-weight and the panel's body weight is
       inherited. At 700 the line was 15px tall against the design's 11 and read heavier than the words under it,
       which are the ones the design weights. */
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #cfede4;
}

.vp-pillar-value {
    font-size: 13px;
    font-weight: 700;
    /* 1.35, the design's own `line-height: 1.35` on its pillar value — not 1.45, which is the body's. */
    line-height: 1.35;
}

/* THE FOOTER SITS IN THE COLUMN, NOT ON THE PANEL, and the design is explicit about it: its footStyle is the last
   child of the right-hand column with `margin-top: auto` to hold it at the bottom, in INK on the paper (#3F3D38) —
   not in the panel's pale green. It also carries `margin-inline-start: -94px` on the wide shell, which walks it back
   into the panel's 190px of padding; that is set below, under min-width 901px. */
.vp-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: auto 0 0;
    padding-top: 24px;
    font-size: 12.5px;
    color: #3f3d38;
}

.vp-foot p {
    margin: 0;
}

/* ---------------------------------------------------- the column the person works in */

.vp-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 40px 96px 28px 190px;
    box-sizing: border-box;
}

/* THE STATE'S OWN WORD, above the title, INSIDE the column. This is a different element from `.vp-kicker`, which is
   the panel's: the design puts a green monospace label here — "Vendor access", "Password help", "Almost done",
   "Register your company · step 1 of 5" — and the panel's word on the left. Both exist on the same page. */
.vp-eyebrow {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #047a62;
}

.vp-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 440px;
    margin-top: 28px;
}

.vp-col-wide {
    max-width: 600px;
}

.vp-title {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: 50px;
}

.vp-col-wide .vp-title {
    font-size: 40px;
}

.vp-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #55534d;
}

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

.vp-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

/* the step pages lay their fields out in two columns on the wide shell */
.vp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    margin-top: 10px;
}

.vp-span {
    grid-column: 1 / -1;
    min-width: 0;
}

.vp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vp-label {
    font-size: 14px;
    font-weight: 600;
}

.vp-hint {
    font-size: 12.5px;
    line-height: 1.45;
    color: #55534d;
}

.vp-input {
    width: 100%;
    height: 52px;
    padding: 0 14px;
    border: 1px solid #bdbab2;
    border-radius: 3px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    color: #141413;
    box-sizing: border-box;
}

.vp-input:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 1px;
    border-color: #047a62;
}

/* A CONTROL WITH A FAULT IS 2px, not 1px: the width is the signal, so it survives a colour-blind reader and a
   monochrome print. This is the design's own rule. */
.vp-input-bad {
    border: 2px solid #a8352a;
}

/* A FIELD WITH A CONTROL INSIDE IT — the password's eye, which the design draws at the field's inline end. The
   wrapper is what the button is positioned against, and the input gives up 52px of its inline end so the words never
   run under the button. Both numbers are the design's. */
.vp-field-box {
    position: relative;
    display: flex;
}

.vp-input-eye {
    padding-inline-end: 52px;
}

.vp-eye {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: #22211e;
    cursor: pointer;
}

.vp-eye:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 1px;
}

.vp-error {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    color: #a8352a;
}

/* ---------------------------------------------------- banners */

.vp-banner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 4px;
    border: 1px solid;
}

.vp-banner-title {
    font-size: 14.5px;
    font-weight: 700;
}

.vp-banner-body {
    font-size: 13.5px;
    line-height: 1.5;
}

.vp-banner-red {
    background: #f7e7e4;
    border-color: #e1b9b1;
    color: #6e231b;
}

.vp-banner-green {
    background: #ddefe9;
    border-color: #a9d6c7;
    color: #0b4f40;
}

.vp-banner-amber {
    background: #f6ebd8;
    border-color: #e2c999;
    color: #4a340a;
}

.vp-banner-grey {
    background: #fff;
    border-color: #d5d2ca;
    color: #22211e;
}

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

/* A LINK THAT IS A BUTTON, and it has to be an anchor: it MOVES the person to another page, and a button that
   navigates is a button that lies about what it does. It borrows the button's box so the two are indistinguishable
   to look at, and it must state its own vertical centring because an anchor has no button's default. */
.vp-btn-anchor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.vp-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.vp-actions-full > .vp-btn {
    width: 100%;
}

.vp-btn {
    height: 52px;
    padding: 0 22px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.vp-btn:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 2px;
}

.vp-btn-pri {
    border: 0;
    background: #0e0f12;
    color: #fff;
}

/* 3d, THE BUTTON THAT IS WORKING. The design draws it as its own state rather than as a disabled primary: the fill
   lifts to #3A3B3F so it reads as "in progress" and not as "refused", and the cursor says the same. The label comes
   from the page (`data-vp-busy`), because the words are the page's. */
.vp-btn-busy {
    background: #3a3b3f;
    cursor: progress;
}

.vp-btn-sec {
    border: 1px solid #bdbab2;
    background: #fff;
    color: #141413;
}

/* ---------------------------------------------------- small print */

/* THE NOTE IS SET OFF BY A RULE, which is the design's own `isNote`: a top border and 18px of air above it, so it
   reads as an aside rather than as another line of the form. */
.vp-note {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid #d5d2ca;
    font-size: 13px;
    line-height: 1.6;
    color: #3f3d38;
}

.vp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    font-size: 14px;
}

.vp-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-weight: 600;
    color: #047a62;
}

.vp-links a:hover {
    color: #035c4a;
}

.vp-skip {
    position: absolute;
    left: -9999px;
}

.vp-skip:focus {
    left: 8px;
    top: 8px;
    z-index: 10;
    padding: 10px 14px;
    background: #fff;
    color: #141413;
    border-radius: 3px;
}

/* ---------------------------------------------------- the phone shell */

@media (max-width: 900px) {
    /* THE PHONE'S HERO IS THE STEP'S NAME. The design draws the product's sentence on a wide screen and the step's
       name on a phone, so both are in the markup and this decides which one a screen shows. */
    .vp-hero-wide {
        display: none;
    }

    .vp-hero-phone {
        display: inline;
    }

    .vp-auth {
        grid-template-columns: minmax(0, 1fr);
        min-height: 100dvh;
    }

    .vp-brand {
        padding: 28px 24px 24px;
        gap: 18px;
        flex-shrink: 0;
    }

    .vp-brand-mid {
        gap: 10px;
        margin: 0;
    }

    /* A step page's hero is 30px on the phone and a landing's is 32 — the design's own two numbers, kept apart here
       because one rule for both loses the second one. */
    .vp-hero {
        font-size: 32px;
    }

    .vp-hero-step {
        font-size: 30px;
    }

    .vp-lead,
    .vp-steps,
    .vp-pillars {
        display: none;
    }

    /* On the phone the steps become one line and a bar, which is the design's own answer to a 390px column: the
       list is what does not fit, and "Step 2 of 5" says the same thing in a sixth of the height. */
    .vp-progress {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .vp-progress-text {
        font-size: 13px;
        font-weight: 600;
        color: #cfede4;
    }

    .vp-progress-track {
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.25);
        overflow: hidden;
    }

    .vp-progress-fill {
        display: block;
        height: 100%;
        background: #fff;
    }

    .vp-panel {
        padding: 12px 20px 24px;
        overflow: visible;
    }

    .vp-col,
    .vp-col-wide {
        max-width: none;
        margin-top: 8px;
    }

    /* And the column's title the same way: 34px in a narrow column, 28px in the wide one the step pages use. */
    .vp-title {
        font-size: 34px;
    }

    .vp-col-wide .vp-title {
        font-size: 28px;
    }

    .vp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* THE FOOTER IS NOT HIDDEN HERE ANY MORE. The design draws it on the phone too, at the end of the column, and
       hiding it was a decision nobody had made. The arc is the one thing that IS desk-only, below. */
    .vp-brand-arc {
        display: none;
    }
}

/* The wide shell hides the phone's progress bar; both exist in the markup so neither is a second page. */
@media (min-width: 901px) {
    .vp-progress {
        display: none;
    }

    /* AND THE FOOTER WALKS LEFT ON THE WIDE SHELL. The design gives it `margin-inline-start: -94px`, which carries it
       back out of the column's 190px of padding so it lines up nearer the panel's edge. The phone keeps it flush. */
    .vp-foot {
        margin-inline-start: -94px;
    }
}

/* ================================================================ the app family
 *
 * The signed-in vendor's pages — the home and the company profile — are NOT the auth family. The design says so: the
 * auth screens are the green-panel shell above, and the app screens use the operator portal's own tokens, which are
 * the ones Crolle's staff already work in every day. The values below are that palette, transcribed rather than
 * re-derived, so a vendor's screen and Crolle's own console are visibly the same product.
 *
 * Scoped under .vp-app so nothing here can reach an auth page: the two families share this file, and a bare
 * `.vp-card` would otherwise be a rule waiting for a collision.
 */
.vp-app {
    --app-ground: #faf9f5;
    --app-ink: #141413;
    --app-paper: #fff;
    --app-muted: #63615b;
    --app-faint: #8a8780;
    --app-line: #e3dfd4;
    --app-sunken: #fbfaf7;
    --app-link: #2f5d50;
    --app-danger: #a8352a;
    --app-warn-bg: #f6ebd8;
    --app-warn-ink: #7a5510;
    --app-serif: ui-serif, Georgia, 'Times New Roman', serif;
    --app-sans: 'IBM Plex Sans', 'Plex', Arial, sans-serif;

    min-height: 100vh;
    background: var(--app-ground);
    color: var(--app-ink);
    font-family: var(--app-sans);
}

/* THE APP BAR IS THE DESIGN'S: 52px and dark, the same on every signed-in page (Vendor Home, Company Profile, Vendor
   Bank and RFQ Quote all draw it; owner, 30 September 2026: "the header need to be much less" tall). It was 64px on
   white here and 52px dark on the RFQ page only. */
.vp-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 52px;
    padding: 8px 32px;
    box-sizing: border-box;
    background: #141413;
    color: #faf9f5;
}

/* THE OWNER'S OVERRIDE (DECISIONS.md item 10, 29 September 2026): the app header's wordmark is the site's own
   sans, bold — the same wordmark crolle.ai and the vendor sign-in pages carry — not the design's serif. */
.vp-bar-wordmark {
    font-size: 20px;
    color: #faf9f5;
    text-decoration: none;
}

/* "Vendors" beside the wordmark, as the design draws it. */
.vp-bar-brand {
    margin-inline-start: -14px;
    font-size: 12px;
    color: #a6a29a;
}

.vp-bar-nav {
    display: flex;
    gap: 4px;
}

.vp-bar-link {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    color: #d5d0c3;
    text-decoration: none;
}

.vp-bar-link:focus-visible {
    outline: 2px solid #faf9f5;
    outline-offset: 1px;
}

.vp-bar-link-now {
    background: #2b2a27;
    color: #faf9f5;
    font-weight: 600;
}

.vp-bar-signout {
    margin-inline-start: auto;
    font-size: 12.5px;
    color: #d5d0c3;
}

/* THE SIGN-OUT IS A FORM POST, SO WHAT STANDS IN THE BAR IS A BUTTON (auditor, 27 September 2026). The design draws
   the control as text, so the button is stripped back to exactly that: no background, no border, no padding of its
   own, and the form's own type. Only these are added — the three values above are the design's and stay untouched. */
.vp-bar-signout button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* A heading a screen reader needs and the page does not draw (the home's title, removed by the owner). */
.vp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vp-home {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 32px 64px;
}

.vp-card {
    padding: 28px;
    background: var(--app-paper);
    border: 1px solid var(--app-line);
    border-radius: 6px;
}

.vp-title-app {
    font-family: var(--app-serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.vp-card .vp-sub {
    margin-top: 10px;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.55;
    color: var(--app-muted);
}

/* WHAT IS LEFT TO DO, as a list rather than a sentence: four things, two of them done or reachable, and the two that
   are not are stated as not yet. A tick, a bold line, a muted line — the state is legible without a colour. */
.vp-todo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.vp-todo li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.vp-tick {
    color: var(--app-link);
    font-weight: 700;
}

.vp-todo-done {
    color: var(--app-muted);
}

.vp-todo-now {
    font-weight: 600;
}

.vp-todo-later {
    color: var(--app-faint);
}

/* The step's name with what it still needs under it (the papers not yet on file). */
.vp-todo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vp-todo-need {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--app-danger);
}

.vp-card .vp-actions {
    margin-top: 24px;
}

@media (max-width: 700px) {
    /* THE PHONE KEEPS BOTH DESTINATIONS (see VendorAppBar): the "Vendors" label gives way so they fit 390px. */
    .vp-bar {
        padding: 4px 8px 4px 16px;
        gap: 10px;
    }

    .vp-bar-brand {
        display: none;
    }

    /* The design's phone bar draws its controls 44px tall, which the 52px bar holds exactly. */
    .vp-bar-link {
        height: 44px;
        padding: 0 8px;
    }

    .vp-bar-signout button {
        min-height: 44px;
    }

    .vp-home {
        padding: 24px 16px 48px;
    }

    .vp-card {
        padding: 20px;
    }

    .vp-title-app {
        font-size: 24px;
    }
}

/* ---------------------------------------------------- the wizard's own controls */

/* THE TYPE CARDS AND THE TRADE LIST ARE STEP TWO'S, and they carry names of their own rather than reusing .vp-card:
   that class is the landing page's own card and it is a block of a page, not a control a person picks. Two meanings
   under one name is how a change to one breaks the other silently. */

.vp-h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #141413;
}

/* TWO COLUMNS ON A DESKTOP AND ONE ON A PHONE, which is the design's own answer for the type cards ("selectable
   cards, two columns on desktop, several may be chosen"). */
.vp-picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vp-pick {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
    cursor: pointer;
}

/* A CHOSEN CARD HAS A GREEN 2px BORDER (2c), and it is drawn from the control's own state so the two can never
   disagree: `:has()` on the checkbox is the whole of it, with no class for a script to keep in step. */
.vp-pick:has(.vp-pick-box:checked) {
    border-color: #047a62;
    border-width: 2px;
}

.vp-pick-box {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #047a62;
}

.vp-pick-name {
    font-size: 15px;
    line-height: 1.35;
}

/* THE CHOSEN TRADES, ABOVE THE SEARCH BOX (2c). Each tag carries the trade's name and its own × . */
.vp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.vp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    background: #e6f2ee;
    color: #0b5c4a;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.3;
}

.vp-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #0b5c4a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.vp-tag-x:hover {
    background: #cfe6df;
}

/* THE RESULTS, WHICH THE SEARCH BOX FILTERS. Bounded and scrollable rather than growing the page: a bank holds every
   trade an administrator has added, and a list that runs to the footer pushes the step's own buttons off the screen. */
.vp-trade-list {
    margin: 10px 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
    background: #fff;
    list-style: none;
}

.vp-trade {
    border-bottom: 1px solid #f0eee9;
}

.vp-trade:last-child {
    border-bottom: 0;
}

.vp-trade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 15px;
    cursor: pointer;
}

.vp-trade-row:hover {
    background: #f7f6f3;
}

@media (max-width: 900px) {
    .vp-picks {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* THE CITY'S OWN CONTROL: a pick-list that also takes a typed answer (see VendorSignUp.razor).

   IT IS STYLED TO READ AS THE DESIGN'S DROP-DOWN. The box, the border and the height are `.vp-input`'s, the same
   class Country's select wears, so the two fields in the row are one pair. What a select gets from the browser and an
   input does not is the chevron, so it is drawn here — the same corner of the box, pointing the same way, and placed
   with logical properties so an Arabic page mirrors it without a second rule. It is decoration on a control that is
   already labelled, so it is drawn with a pseudo-element and takes no part in the accessibility tree. */

.vp-combo {
    position: relative;
}

.vp-combo .vp-input {
    padding-inline-end: 40px;
}

.vp-combo::after {
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-inline-end: 2px solid #6b6862;
    border-block-end: 2px solid #6b6862;
    transform: rotate(45deg);
    pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   STEPS 3, 4 AND 5 — the three that finish the registration.

   Every number below is the design's own, taken from `docs/Design/vendor-portal/Sign Up.dc.html` frames 2e to 2m,
   which draws the same inline values the sheets' earlier sections were transcribed from. No palette is declared
   here: the tones are the ones already named at the top of this file, and a colour that is not already here would
   be a second answer to what the product looks like.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 2e and 2g: one paper per row — what it is, what is filed, the day it runs out, and the button that files it ── */

.vp-docs {
    display: flex;
    flex-direction: column;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
    background: #ffffff;
}

.vp-doc {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid #eeebe3;
}

/* The last row carries no rule: the box's own border is the end of the list. */
.vp-doc:last-child {
    border-bottom: 0;
}

/* 2g: a paper the list grew by since the step was opened. The marker is inset on the START edge so an Arabic page
   mirrors it without a second rule. */
.vp-doc-new {
    background: #fbf4e6;
    box-shadow: inset 3px 0 0 #c28a2c;
}

/* 2e's Zakat row: the paper is filed and its date is missing. */
.vp-doc-bad {
    background: #fdf7f5;
}

.vp-doc-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.vp-doc-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #141413;
}

.vp-doc-why {
    font-size: 12.5px;
    line-height: 1.45;
    color: #55534d;
}

.vp-doc-file {
    font-size: 12.5px;
    color: #22211e;
}

.vp-doc-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    flex-shrink: 0;
    width: 150px;
}

.vp-doc-exp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* 38px and not the 52px a step's own field is: this is a date beside a row, and the design draws it small. */
.vp-doc-exp input {
    height: 38px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #bdbab2;
    border-radius: 3px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    direction: ltr;
    color: #141413;
}

.vp-doc-exp input:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 1px;
}

.vp-doc-exp input[aria-invalid="true"] {
    border: 2px solid #a8352a;
}

.vp-btn-38 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 3px;
    border: 1px solid #bdbab2;
    background: #ffffff;
    color: #141413;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.vp-btn-38-pri {
    border: 0;
    background: #0e0f12;
    color: #ffffff;
}

.vp-btn-38:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 1px;
}

/* ── 2h: the bank letter — a filed file beside the button that replaces it ─────────────────────────────────── */

.vp-upload {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.vp-upload-label {
    font-size: 14px;
    font-weight: 600;
}

.vp-upload-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
}

.vp-upload-file {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vp-upload-file b {
    font-size: 14px;
    font-weight: 600;
    text-align: start;
}

.vp-upload-file span {
    font-size: 12.5px;
    color: #55534d;
}

/* ── 2j: the review card — four sections, each with its own Edit, rows in a two-column grid ────────────────── */

.vp-review {
    display: flex;
    flex-direction: column;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
    background: #ffffff;
}

.vp-review-sec {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #eeebe3;
}

.vp-review-sec:last-child {
    border-bottom: 0;
}

.vp-review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vp-review-title {
    font-size: 14px;
    font-weight: 700;
}

.vp-review-edit {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 13px;
    font-weight: 600;
    color: #047a62;
}

.vp-review-rows {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
    gap: 5px 16px;
    font-size: 13px;
    line-height: 1.5;
}

.vp-review-rows dt {
    color: #55534d;
}

/* A long company name wraps rather than being cut: the reader is checking it, so half of it is worse than none. */
.vp-review-rows dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ── 2j and 2k: the terms — a scrolling box, and the tick that has to be in it ──────────────────────────────── */

.vp-terms {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vp-terms-label {
    font-size: 14px;
    font-weight: 600;
}

/* 200px, and 300px when the acceptance was refused: the design grows the box so the sentence under the tick is
   not the only thing a person can see. The height is set by the page, not here. */
.vp-terms-box {
    overflow: auto;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #d5d2ca;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vp-terms-box:focus-visible {
    outline: 3px solid #047a62;
    outline-offset: 1px;
}

.vp-terms-h {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

.vp-terms-p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #3f3d38;
}

.vp-check {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vp-check-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 44px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
}

.vp-check-row input {
    margin: 3px 0 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: #047a62;
}

.vp-check-row input[aria-invalid="true"] {
    outline: 2px solid #a8352a;
    outline-offset: 1px;
}

.vp-check-err {
    font-size: 13px;
    font-weight: 500;
    color: #a8352a;
    padding-inline-start: 30px;
}

/* ── The reset page's rule list, ticked as the person types (Sign In.dc.html, "Reset password") ──────────────── */

.vp-rules {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vp-rule {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;
    color: #55534d;
}

.vp-rule[data-met="true"] {
    color: #0b4f40;
}

.vp-rule-mark {
    width: 16px;
    text-align: center;
}

/* ── The phone: the same rows with the narrower side the design draws ──────────────────────────────────────── */

@media (max-width: 900px) {
    .vp-doc-side {
        width: 120px;
    }

    .vp-doc {
        gap: 10px;
        padding: 12px;
    }

    .vp-upload-box {
        flex-direction: column;
        align-items: stretch;
    }

    .vp-terms-box {
        height: 220px;
    }
}