/* ==========================================================================
   VENDOR SIGNUP - page specific styles

   Loaded after style.css, so everything here sits on top of the existing
   SoundzGood look. Fonts, buttons, colours, page width and the responsive
   rules all come from style.css - this file only adds what the booking
   flow needs, plus a light Halloween accent for this one event.

   Everything is prefixed .vs- so nothing here can leak into another page.
   ========================================================================== */

.vendor-signup{
    /* Halloween accents, scoped to this page only */
    --vs-purple:#6b3fa0;
    --vs-purple-deep:#3a1f5c;
    --vs-purple-light:#b98cff;
    --vs-slime:#8bc34a;

    --vs-available:#2e7d32;
    --vs-held:#c8860d;
    --vs-booked:#5a1f1f;
    --vs-blocked:#2a2a2a;
    --vs-mine:var(--sg-orange);
}

/*  The flow hides steps with the hidden attribute, and several of them are
    also given a display by a rule in here. Any author display beats the
    browser's own [hidden] rule, so without this a hidden step or the
    confirmation panel renders anyway and stacks under the live one.

    Same trap as admin.css. Keep this above everything that sets display. */
.vendor-signup [hidden]{ display:none !important; }


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/*  Our own stage at dusk, behind the wash that was already here.

    The gradients are listed before the photograph on purpose: a
    background stacks first-on-top, so the image has to come last or it
    covers them and the headline goes unreadable over it. That is how
    three heroes on this site have broken.                             */
.vs-hero{
    position:relative;
    overflow:hidden;
    text-align:center;

    background:
        radial-gradient(120% 100% at 50% 0%, rgba(46, 16, 66, .82) 0%, rgba(10, 10, 10, .92) 62%),
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 100%),
        url('images/services/festivals.webp') center 62% / cover no-repeat,
        var(--sg-black);
}

.vs-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:var(--sg-grain);
    opacity:.14;
    mix-blend-mode:overlay;
    pointer-events:none;
}

.vs-hero > *{
    position:relative;
    z-index:1;
}

.vs-hero-inner{
    padding:120px 20px 70px;
    max-width:860px;
    margin:auto;
}

.vs-hero h1{
    font-family:var(--sg-font-display);
    font-size:clamp(2.1rem, 6vw, 4rem);
    line-height:.98;
    letter-spacing:-1px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.vs-hero .vs-hero-sub{
    font-family:var(--sg-font-display);
    font-size:clamp(1.1rem, 3.4vw, 2rem);
    letter-spacing:-.5px;
    text-transform:uppercase;
    color:var(--sg-orange);
    margin-bottom:18px;
}

.vs-hero .vs-hero-kicker{
    font-family:var(--sg-font-display);
    font-size:clamp(1.3rem, 4vw, 2.4rem);
    letter-spacing:-.5px;
    text-transform:uppercase;
    margin-bottom:20px;
}

/* Cobweb in the top corners of the hero */
.vs-web{
    position:absolute;
    top:0;
    width:130px;
    height:130px;
    opacity:.22;
    pointer-events:none;
    z-index:1;
}

.vs-web-left{ left:0; }
.vs-web-right{ right:0; transform:scaleX(-1); }

.vs-web path{
    fill:none;
    stroke:#fff;
    stroke-width:1.4;
}

/*  WHAT IS IN HERE
      DOCUMENTS
      EVENT INFO AND FAQS
      FOOD CATEGORIES
      ONE STEP, ONE SCREEN
      PREVIEW BANNER
      REVIEW AND CONFIRMATION
      REVIEW - THE CHECKOUT
      STEP PANELS
      PROGRESS HEADER
      THE MAP
      VENDOR TYPE CHOICES
      MOBILE
      FOOTER TWEAK FOR THESE PAGES

    Sections run alphabetically apart from the pinned ones.
    MOBILE is pinned last because it overrides everything above it, and
    the footer tweak sits after it so it wins on small screens too.

    Rules inside a section stay in the order they were written. Sorting
    those would change which rule wins when two carry the same weight.   */

/* --------------------------------------------------------------------------
   DOCUMENTS
   -------------------------------------------------------------------------- */
.vs-doc-list{
    list-style:none;
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.vs-doc{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    background:#ffffff;
    border:1px solid var(--sg-border);
    border-radius:10px;
    padding:12px 16px;
}

.vs-doc-type{
    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--sg-gold);
}

.vs-doc-name{
    flex:1;
    min-width:120px;
    word-break:break-word;
}

.vs-doc-size{
    color:var(--sg-dim);
    font-size:.85rem;
}

.vs-doc-empty{
    color:var(--sg-dim);
    font-size:.92rem;
}

.vs-link{
    background:none;
    border:none;
    color:var(--sg-orange);
    cursor:pointer;
    font-size:.9rem;
    text-decoration:underline;
    padding:4px;
}

.vs-file-row{
    display:grid;
    grid-template-columns:minmax(160px, 220px) 1fr;
    gap:14px;
    align-items:end;
}

/* --------------------------------------------------------------------------
   EVENT INFO AND FAQS
   -------------------------------------------------------------------------- */
.vs-facts{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:2px;
    background:var(--sg-border);
    border:1px solid var(--sg-border);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:30px;
}

.vs-facts > div{
    background:#ffffff;
    padding:16px 18px;
}

.vs-facts dt{
    font-family:var(--sg-font-accent);
    font-size:.7rem;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-gold);
    margin-bottom:6px;
}

.vs-facts dd{
    color:#12141a;
    font-size:.95rem;
}

/*  Native <details> accordions - no script, and they still open if the
    JavaScript on this page ever fails to load.                            */
.vs-faqs{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.vs-faqs details{
    background:#ffffff;
    border:1px solid var(--sg-border);
    border-radius:12px;
    overflow:hidden;
}

.vs-faqs details[open]{
    border-color:var(--vs-purple);
}

.vs-faqs summary{
    padding:16px 46px 16px 18px;
    cursor:pointer;
    position:relative;
    font-weight:bold;
    color:#12141a;
    list-style:none;
}

.vs-faqs summary::-webkit-details-marker{ display:none; }

.vs-faqs summary::after{
    content:'+';
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    font-family:var(--sg-font-display);
    font-size:1.3rem;
    line-height:1;
    color:var(--sg-orange);
}

.vs-faqs details[open] summary::after{ content:'\2013'; }

.vs-faqs summary:hover{ color:var(--sg-gold); }

.vs-faqs details p{
    padding:0 18px 18px;
    color:var(--sg-muted);
    font-size:.94rem;
    line-height:1.7;
}

.vs-sec-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:28px;
}

.vs-error{
    background:#4a1d1d;
    border:1px solid #7a2f2f;
    color:#ffd9d9;
    border-radius:10px;
    padding:12px 16px;
    margin-top:18px;
    font-size:.95rem;
}

.vs-busy{
    color:var(--sg-gold);
    font-family:var(--sg-font-accent);
    font-size:.85rem;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-top:16px;
}

.vs-muted{
    color:var(--sg-dim);
}

/* --------------------------------------------------------------------------
   FOOD CATEGORIES
   -------------------------------------------------------------------------- */
.vs-category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
}

.vs-category{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;

    background:#ffffff;
    border:2px solid var(--sg-border);
    border-radius:12px;
    padding:16px 18px;
    color:#12141a;
    text-align:left;
    cursor:pointer;
    transition:border-color .2s, transform .2s;
}

.vs-category:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:#4a2a06;
}

.vs-category.is-selected{
    border-color:var(--sg-orange);
    background:#170d02;
}

.vs-category-name{
    font-family:var(--sg-font-display);
    font-size:1rem;
    letter-spacing:-.3px;
    text-transform:uppercase;
}

.vs-category-count{
    font-family:var(--sg-font-accent);
    font-size:.78rem;
    letter-spacing:1px;
    color:var(--sg-dim);
}

.vs-category.is-full{
    opacity:.55;
    cursor:not-allowed;
    border-color:#3a1414;
}

.vs-category-full{
    position:absolute;
    top:10px;
    right:12px;
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    font-weight:bold;
    letter-spacing:1.5px;
    color:#ff8a8a;
    background:#4a1d1d;
    border-radius:4px;
    padding:2px 6px;
}

/* --------------------------------------------------------------------------
   ONE PAGE

   This used to pin the flow to the height of the viewport so that exactly
   one step was on screen and the page itself never scrolled. That shape is
   gone: the form is five sections, stacked, and you scroll it like any
   other page. The summary down the side is what now answers "how much is
   left", which is the job the fixed frame and its progress bar were doing.
   -------------------------------------------------------------------------- */
.vs-confirming,
.vs-confirmed{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


/* --------------------------------------------------------------------------
   FORM FIELDS - matches the existing contact form styling
   -------------------------------------------------------------------------- */
.vs-field-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
}

.vs-field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.vs-field.is-wide{
    grid-column:1 / -1;
}

.vs-field label{
    font-family:var(--sg-font-accent);
    font-size:.74rem;
    font-weight:bold;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-gold);
}

.vs-field input,
.vs-field select,
.vs-field textarea{
    padding:14px;
    border-radius:8px;
    background:#ffffff;
    color:#12141a;
    border:1px solid var(--sg-border);
    font-family:var(--sg-font);
    font-size:1rem;
    width:100%;
}

.vs-field textarea{
    resize:vertical;
}

.vs-field-hint{
    color:var(--sg-dim);
    font-size:.82rem;
}

.vs-check{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--sg-muted);
}

/* Something the vendor must read before ticking the box under it */
.vs-notice{
    background:rgba(107,63,160,.14);
    border:1px solid var(--vs-purple);
    border-left:4px solid var(--vs-purple);
    border-radius:10px;
    padding:14px 18px;
    margin-bottom:12px;
    color:var(--sg-muted);
    font-size:.94rem;
}

.vs-notice strong{
    color:#12141a;
}

.vs-check input{
    width:20px;
    height:20px;
    flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   PREVIEW BANNER
   Shown only while Firebase has not been connected.
   -------------------------------------------------------------------------- */
.vs-preview-banner{
    background:#4a1d1d;
    border-bottom:2px solid #7a2f2f;
    color:#ffd9d9;
    padding:14px 6%;
    text-align:center;
    font-size:.95rem;
}

.vs-preview-banner strong{
    color:#12141a;
}

/* --------------------------------------------------------------------------
   REVIEW AND CONFIRMATION
   -------------------------------------------------------------------------- */
.vs-summary-list{
    display:grid;
    gap:1px;
    background:var(--sg-border);
    border:1px solid var(--sg-border);
    border-radius:12px;
    overflow:hidden;
}

.vs-summary-list > div{
    display:grid;
    grid-template-columns:minmax(120px, 200px) 1fr;
    gap:14px;
    background:#ffffff;
    padding:13px 18px;
}

.vs-summary-list dt{
    font-family:var(--sg-font-accent);
    font-size:.74rem;
    font-weight:bold;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--sg-gold);
    align-self:center;
}

.vs-summary-list dd{
    color:#12141a;
    word-break:break-word;
}

/* ==========================================================================
   REVIEW - THE CHECKOUT

   One column of small cards, one idea each: what you are buying, what it
   costs, and who takes the money. Same layout at every width, because a
   checkout is read top to bottom and most vendors fill this in on a phone.

   This replaced a five column table beside a sidebar. The table had to be
   rebuilt into labelled blocks below 768px to be readable at all, so the
   desktop and the phone were really two designs to keep in step.
   ========================================================================== */

/*  The checkout brings its own cards, so the step panel underneath steps
    back - otherwise every card is a box inside another box.             */
.vs-sec.is-checkout{
    background:none;
    border:0;
    padding:0;
}

/*  The heading sits over the cards, so it is held to the same column. */
.vs-sec.is-checkout > h2,
.vs-sec.is-checkout > .vs-sec-intro,
.vs-sec.is-checkout > .vs-busy,
.vs-sec.is-checkout > .vs-error{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}

.vs-checkout{
    /*  White cards on the page's off-white. These two were the last dark
        values left in the file: the text inside had already been turned to
        ink for the white page, but the cards it sits on had not, so the
        whole receipt was near-black type on near-black card. It is the one
        screen nobody reached in the first pass, because getting to it
        needs a held site.                                              */
    --vs-card:#fff;
    --vs-line:#e3e6ec;

    display:grid;
    gap:14px;
    max-width:560px;
    margin:0 auto;
}

.vs-card{
    background:var(--vs-card);
    border:1px solid var(--vs-line);
    border-radius:16px;
    padding:20px;
}

.vs-card h3{
    margin:0;
    font-family:var(--sg-font-display);
    font-size:1.2rem;
    letter-spacing:-.3px;
    color:#12141a;
}

.vs-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

/*  The event line sits under the whole header rather than inside it. Beside
    the Edit button it only had half the card to wrap in, and a long event
    name and date ran to three lines.                                     */
.vs-card-sub{
    margin:8px 0 0;
    color:var(--sg-muted);
    font-size:.85rem;
    line-height:1.45;
}

/* ---- the Edit booking button ---- */
.vs-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:8px 14px;
    border-radius:50px;
    border:1px solid var(--vs-line);
    background:#eef0f4;
    color:#12141a;
    font-size:.82rem;
    cursor:pointer;
    transition:border-color .2s, color .2s;
}

.vs-pill:hover{ border-color:var(--sg-orange); color:var(--sg-orange); }
.vs-pill-ico{ width:14px; height:14px; fill:currentColor; }

/* ---- the thing being bought ---- */
.vs-lineitem{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:18px;
}

.vs-lineitem-ico{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border-radius:12px;
    background:rgba(255,107,0,.12);
    color:var(--sg-orange);
}

.vs-lineitem-ico svg{ width:30px; height:30px; fill:currentColor; }

.vs-lineitem-txt{ display:grid; gap:3px; min-width:0; }
.vs-lineitem-txt strong{ color:#12141a; font-size:1rem; }
.vs-lineitem-txt > span{ color:var(--sg-muted); font-size:.85rem; }

/*  PRICE / QTY / TOTAL across the foot of the booking card. Equal thirds
    under a rule, which reads as a receipt line without needing a table
    and its five columns to say it.                                     */
.vs-figures{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin:18px 0 0;
    padding-top:16px;
    border-top:1px solid var(--vs-line);
}

.vs-figures > div:nth-child(2){ text-align:center; }
.vs-figures > div:last-child{ text-align:right; }

.vs-figures dt{
    font-family:var(--sg-font-accent);
    font-size:.66rem;
    font-weight:bold;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--sg-dim);
    margin-bottom:5px;
}

.vs-figures dd{ margin:0; color:#12141a; font-size:.95rem; }
.vs-figures dd.is-strong{ font-weight:bold; }

/* ---- what it comes to ---- */
.vs-sum{
    display:grid;
    gap:11px;
    margin:16px 0 0;
}

.vs-sum > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.vs-sum dt{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--sg-muted);
    font-size:.92rem;
}

.vs-sum dd{ margin:0; color:#12141a; font-size:.92rem; }

/*  A tooltip would be unreachable on a phone, so the (i) opens a line of
    text under the list instead of hovering over it.                    */
.vs-info{
    width:16px;
    height:16px;
    padding:0;
    border-radius:50%;
    border:1px solid var(--sg-dim);
    background:none;
    color:var(--sg-dim);
    font-family:var(--sg-font-accent);
    font-size:.62rem;
    line-height:1;
    cursor:pointer;
}

.vs-info:hover{ border-color:var(--sg-orange); color:var(--sg-orange); }

.vs-info-note{
    margin:12px 0 0;
    padding:11px 13px;
    border-radius:9px;
    background:#f6f7f9;
    border:1px solid var(--vs-line);
    color:var(--sg-muted);
    font-size:.82rem;
    line-height:1.6;
}

/*  The total, ruled off from the lines it sums. Orange on both halves -
    it is the one number anybody actually checks.                       */
.vs-sum-total{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    margin-top:16px;
    padding-top:15px;
    border-top:1px solid var(--vs-line);
}

.vs-sum-total span{
    font-family:var(--sg-font-display);
    font-size:1.05rem;
    letter-spacing:-.2px;
    color:var(--sg-orange);
}

.vs-sum-total strong{
    font-family:var(--sg-font-display);
    font-size:1.55rem;
    letter-spacing:-.5px;
    color:var(--sg-orange);
}

/* ---- who takes the money ---- */
.vs-secure-head{
    display:flex;
    align-items:center;
    gap:14px;
}

.vs-secure-ico{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,107,0,.12);
    color:var(--sg-orange);
}

.vs-secure-ico svg{ width:22px; height:22px; fill:currentColor; }

.vs-secure-head > span:last-child{ display:grid; gap:3px; }
.vs-secure-head strong{ color:#12141a; font-size:.95rem; }
.vs-secure-head > span:last-child > span{ color:var(--sg-muted); font-size:.84rem; }

.vs-secure-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    list-style:none;
    margin:16px 0 0;
    padding:16px 0 0;
    border-top:1px solid var(--vs-line);
}

.vs-secure-row li{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--sg-dim);
    font-size:.78rem;
}

/* ---- their own answers, folded away ---- */
.vs-yourdetails{ padding:0; overflow:hidden; }

.vs-yourdetails summary{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
    cursor:pointer;
    list-style:none;

    font-family:var(--sg-font-accent);
    font-size:.72rem;
    font-weight:bold;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--sg-gold);
}

.vs-yourdetails summary::-webkit-details-marker{ display:none; }
.vs-yourdetails summary span{ margin-left:auto; color:var(--sg-dim); letter-spacing:1px; }
.vs-yourdetails summary::after{ content:'+'; color:var(--sg-dim); font-size:1.1rem; }
.vs-yourdetails[open] summary::after{ content:'\2212'; }

.vs-yourdetails .vs-summary-list{
    margin:0;
    border:0;
    border-top:1px solid var(--vs-line);
    border-radius:0;
}

.vs-checkout-foot{
    margin:2px 0 0;
    text-align:center;
    color:var(--sg-dim);
    font-size:.84rem;
}

.vs-help-link{
    padding:0;
    border:0;
    background:none;
    color:var(--sg-orange);
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
}

/*  THE PAY BAR

    Pinned to the foot of the viewport so the amount and the button stay
    on screen however far down the cards somebody has scrolled. Sticky
    rather than fixed, so it comes to rest at the end of the step instead
    of hovering over the site footer for the rest of the page.          */
/*  The pay button sat stuck to the bottom of the screen, which made
    sense when the checkout was a screen of its own and the page could not
    scroll. On one page it floated over the review cards on the way past.
    It is the last thing on the page now, so it simply sits there.      */
.vs-paybar{
    display:block;
    max-width:560px;
    margin:22px auto 0;
}

.vs-paybar .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    max-width:none;
}

/*  The arrow only belongs on a button that can actually be pressed. */
#vs-pay:not(:disabled)::after{
    content:'\2192';
    font-size:1.1em;
    line-height:1;
}

.vs-confirming,
.vs-confirmed{
    max-width:760px;
    margin:auto;
    text-align:center;
}

.vs-confirm-card{
    background:var(--sg-panel);
    border:1px solid var(--sg-border);
    border-top:4px solid var(--vs-available);
    border-radius:18px;
    padding:40px 32px;
    text-align:left;
}

.vs-eyebrow{
    font-family:var(--sg-font-accent);
    font-size:.76rem;
    font-weight:bold;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--vs-slime);
    margin-bottom:10px;
}

.vs-confirm-card h2{
    text-align:left;
    margin-bottom:10px;
}

.vs-confirm-ref{
    font-family:var(--sg-font-accent);
    letter-spacing:2px;
    color:var(--sg-muted);
    margin-bottom:24px;
}

.vs-confirm-note{
    color:var(--sg-muted);
    margin-top:22px;
    font-size:.95rem;
}

.vs-spinner{
    width:42px;
    height:42px;
    margin:0 auto 20px;
    border:3px solid #2a2a2a;
    border-top-color:var(--sg-orange);
    border-radius:50%;
    animation:vs-spin 1s linear infinite;
}

@keyframes vs-spin{
    to{ transform:rotate(360deg); }
}

/* --------------------------------------------------------------------------
   STEP PANELS
   -------------------------------------------------------------------------- */
.vs-sec{
    background:var(--sg-panel);
    border:1px solid var(--sg-border);
    border-radius:18px;
    padding:34px 30px;
}

.vs-sec h2{
    text-align:left;
    font-size:clamp(1.4rem, 3.4vw, 2rem);
    margin-bottom:8px;
}

.vs-sec-intro{
    color:var(--sg-muted);
    margin-bottom:26px;
}

/*  Business, category and setup share one step, so each gets a subheading
    with a rule above it to break the page into obvious sections.          */
.vs-sub{
    font-family:var(--sg-font-display);
    font-size:1.15rem;
    letter-spacing:-.5px;
    text-transform:uppercase;
    margin:38px 0 18px;
    padding-top:26px;
    border-top:1px solid var(--sg-border);
}

.vs-sec > .vs-sub:first-of-type{
    margin-top:0;
    padding-top:0;
    border-top:0;
}

/* --------------------------------------------------------------------------
   THE MAP
   -------------------------------------------------------------------------- */
.vs-map-wrap{
    position:relative;
    background:#0b0b0b;
    border:1px solid var(--sg-border);
    border-radius:14px;
    padding:14px;

    /*  The site plan is portrait and tall. Drawn at full width it would be
        around 1500px high, so it scrolls inside this box instead - never
        on the page itself.                                              */
    max-height:min(70vh, 780px);
    overflow:auto;
    overscroll-behavior:contain;
}

.vs-map{
    /*  Sized so a market bay stays a 44px tap target. A bay is 56 units
        tall in a 760 unit plan, so the plan has to be drawn at least
        760 x 44 / 56 = 597px wide. Below that the bays get too small to
        hit on a phone, and the numbers too small to read. The box above
        scrolls, so this costs nothing but a swipe.                     */
    min-width:620px;
}

.vmap-svg{
    display:block;
    width:100%;
    height:auto;
}

.vs-map-hint{
    color:var(--sg-dim);
    font-size:.84rem;
    margin-top:8px;
}

/* fixed furniture */
.vmap-landmark rect{
    fill:#151515;
    stroke:#2b2b2b;
    stroke-width:2;
}

.vmap-landmark-stage rect{
    fill:#1d1030;
    stroke:var(--vs-purple);
}

.vmap-landmark-bar rect{
    fill:#221004;
    stroke:#5a3a10;
}

.vmap-landmark-path rect{
    fill:#101010;
    stroke:#232323;
    stroke-dasharray:6 6;
}

.vmap-landmark-text{
    fill:#8a8a8a;
    font-family:'Courier New', Courier, monospace;
    font-size:13px;
    letter-spacing:1.5px;
}

/* bookable sites */
.vmap-site rect{
    stroke-width:2.5;
    transition:fill .15s, stroke .15s;
}

.vmap-site-label{
    fill:#fff;
    font-family:"Arial Black", Arial, sans-serif;
    font-size:17px;
    pointer-events:none;
}

.vmap-site-sub{
    fill:rgba(255,255,255,.72);
    font-family:'Courier New', Courier, monospace;
    font-size:10px;
    letter-spacing:1px;
    pointer-events:none;
}

.vmap-site.is-available rect{ fill:#12310f; stroke:var(--vs-available); }
.vmap-site.is-held rect{      fill:#33280a; stroke:var(--vs-held); }
.vmap-site.is-booked rect{    fill:#2a0f0f; stroke:#8c3a3a; }
.vmap-site.is-blocked rect{   fill:#161616; stroke:#3a3a3a; }
.vmap-site.is-mine rect{      fill:#3a1e00; stroke:var(--vs-mine); }

.vmap-site.is-selectable{ cursor:pointer; }

.vmap-site.is-selectable:hover rect{
    fill:#1b4a17;
    stroke:#4caf50;
}

.vmap-site.is-selected rect{
    fill:#4a2600;
    stroke:var(--sg-orange);
    stroke-width:4;
}

.vmap-site.is-locked .vmap-site-label{ fill:rgba(255,255,255,.5); }

/*  Free, but not released yet - the bays in front of it have to go first.
    Deliberately flatter than "booked" so it reads as "not now" rather than
    "gone", and it goes back to green on its own once its wave opens.       */
.vmap-site.is-not-open rect{
    fill:#101010;
    stroke:#2c2c2c;
    stroke-dasharray:5 4;
}

.vmap-site.is-not-open .vmap-site-label,
.vmap-site.is-not-open .vmap-site-sub{
    fill:rgba(255,255,255,.3);
}

.vmap-site.is-wrong-type rect{
    fill:#0f0f0f;
    stroke:#242424;
}

.vmap-site.is-wrong-type .vmap-site-label,
.vmap-site.is-wrong-type .vmap-site-sub{
    fill:rgba(255,255,255,.24);
}

.vmap-site.is-selectable:focus-visible rect{
    stroke:var(--sg-gold);
    stroke-width:4;
}

/* legend */
.vs-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px 20px;
    margin:18px 0 6px;
    list-style:none;
}

.vs-legend li{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--sg-muted);
    font-size:.86rem;
}

.vs-swatch{
    width:16px;
    height:16px;
    border-radius:4px;
    border:2px solid;
    flex:0 0 auto;
}

.vs-swatch.is-available{ background:#12310f; border-color:var(--vs-available); }
.vs-swatch.is-held{      background:#33280a; border-color:var(--vs-held); }
.vs-swatch.is-booked{    background:#2a0f0f; border-color:#8c3a3a; }
.vs-swatch.is-blocked{   background:#161616; border-color:#3a3a3a; }
.vs-swatch.is-mine{      background:#3a1e00; border-color:var(--vs-mine); }
.vs-swatch.is-not-open{  background:#101010; border-color:#2c2c2c; }

/*  Instructions above the plan. Worth spelling out, because tapping several
    bays to build a shape is not something people expect from a map.        */
.vs-map-intro{
    margin:14px 0 0;
    color:var(--sg-muted);
    font-size:.92rem;
    line-height:1.6;
}

.vs-map-intro strong{
    color:var(--sg-gold);
}

.vs-map-intro-sub{
    color:var(--sg-dim);
    font-size:.86rem;
}

.vs-site-choice{
    margin-top:14px;
    padding:12px 16px;
    border-radius:10px;
    background:#ffffff;
    border:1px solid var(--sg-border);
    color:var(--sg-dim);
}

/*  The panel that appears once a site is picked. Its chosen state was
    white type - fine on the old black panel, invisible on the white one,
    and only ever on screen after you tap a bay, which is why the first
    contrast sweep did not catch it. Found by clicking through.        */
.vs-site-choice.is-chosen{
    border-color:var(--sg-orange);
    background:#fff7f0;
    color:#12141a;
}

.vs-hold-timer{
    margin-top:10px;
    font-family:var(--sg-font-accent);
    font-size:.85rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--sg-gold);
}

.vs-hold-timer.is-expired{
    color:#ff8a8a;
}

.vs-map-counts{
    color:var(--sg-dim);
    font-size:.88rem;
    margin-top:4px;
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media (max-width:768px){

    .vs-hero-inner{
        padding:100px 20px 54px;
    }

    .vs-sec{
        padding:20px 16px;
        border-radius:14px;
    }

    .vs-sec-actions .btn{
        width:100%;
        max-width:none;
    }

    .vs-file-row{
        grid-template-columns:1fr;
    }

    .vs-summary-list > div{
        grid-template-columns:1fr;
        gap:4px;
    }

    /*  The checkout is already one column, so a phone only needs it
        tighter - there is no second layout to switch to.               */
    .vs-checkout{ gap:12px; }

    .vs-card{
        padding:16px;
        border-radius:14px;
    }

    /*  The Edit button stays beside the heading rather than stacking under
        it - the card title is short and the pill is small, so a phone has
        room for both, and dropping it pushed the line item down the page. */
    .vs-card-head{ gap:10px; }

    .vs-pill{
        padding:7px 12px;
        font-size:.78rem;
    }

    .vs-secure-row{ gap:8px 14px; }
    .vs-secure-row li{ font-size:.74rem; }

    .vs-yourdetails summary{ padding:14px 16px; }

    .vs-web{
        width:88px;
        height:88px;
    }

        .vs-sec-intro{ margin-bottom:18px; }

    /*  Steps get their air back on a phone, where the panel scrolls anyway
        and cramping it only makes the form harder to fill in.          */
    #vs-flow{ padding:20px 5%; }
}

@media (prefers-reduced-motion:reduce){
    .vs-spinner{ animation:none; }
    .vs-category:hover:not(:disabled){ transform:none; }
}

/* ==========================================================================
   CHOOSING AN EVENT

   The first step. Cards built by js/vendor-signup.js from the events
   collection, so the list changes without anybody editing markup.
   ========================================================================== */
.vs-events{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap:18px;
    margin-top:24px;
}

.vs-events-loading{
    color:var(--sg-dim);
    padding:26px 0;
}

.vs-event{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--sg-border);
    border-radius:14px;
    background:var(--sg-panel);
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vs-event:hover{
    transform:translateY(-3px);
    border-color:#3a3a3a;
    box-shadow:0 16px 34px rgba(0,0,0,.45);
}

/*  The one being applied for. A border alone was not enough to see at a
    glance on a dark page, so it also lifts and warms.                   */
.vs-event.is-chosen{
    border-color:var(--sg-orange);
    box-shadow:0 0 0 1px var(--sg-orange), 0 16px 34px rgba(0,0,0,.45);
}

/*  Closed or not yet open. Still listed - "we run this every year and it
    opens in March" is worth knowing - but visibly not an option today. */
.vs-event.is-shut{ opacity:.72; }
.vs-event.is-shut:hover{ transform:none; box-shadow:none; border-color:var(--sg-border); }

.vs-event-art{
    position:relative;
    aspect-ratio:16 / 9;
    background-color:#e9ecf1;
    background-image:var(--vs-ev-art);
    background-size:cover;
    background-position:center;
}

/*  The status, over the picture rather than under the name, because it is
    the thing that decides whether the rest of the card matters.         */
.vs-event-status{
    position:absolute;
    left:10px;
    bottom:10px;
    padding:5px 11px;
    border-radius:999px;
    font-family:var(--sg-font-accent);
    font-size:.6rem;
    font-weight:bold;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vs-event-status.is-open{    background:#1c6b3a; color:#d8ffe8; }
.vs-event-status.is-limited{ background:#7a5200; color:#ffe9bd; }
.vs-event-status.is-closed{  background:#2a2a2a; color:#bdbdbd; }
.vs-event-status.is-soon{    background:#23324a; color:#cfe0ff; }

.vs-event-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:16px 16px 18px;
    flex:1;
}

.vs-event-body h3{
    font-family:var(--sg-font-display);
    font-size:1.05rem;
    letter-spacing:-.3px;
    text-transform:uppercase;
    margin:0 0 2px;
}

.vs-event-when{
    margin:0;
    color:var(--sg-gold);
    font-size:.82rem;
    font-weight:bold;
}

.vs-event-where{
    margin:0;
    color:var(--sg-dim);
    font-size:.82rem;
}

.vs-event-blurb{
    margin:4px 0 0;
    color:var(--sg-dim);
    font-size:.86rem;
    line-height:1.6;
}

/*  Pushed to the bottom so the buttons line up across cards whose text
    runs to different lengths.                                          */
.vs-event-go{
    margin-top:auto;
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    text-align:center;
    font-size:.72rem;
}

.vs-event-go.is-disabled{
    border:1px solid var(--sg-border);
    background:#dfe3e9;
    color:var(--sg-dim);
    cursor:default;
}

/* ==========================================================================
   CHOOSING AN EVENT - THE LIGHT STAGE

   The one light part of this page, and it is a stage rather than a stripe:
   it is on screen while you choose and gone once you have, so the page
   never shows light and dark at the same time. A page that changes colour
   halfway down looks like a mistake; one that changes when you move on
   looks like progress.

   Its own small palette, because none of the site's tokens are meant for
   dark type on white.
   ========================================================================== */
.vs-apply{
    --pk-ink:#12141a;
    --pk-muted:#606877;
    --pk-line:#e3e6ec;
    --pk-panel:#fff;

    padding:clamp(28px, 4vw, 52px) 6% clamp(48px, 7vw, 84px);
    background:var(--sg-black);
    color:var(--pk-ink);
}

.vs-sec h2{
    font-family:var(--sg-font-display);
    font-size:clamp(1.5rem, 3.4vw, 2.1rem);
    letter-spacing:-.7px;
    color:var(--pk-ink);
    text-align:left;
    margin:0 0 8px;
}

.vs-sec-intro{
    margin:0 0 26px;
    color:var(--pk-muted);
    font-size:.95rem;
}

/*  The numbered step label. A circle and a word, so the page says where
    you are without a progress bar - the bar lives in the dark half.    */
.vs-secnum{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    color:var(--pk-ink);
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.vs-secnum span{
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--pk-ink);
    color:#fff;
    font-family:var(--sg-font);
    font-size:.72rem;
    letter-spacing:0;
}

.vs-lock{
    display:grid;
    place-items:center;
    gap:6px;
    padding:40px 20px;
    border:1px solid var(--pk-line);
    border-radius:14px;
    background:var(--pk-panel);
    text-align:center;
}

.vs-lock-head{
    margin:6px 0 0;
    font-weight:bold;
    color:var(--pk-ink);
}

.vs-lock-sub{
    margin:0;
    color:var(--pk-muted);
    font-size:.9rem;
}

/* ---- the cards, on white ---- */
.vs-sec .vs-events{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap:16px;
    margin-top:0;
}

.vs-sec .vs-events-loading{
    color:var(--pk-muted);
    padding:24px 0;
}

.vs-sec .vs-event{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--pk-line);
    border-radius:14px;
    background:var(--pk-panel);
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.vs-sec .vs-event:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(16,24,40,.12);
}

.vs-sec .vs-event.is-chosen{
    border-color:var(--sg-orange);
    box-shadow:0 0 0 1px var(--sg-orange), 0 12px 26px rgba(16,24,40,.12);
}

.vs-sec .vs-event.is-shut{ opacity:.82; }
.vs-sec .vs-event.is-shut:hover{ transform:none; box-shadow:none; }

.vs-sec .vs-event-art{
    position:relative;
    aspect-ratio:16 / 9;
    background-color:#e9ecf1;
    background-image:var(--vs-ev-art);
    background-size:cover;
    background-position:center;
}

.vs-sec .vs-event-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:14px 14px 16px;
    flex:1;
}

.vs-sec .vs-event-body h3{
    font-family:var(--sg-font-display);
    font-size:1rem;
    letter-spacing:-.3px;
    text-transform:none;
    color:var(--pk-ink);
    margin:0 0 2px;
}

/*  Date and place carry their own small icons, drawn here rather than in
    the markup - there is one of each per card and they never change.  */
.vs-sec .vs-event-when,
.vs-sec .vs-event-where{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
    color:var(--pk-muted);
    font-size:.84rem;
    font-weight:normal;
}

.vs-sec .vs-event-when::before,
.vs-sec .vs-event-where::before{
    content:"";
    width:13px;
    height:13px;
    flex:0 0 auto;
    background-color:currentColor;
    -webkit-mask:var(--pk-icon) center / contain no-repeat;
    mask:var(--pk-icon) center / contain no-repeat;
}

.vs-sec .vs-event-when::before{
    --pk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10z'/%3E%3C/svg%3E");
}

.vs-sec .vs-event-where::before{
    --pk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.vs-sec .vs-event-blurb{
    margin:6px 0 0;
    color:var(--pk-muted);
    font-size:.86rem;
    line-height:1.6;
}

/*  Black, full width, like the design. The orange button is the site's
    "buy" button and this is a choice, not a purchase.                 */
.vs-sec .vs-event-go{
    margin-top:14px;
    width:100%;
    padding:11px 14px;
    border:0;
    border-radius:10px;
    background:var(--pk-ink);
    color:#fff;
    font-family:var(--sg-font-accent);
    font-size:.68rem;
    font-weight:bold;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-align:center;
    cursor:pointer;
    transition:background-color .2s ease;
}

.vs-sec .vs-event-go:hover{ background:#000; }

/*  The one you have chosen wears the accent, the rest stay black. In the
    design it is the other way up only because the accent there is lime;
    what it is saying is "this is the one", and on our palette that is
    the orange.                                                       */
.vs-sec .vs-event.is-chosen .vs-event-go{
    background:var(--sg-orange);
    color:#12141a;
}

.vs-sec .vs-event.is-chosen .vs-event-go:hover{ background:#e66000; }

.vs-sec .vs-event-go.is-disabled{
    background:#dfe3e9;
    color:#8b93a1;
    cursor:default;
}

/* ---- the status badge, over the picture ---- */
.vs-sec .vs-event-status{
    position:absolute;
    left:9px;
    bottom:9px;
    padding:4px 9px;
    border-radius:6px;
    font-family:var(--sg-font-accent);
    font-size:.56rem;
    font-weight:bold;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vs-sec .vs-event-status.is-open{    background:#16a34a; color:#fff; }
.vs-sec .vs-event-status.is-limited{ background:#f5b83d; color:#3a2600; }
.vs-sec .vs-event-status.is-closed{  background:#12141a; color:#fff; }
.vs-sec .vs-event-status.is-soon{    background:#12141a; color:#fff; }


/* ==========================================================================
   THE PAGE IS WHITE

   Everywhere else on this site is dark. This page is a form - seven
   steps, a map, uploads and a payment - and a long form is easier to
   fill in on white. It is also the only page whose sibling, the admin
   desk, is already light.

   Done by redefining the tokens rather than by rewriting the rules:
   style.css paints the body from --sg-black and --sg-text, and most of
   the surfaces in this file come from --sg-panel and --sg-border. Set
   those here and the page turns over with them.

   WHAT STAYS DARK, AND WHY
     the hero          it is a photograph with words on it
     the vendor type   the same - two photo cards
     the site map      it is a canvas, and the colours on it mean
                       something to a vendor choosing a site. Flipping
                       it risks the one part of this page where a
                       wrong colour costs somebody a booking.
   ========================================================================== */
.vendor-signup{
    --sg-black:#f6f7f9;
    --sg-panel:#ffffff;
    --sg-panel-light:#f2f4f7;
    --sg-border:#e3e6ec;
    --sg-text:#12141a;
    --sg-muted:#4b5262;
    --sg-dim:#6b7280;

    /*  The grain overlay is a light film meant for a dark page; on
        white it reads as dirt.                                     */
    --sg-grain:none;
}

/*  The flow band. .section has no colour of its own, so this is the
    page showing through - which is now the light one.             */
.vendor-signup .vs-apply{ color:var(--sg-text); }

/*  Headings come from style.css white. On white they need the ink.  */
.vendor-signup h2,
.vendor-signup h3,
.vendor-signup .vs-sec h2{ color:var(--sg-text); }

/*  Inputs: white boxes with a visible edge rather than dark wells.  */
.vendor-signup input,
.vendor-signup select,
.vendor-signup textarea{
    background:#fff;
    color:var(--sg-text);
    border-color:var(--sg-border);
}

.vendor-signup input::placeholder,
.vendor-signup textarea::placeholder{ color:#9aa1ad; }

/*  The hero keeps its own dark world - photograph, white type, cobwebs
    and all - so nothing above resets it.                          */
.vendor-signup .vs-hero,
.vendor-signup .vs-hero h1,
.vendor-signup .vs-hero p{ color:#fff; }


/* ==========================================================================
   COLOURS THAT ONLY WORKED ON BLACK

   Turning the page over left three of the site's colours sitting on white
   at contrast a person cannot read. Found by walking every visible element
   on every step and measuring foreground against its real background - not
   by looking, because the worst of them, white on white, is invisible
   rather than ugly and would have been missed.

       gold #ffb700 on white      1.75 : 1   - 22 labels and values
       .btn white text on white   1.00 : 1   - 10 Back and next buttons
       orange #ff6b00 as a link   2.9  : 1

   Each is fixed by darkening it for the light part of the page only. The
   hero, the two vendor type cards and the map keep the originals, because
   they are still dark and the colours still work there.
   ========================================================================== */
.vendor-signup{
    /*  A gold dark enough to read on white and still recognisably ours.
        4.9 : 1 against white, where 4.5 is the readable threshold.    */
    --sg-gold:#8a5f00;
}

/*  The three places that are still dark keep the real gold.           */
.vendor-signup .vs-hero{
    --sg-gold:#ffb700;
}

/*  The outline button. style.css gives it white text for a black page,
    which on white was invisible. The only one left in the form is on the
    confirmation card - the Back buttons it was written for went with the
    wizard.

    Scoped to .btn-outline and not to every button that is not the ticket
    one: widened that far it catches Continue as well and turns the whole
    form's buttons into outlines.                                      */
.vendor-signup .vs-apply .btn-outline{
    color:#12141a;
    border-color:#c9ced7;
    background:#fff;
}

.vendor-signup .vs-apply .btn-outline:hover{
    background:#12141a;
    border-color:#12141a;
    color:#fff;
}

/*  Orange as a text link. The button keeps the brand orange - white on
    it is the same as everywhere else on the site - but orange type on
    white is too pale to read, so links get a darker one.              */
.vendor-signup .vs-apply a:not(.btn){
    color:#b34700;
}

.vendor-signup .vs-apply a:not(.btn):hover{
    color:#12141a;
}


/* ==========================================================================
   THE ONE-PAGE LAYOUT

   Five numbered sections down the middle and a summary stuck to the side.
   The summary is the whole reason this works: a long form with no sense of
   how far through you are is worse than a wizard, and it is the one thing
   the wizard did give you.

   On a phone the summary comes first and stops sticking - a fixed panel on
   a small screen eats the room the form needs, and at the top of the page
   it still does its job, which is to say what this is going to involve.
   ========================================================================== */
.vs-apply-inner{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 290px;
    align-items:start;
    gap:clamp(20px, 3vw, 40px);
    max-width:var(--sg-max-width);
    margin:auto;
}

.vs-main{
    display:flex;
    flex-direction:column;
    gap:clamp(16px, 2vw, 26px);
    min-width:0;
}

/*  Each section is a card. The padding comes from the old step panel, so a
    section reads the same as a step did - it is the arrangement that has
    changed, not the furniture.                                          */
.vs-sec{
    /*  Clears the sticky rail. Without it a section scrolled to sits with
        its number and heading under the rail, so it looks like the page
        landed one line too far down.                                  */
    scroll-margin-top:66px;
}

/*  A locked section shows its number and the reason, and nothing else.
    Locked rather than hidden, so somebody landing here can see what the
    whole thing is going to ask before committing to any of it.        */
/*  h2 stays: the number is inside the heading now rather than a line
    above it, so hiding everything but .vs-secnum would have taken the
    section's name down with its contents and left a numbered box that
    does not say what it is for.                                      */
.vs-sec.is-locked > *:not(h2):not(.vs-lock){ display:none; }
.vs-sec:not(.is-locked) > .vs-lock{ display:none; }

/*  The note under a subheading. The subheadings carry a rule above them,
    so an intro paragraph belongs to the one it sits under.            */
.vs-sub-note{
    margin:-10px 0 18px;
    color:var(--sg-muted);
    font-size:.92rem;
    line-height:1.65;
}

/*  Continue. One button, not a Back and a Continue - going back is a
    scroll now, or a click on the summary.                             */
.vs-sec-actions{ margin-top:26px; }

/* ---- the summary ------------------------------------------------------- */
/*  align-self:stretch, not the grid's own align-items:start.

    A sticky box can only travel inside its own container, and a grid item
    aligned to the start is exactly as tall as its contents - so it had
    nowhere to go and scrolled off the top with everything else. Stretched,
    the column is as tall as the form beside it and the panel rides down
    it.                                                                 */
/* ==========================================================================
   WHAT THE WHITE PAGE BROKE, MEASURED RATHER THAN LOOKED AT

   Every one of these was found by walking the page and comparing each piece
   of text against the colour actually behind it. The first three matter:
   they are unreadable, not merely unlovely.
   ========================================================================== */

/*  Orange as type on white. The buttons keep the brand orange - white on
    it is what the rest of the site does - but the total, which is the one
    number on this page a vendor actually checks, was 2.9 : 1.          */
.vs-sum-total,
.vs-sum-total span,
.vs-sum-total strong,
.vs-help-link{
    color:#b34700;
}

/*  Accepting Vendors, and the tick beside a finished section - white on
    a green that was a shade too light to carry it.                    */
.vs-sec .vs-event-status.is-open{ background:#15803d; }

/* ==========================================================================
   THE DESIGN MAX SENT THROUGH

   A rail of five steps across the top, a card per section, and the booking
   itself down the side. Three things changed from what was here before:

     the type       Poppins for the headings and Inter for the rest, which
                    is what the design uses. Everywhere else on this site
                    is Arial Black over Arial - right for a page shouting
                    about a party, wrong for a form somebody is filling in
                    with their insurance certificate open in another tab.
                    This page is the exception and the only one.

     no dark panels the vendor type cards were photographs with white type
                    over them, and the chosen category chip went near
                    black. On a white page both read as holes in it.

     orange         the design came through in lime. Max asked for our
                    orange, so the lime is orange and the black button in
                    the design is our black.
   ========================================================================== */
.vendor-signup{
    --sg-font:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sg-font-display:"Poppins", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

    /*  The accent face was Courier, which is what gives the rest of the
        site its backstage-pass look. On a form it turned every field
        label into a typewriter caption.                               */
    --sg-font-accent:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --vs-ink:#12141a;
    --vs-line:#e3e6ec;
    --vs-soft:#f6f7f9;
}

/*  Headings lose the uppercase and the black weight along with the face. */
.vendor-signup .vs-apply h2,
.vendor-signup .vs-apply h3,
.vendor-signup .vs-rail{
    text-transform:none;
    letter-spacing:-.4px;
    font-weight:600;
}

/* ---- the rail ---------------------------------------------------------- */
.vs-rail{
    position:sticky;
    top:0;
    z-index:20;
    background:#0b0b0b;
    border-bottom:1px solid #1e1e1e;
}

.vs-rail-list{
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
    max-width:var(--sg-max-width);
    margin:auto;
    padding:12px 6%;
    overflow-x:auto;
    scrollbar-width:none;
}

.vs-rail-list::-webkit-scrollbar{ display:none; }

/*  The hairline between one step and the next. Drawn on the item rather
    than as an element of its own so it cannot wrap onto a line by
    itself when the rail runs out of room.                            */
.vs-rail-list li{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-width:0;
}

.vs-rail-list li + li::before{
    content:"";
    flex:1 1 20px;
    height:1px;
    background:#2b2b2b;
    margin:0 4px;
}

.vs-rail-list button{
    display:flex;
    align-items:center;
    gap:9px;
    flex:0 0 auto;
    padding:6px 8px;
    border:0;
    border-radius:8px;
    background:none;
    color:#8b93a1;
    font:inherit;
    font-size:.86rem;
    white-space:nowrap;
    cursor:pointer;
    transition:color .2s ease;
}

.vs-rail-list button:hover{ color:#fff; }

.vs-rail-num{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid #3a3a3a;
    font-size:.8rem;
    font-weight:600;
}

.vs-rail-list .is-here button{ color:#fff; }

.vs-rail-list .is-here .vs-rail-num{
    background:var(--sg-orange);
    border-color:var(--sg-orange);
    color:#12141a;      /* same reason as .vs-secnum */
}

.vs-rail-list .is-done .vs-rail-num{
    background:#15803d;
    border-color:#15803d;
    color:#fff;
}

.vs-rail-list .is-done button{ color:#d4d8de; }

/* ---- section headings -------------------------------------------------- */
.vs-sec-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.vs-sec-aside{
    flex:0 0 auto;
    margin-left:auto;   /* stays right when it wraps to its own line */
    color:#b34700;
    font-size:.86rem;
}

.vendor-signup .vs-apply h2{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:clamp(1.25rem, 2.6vw, 1.6rem);
    margin-bottom:6px;
}

/*  The number is part of the heading now rather than a line above it, so
    a section says what it is in one line instead of two.             */
.vs-secnum{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--sg-orange);

    /*  Ink on the orange, not white on it. White on our orange is 2.9 : 1,
        which is fine on a button the size of a thumb and not fine on a
        30px disc with a single digit in it. Ink is 6.3 : 1 and it is what
        the design does anyway - a dark number on the accent.          */
    color:#12141a;
    font-family:var(--sg-font);
    font-size:.95rem;
    font-weight:bold;
    letter-spacing:0;
}

.vs-sec.is-locked .vs-secnum{ background:#c9ced7; color:#6b7280; }

.vendor-signup .vs-sec-intro{
    margin:0 0 22px 42px;
    color:var(--sg-muted);
    font-size:.94rem;
}

.vendor-signup .vs-sub{
    font-family:var(--sg-font-display);
    font-size:1rem;
    text-transform:none;
    letter-spacing:-.3px;
}

/* ---- the event you picked ---------------------------------------------- */
.vs-picked{
    margin-top:22px;
    border:1px solid var(--sg-orange);
    border-radius:14px;
    background:#fff9f4;
}

.vs-picked-head{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    padding:14px 16px;
}

.vs-picked-art{
    position:relative;
    flex:0 0 auto;
    width:96px;
    height:64px;
    border-radius:10px;
    background-color:#e9ecf1;
    background-image:var(--vs-ev-art);
    background-size:cover;
    background-position:center;
}

.vs-picked-tick{
    position:absolute;
    top:-8px;
    right:-8px;
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#15803d;
    color:#fff;
    font-size:.72rem;
}

.vs-picked-what,
.vs-picked-fact{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    font-size:.82rem;
    color:var(--sg-muted);
    line-height:1.45;
}

.vs-picked-what{ flex:1 1 200px; }

.vs-picked-fact{
    flex:0 1 auto;
    padding-left:18px;
    border-left:1px solid #f0d9c4;
}

.vs-picked-what strong,
.vs-picked-fact strong{
    color:var(--vs-ink);
    font-size:.95rem;
}

.vs-picked-label{
    margin:0 0 2px;
    font-size:.62rem;
    font-weight:bold;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6f6152;      /* 5.4 : 1 on the strip, where #8b7a68 was 4.0 */
}

.vs-picked-more-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    padding:9px 14px;
    border:1px solid var(--vs-line);
    border-radius:9px;
    background:#fff;
    color:var(--vs-ink);
    font:inherit;
    font-size:.84rem;
    cursor:pointer;
}

.vs-picked-more-btn span{ display:inline-block; transition:transform .2s ease; }
.vs-picked-more-btn.is-open span{ transform:rotate(180deg); }

.vs-picked-more{
    padding:4px 16px 18px;
    border-top:1px solid #f0d9c4;
}

/* ---- vendor type, on white --------------------------------------------- */
.vs-type-grid{
    display:grid;
    gap:16px;
}

.vs-type-grid.is-two{
    grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.vs-type{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    border:2px solid var(--vs-line);
    border-radius:14px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.vs-type:hover{
    border-color:#c9ced7;
    box-shadow:0 10px 24px rgba(16,24,40,.08);
}

.vs-type.is-selected{
    border-color:var(--sg-orange);
    background:#fff9f4;
}

.vs-type-ico{
    flex:0 0 auto;
    width:54px;
    height:40px;
    fill:none;
    stroke:var(--vs-ink);
    stroke-width:2;
    stroke-linejoin:round;
}

.vs-type.is-selected .vs-type-ico{ stroke:#b34700; }

.vs-type-body{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
}

.vs-type-name{
    font-family:var(--sg-font-display);
    font-size:1.02rem;
    font-weight:600;
    color:var(--vs-ink);
}

.vs-type-desc{
    color:var(--sg-muted);
    font-size:.86rem;
}

.vs-type-price{
    margin-top:6px;
    font-family:var(--sg-font-display);
    font-size:1.55rem;
    font-weight:600;
    color:var(--vs-ink);
}

.vs-type-per{
    font-size:.92rem;
    font-weight:normal;
    color:var(--sg-muted);
}

/*  Booking fee and GST. Quiet, because it is a qualifier on the price
    rather than a second price - but present, because a vendor comparing
    $100 against the $115.49 that leaves their account should have been
    told here rather than at the checkout.                            */
.vs-type-fees{
    margin-top:2px;
    color:var(--sg-dim);
    font-size:.78rem;
}

.vs-type-size{
    color:var(--sg-muted);
    font-size:.84rem;
    line-height:1.5;
}

/*  The tick only exists on the chosen card. A tick that is merely faint
    reads as one you could turn on, which is not what it means.      */
.vs-type-tick{
    position:absolute;
    top:14px;
    right:14px;
    display:none;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#15803d;
    color:#fff;
    font-size:.78rem;
}

.vs-type.is-selected .vs-type-tick{ display:grid; }

/* ---- fields ------------------------------------------------------------ */
/*  Sentence case, and the same face as everything else. The asterisk comes
    off the input's own required attribute, so a field cannot look optional
    while the form insists on it.                                     */
.vendor-signup .vs-field label{
    font-family:var(--sg-font);
    font-size:.84rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:#3d4351;
}

.vendor-signup .vs-field:has(input[required], select[required], textarea[required])
  > label::after{
    content:" *";
    color:#c0392b;
}

.vendor-signup .vs-field-hint{
    display:flex;
    justify-content:space-between;
    gap:14px;
    color:var(--sg-dim);
}

.vs-field-count{
    flex:0 0 auto;
    color:var(--sg-dim);
    font-size:.78rem;
}

/*  The chosen category went near-black with near-black type on it - the
    same dark-state-on-a-white-page problem as the vendor cards, and it
    only showed once somebody actually picked one.                  */
.vs-category.is-selected{
    border-color:var(--sg-orange);
    background:#fff9f4;
}

.vs-category.is-selected .vs-category-name{ color:#b34700; }

.vendor-signup .vs-category-name{
    font-family:var(--sg-font-display);
    font-size:.92rem;
    font-weight:600;
    text-transform:none;
    letter-spacing:-.2px;
}

.vendor-signup .vs-category-count{
    font-family:var(--sg-font);
    letter-spacing:0;
}

/* ---- your application, down the side ----------------------------------- */
.vs-side{
    min-width:0;
    align-self:stretch;
}

.vs-side-inner{
    position:sticky;
    top:76px;               /* clears the rail */
    border:1px solid var(--vs-line);
    border-radius:16px;
    background:#fff;
    padding:18px;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}

.vs-side-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
}

.vs-side-head{
    font-family:var(--sg-font-display);
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.3px;
    text-transform:none;
    color:var(--vs-ink);
    margin:0;
}

.vs-side-change{
    padding:0;
    border:0;
    background:none;
    color:#b34700;
    font:inherit;
    font-size:.8rem;
    cursor:pointer;
}

.vs-side-empty{
    margin:10px 0 0;
    color:var(--sg-muted);
    font-size:.86rem;
    line-height:1.6;
}

.vs-side-card{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:14px;
}

.vs-side-art{
    flex:0 0 auto;
    width:72px;
    height:56px;
    border-radius:9px;
    background-color:#e9ecf1;
    background-image:var(--vs-ev-art);
    background-size:cover;
    background-position:center;
}

.vs-side-card-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    font-size:.78rem;
    color:var(--sg-muted);
    line-height:1.45;
}

.vs-side-card-text strong{
    color:var(--vs-ink);
    font-size:.88rem;
}

.vs-side-row{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--vs-line);
    font-size:.8rem;
    color:var(--sg-muted);
    line-height:1.45;
}

.vs-side-row strong{ color:var(--vs-ink); font-size:.88rem; }
.vs-side-wait{ color:var(--vs-ink); font-size:.88rem; font-weight:600; }

.vs-side-label{
    margin:0 0 3px;
    font-size:.62rem;
    font-weight:bold;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--sg-dim);
}

/* ---- what the total is made of ----------------------------------------- */
/*  Three lines above the total rather than a note under it saying fees are
    in there somewhere. Somebody looking at a $100 site and a $115.49 charge
    should be able to see which line is ours, which is the payment
    processor's and which is the tax, without opening the checkout.     */
.vs-side-sum{
    display:grid;
    gap:8px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--vs-line);
}

.vs-side-sum > div{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    font-size:.82rem;
    color:var(--sg-muted);
}

.vs-side-sum > div > span:last-child{
    flex:0 0 auto;
    font-variant-numeric:tabular-nums;
    color:var(--vs-ink);
}

/*  The rate, beside the name of the charge. Small and grey, because it
    explains the figure rather than competing with it.                */
.vs-side-sum em{
    font-style:normal;
    color:var(--sg-dim);
    font-size:.92em;
}

/*  The total sits directly under the three lines it adds up, so it does
    not need a rule of its own above it as well.                      */
.vs-side-sum + .vs-side-total{
    margin-top:12px;
    padding-top:12px;
}

.vs-side-total{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--vs-line);
    font-family:var(--sg-font-display);
    font-size:1.05rem;
    font-weight:600;
    color:var(--vs-ink);
}

.vs-side-total strong{ font-size:1.3rem; }

.vs-side-fineprint{
    margin:2px 0 0;
    text-align:right;
    color:var(--sg-dim);
    font-size:.72rem;
}

.vendor-signup .vs-side-go{
    display:block;
    width:100%;
    max-width:none;
    margin-top:16px;
    text-align:center;
}

.vs-side-hold{
    margin:14px 0 0;
    padding:12px;
    border-radius:10px;
    background:var(--vs-soft);
    color:var(--sg-muted);
    font-size:.76rem;
    line-height:1.55;
}

@media (max-width:980px){
    .vs-apply-inner{ grid-template-columns:1fr; }

    /*  The booking comes first and stops sticking. A sticky panel on a
        phone is a panel permanently covering part of the form, and at the
        top of the page it still says what this is going to involve.   */
    .vs-side{ order:-1; }
    .vs-side-inner{ position:static; }
}

@media (max-width:768px){
    .vs-rail-list{ padding:10px 5%; }

    /*  The words go and the numbers stay. Five labels will not fit a phone
        without shrinking past readable, and the rail is still saying which
        of five you are on.                                           */
    .vs-rail-label{ display:none; }
    .vs-rail-list li{ justify-content:center; }

    .vendor-signup .vs-sec-intro{ margin-left:0; }

    .vs-picked-fact{
        padding-left:0;
        border-left:0;
        border-top:1px solid #f0d9c4;
        padding-top:10px;
        flex-basis:100%;
    }
}

/* ==========================================================================
   THE SITE PLAN, ON WHITE

   The last dark panel in the form. It was left alone when the page turned
   over because the colours on it mean something to a vendor choosing a
   site, and getting one wrong there costs somebody a booking - so it is
   turned over deliberately, state by state, keeping every meaning:

     available   green        take it
     held by you orange       yours for the next ten minutes
     on hold     amber        somebody else is mid-checkout
     booked      red          gone
     not available grey       never on offer
     opens later dashed grey  free, but not released yet

   Same six colours, same order of loudness. What changes is that they are
   now inks on a light plan rather than glows on a black one.
   ========================================================================== */
.vendor-signup .vs-map-wrap{
    background:#fbfcfd;
    border-color:var(--vs-line);
    color:var(--vs-ink);
}

/* the fixed furniture - stage, bar, walkway */
.vendor-signup .vmap-landmark rect{
    fill:#eef0f4;
    stroke:#d6dae1;
}

.vendor-signup .vmap-site-label{ fill:#12141a; }
.vendor-signup .vmap-site-sub{ fill:rgba(18,20,26,.6); }

.vendor-signup .vmap-site.is-available rect{ fill:#e7f6ea; stroke:#15803d; }
.vendor-signup .vmap-site.is-held rect{      fill:#fdf3d9; stroke:#a16207; }
.vendor-signup .vmap-site.is-booked rect{    fill:#fdeaea; stroke:#b91c1c; }
.vendor-signup .vmap-site.is-blocked rect{   fill:#f1f2f5; stroke:#c9ced7; }
.vendor-signup .vmap-site.is-mine rect{      fill:#fff1e4; stroke:#c2410c; }

.vendor-signup .vmap-site.is-selectable:hover rect{
    fill:#d4eeda;
    stroke:#15803d;
}

.vendor-signup .vmap-site.is-selected rect{
    fill:#ffe6d2;
    stroke:var(--sg-orange);
    stroke-width:4;
}

.vendor-signup .vmap-site.is-not-open rect{
    fill:#f7f8fa;
    stroke:#c9ced7;
}

.vendor-signup .vmap-site.is-locked .vmap-site-label,
.vendor-signup .vmap-site.is-not-open .vmap-site-label,
.vendor-signup .vmap-site.is-not-open .vmap-site-sub{
    fill:rgba(18,20,26,.42);
}

.vendor-signup .vmap-site.is-wrong-type rect{
    fill:#f7f8fa;
    stroke:#e3e6ec;
}

.vendor-signup .vmap-site.is-wrong-type .vmap-site-label,
.vendor-signup .vmap-site.is-wrong-type .vmap-site-sub{
    fill:rgba(18,20,26,.3);
}

/*  The legend is a set of samples of the plan, so it has to move with it -
    a swatch that does not match the bay it stands for is worse than no
    legend at all.                                                      */
.vendor-signup .vs-swatch.is-available{ background:#e7f6ea; border-color:#15803d; }
.vendor-signup .vs-swatch.is-held{      background:#fdf3d9; border-color:#a16207; }
.vendor-signup .vs-swatch.is-booked{    background:#fdeaea; border-color:#b91c1c; }
.vendor-signup .vs-swatch.is-blocked{   background:#f1f2f5; border-color:#c9ced7; }
.vendor-signup .vs-swatch.is-mine{      background:#fff1e4; border-color:#c2410c; }
.vendor-signup .vs-swatch.is-not-open{  background:#f7f8fa; border-color:#c9ced7; }

/*  The bold bit in "up to 8 bays" was gold, which the white page had
    already darkened - on the plan's own panel it can be the orange.  */
.vendor-signup .vs-map-intro strong{ color:#b34700; }

/* ==========================================================================
   WAITING FOR THE EVENTS

   The list is read from Firestore, which takes about a second on a cold
   load, and until it answers the page cannot tell "none yet" from "none at
   all" - so it used to say "no events are taking vendor applications" and
   then contradict itself.

   Grey cards the shape of real ones, in their place, so the real cards land
   where the grey was instead of shoving the page around.
   ========================================================================== */
.vs-event.is-loading{
    border-color:var(--pk-line);
    box-shadow:none;
    pointer-events:none;
}

.vs-event.is-loading:hover{ transform:none; box-shadow:none; }

.vs-event.is-loading .vs-event-art{ background-image:none; }

/*  One animation on the whole card rather than one per bar, so the bars
    pulse together and it reads as a single thing loading.             */
.vs-event.is-loading .vs-event-art,
.vs-skel{
    background:#e9ecf1;
    animation:vs-pulse 1.4s ease-in-out infinite;
}

.vs-skel{
    display:block;
    height:11px;
    border-radius:5px;
}

.vs-skel-title{
    width:62%;
    height:15px;
    margin-bottom:6px;
}

.vs-skel-line{ width:80%; }
.vs-skel-line.is-short{ width:52%; }

.vs-skel-btn{
    width:100%;
    height:38px;
    border-radius:10px;
    margin-top:12px;
}

@keyframes vs-pulse{
    0%, 100%{ opacity:1; }
    50%{ opacity:.45; }
}

/*  Anybody who has asked for less movement gets the grey without the
    pulse. It still says "something is coming here".                 */
@media (prefers-reduced-motion:reduce){
    .vs-event.is-loading .vs-event-art,
    .vs-skel{ animation:none; }
}

/*  For a screen reader, which cannot see grey boxes. role="status" on it
    means the wait is announced without stealing focus.               */
.vs-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}


/*  [hidden] loses to .vs-field's own display:flex, so the two size fields
    would stay on screen for a market stall without this. Same trap as the
    one on the admin desk.                                            */
.vendor-signup .vs-field[hidden]{ display:none !important; }

/*  A link that lives inside a label. It has to be a button so that
    clicking it does not tick the box it sits in, but it should read as a
    link - so it borrows the type around it and keeps the underline.   */
.vs-inline-link{
    padding:0;
    border:0;
    background:none;
    font:inherit;
    color:#b34700;
    text-decoration:underline;
    cursor:pointer;
}

.vs-inline-link:hover{ color:var(--vs-ink); }

/* ==========================================================================
   AN EVENT WITH NO PICTURE

   Not a grey box. The mark on the house gradient, so an event nobody has
   uploaded a photograph for still looks like ours - and so the card does
   not read as a picture that failed to load, which is what an empty grey
   rectangle looks like to everybody.

   The logo is the file the menu already loads, so this costs no request.
   First layer is on top: the mark sits over the gradient.
   ========================================================================== */
/*  Two shapes to catch. The strip and the summary put the marker on the
    picture itself; a card puts it on the <article>, because that is where
    the custom property lives for the picture to inherit.            */
.vs-event[data-noart] .vs-event-art,
.vs-picked-art[data-noart],
.vs-side-art[data-noart]{
    background-color:#12141a;
    background-image:url('/images/logowhite.png'),
        linear-gradient(135deg, #3a1c05 0%, #12141a 72%);
    background-repeat:no-repeat;
    background-position:center;

    /*  Percentage on the mark so it holds its proportion across the three
        sizes these are drawn at - 320px on a card, 96px on the strip,
        72px in the summary - and cover on the gradient underneath.  */
    background-size:36% auto, cover;
}