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

.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;
}

.vp-wordmark {
    align-self: flex-start;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

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

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

.vp-kicker {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cfede4;
}

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

.vp-hero-lead {
    font-size: 64px;
    line-height: 1.04;
}

.vp-lead {
    margin: 0;
    max-width: 34em;
    font-size: 16px;
    line-height: 1.5;
    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-done {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.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: 12.5px;
    font-weight: 500;
    color: #cfede4;
}

/* the three things the portal does, stated once, on the wide shell only */
.vp-pillars {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.vp-pillar {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vp-pillar-key {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #cfede4;
}

.vp-pillar-value {
    font-size: 15px;
    line-height: 1.45;
}

.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: #cfede4;
}

.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;
}

.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: 15px;
    line-height: 1.55;
    color: #3f3d38;
}

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

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

.vp-hint-bad {
    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 */

/* The design's segmented control ("Who are you?"), rendered as two links because the second one leaves this host:
   a contractor's staff sign in at the product's own door, and a tab that swapped the panel would offer a Microsoft
   button this host has no registration for. It reads the same and behaves honestly. */
.vp-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid #bdbab2;
    border-radius: 3px;
    background: #fff;
}

.vp-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #3f3d38;
    text-decoration: none;
}

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

.vp-tab-now {
    background: #141413;
    color: #fff;
}

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

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

.vp-btn-link {
    height: auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #047a62;
    text-decoration: underline;
}

/* A BUTTON THAT CANNOT BE PRESSED SAYS WHY, and says it as a title as well as by being dashed: a dashed edge alone
   is decoration to somebody who cannot see it. */
.vp-btn-off {
    border: 1px dashed #a9a59c;
    background: transparent;
    color: #55534d;
    cursor: not-allowed;
}

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

.vp-note {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #3f3d38;
}

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

.vp-links a {
    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) {
    .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;
    }

    .vp-hero,
    .vp-hero-lead {
        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;
    }

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

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

    .vp-foot {
        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;
    }
}

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

.vp-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    height: 64px;
    background: var(--app-paper);
    border-bottom: 1px solid var(--app-line);
}

.vp-bar-wordmark {
    font-family: var(--app-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--app-ink);
    text-decoration: none;
}

.vp-bar-wordmark .vp-wordmark-dot {
    color: var(--app-link);
}

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

.vp-bar-link {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--app-muted);
    text-decoration: none;
}

.vp-bar-link:focus-visible {
    outline: 3px solid var(--app-link);
    outline-offset: 1px;
}

.vp-bar-link-now {
    background: var(--app-sunken);
    color: var(--app-ink);
    font-weight: 600;
}

.vp-bar-signout {
    margin-inline-start: auto;
    font-size: 14px;
    color: var(--app-muted);
}

.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);
}

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

@media (max-width: 700px) {
    .vp-bar {
        padding: 0 16px;
        gap: 12px;
    }

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

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

    .vp-card {
        padding: 20px;
    }

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