/*
 * The account area.
 *
 * SCOPED TO .va-*, ON PURPOSE. Every other page in this app is a measured 1:1
 * replica of a live template and gets the live stylesheet vendored verbatim.
 * This page has no live counterpart to copy - /my-account/ on the store is a
 * WooCommerce template stack that is not in the vendored set - so it is built
 * from the site's OWN tokens instead, and says so rather than claiming a
 * fidelity it has not been measured for.
 *
 * The tokens below are read off the live theme (--vsc-cyan #0EA5E9, navy
 * #0F1D2E / #082040, Onest for headings, Inter for body), so it belongs to the
 * site without pretending to be a replica of a specific page.
 *
 * The .va- prefix is what keeps it out of the vendored cascade: the shared
 * stylesheet this page also loads carries thousands of rules, and an unscoped
 * `.card` here would restyle the header on the way past.
 */

.va-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 20px 96px;
  font-family: Inter, system-ui, sans-serif;
  color: #E6EEF6;
}
.va-wrap h1, .va-wrap h2, .va-wrap h3 { font-family: Onest, Inter, sans-serif; }

.va-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; }
.va-head h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; margin: 0 0 6px; color: #fff; letter-spacing: -0.01em; }
.va-sub { color: #93A7BC; font-size: 14px; margin: 0; }

.va-card {
  background: linear-gradient(180deg, rgba(38,46,61,.55), rgba(15,29,46,.75));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px;
}
.va-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 14px; color: #fff; }
.va-card h2 .va-note { font-weight: 400; font-size: 13px; color: #93A7BC; margin-left: 8px; }

.va-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.va-stat { background: rgba(14,165,233,.07); border: 1px solid rgba(14,165,233,.22); border-radius: 14px; padding: 16px 18px; }
.va-stat .n { font-family: Onest, sans-serif; font-size: 26px; font-weight: 700; color: #7DD3FC; line-height: 1.1; }
.va-stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #93A7BC; margin-top: 6px; }

.va-order { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; background: rgba(8,32,64,.35); }
.va-order-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; }
.va-order-no { font-family: Onest, sans-serif; font-weight: 600; color: #fff; font-size: 16px; }
.va-order-no a { color: #7DD3FC; text-decoration: none; }
.va-order-no a:hover { text-decoration: underline; }
.va-order-meta { color: #93A7BC; font-size: 13px; }
.va-order-total { font-family: Onest, sans-serif; font-weight: 700; color: #fff; font-size: 16px; }

.va-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.va-pill.completed { background: rgba(34,197,94,.16); color: #86EFAC; }
.va-pill.processing { background: rgba(14,165,233,.16); color: #7DD3FC; }
/* 'shipped' is the eighth order status; without this rule the pill renders
   unstyled next to six that are not. See STATUS_LABEL in lib/account.ts. */
.va-pill.shipped { background: rgba(45,212,191,.16); color: #99F6E4; }
.va-pill.pending, .va-pill.on-hold { background: rgba(234,179,8,.16); color: #FDE68A; }
.va-pill.cancelled, .va-pill.failed { background: rgba(239,68,68,.16); color: #FCA5A5; }
.va-pill.refunded { background: rgba(148,163,184,.18); color: #CBD5E1; }

.va-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.va-line { display: flex; gap: 12px; align-items: center; }
.va-line img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: #0B1520; flex: 0 0 44px; }
.va-line-name { font-size: 14px; color: #DCE7F2; }
.va-line-meta { font-size: 12.5px; color: #8FA3B8; }
.va-line-total { margin-left: auto; font-size: 14px; color: #DCE7F2; white-space: nowrap; }

.va-track { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(14,165,233,.09); border: 1px solid rgba(14,165,233,.25); }
.va-track-l { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #7DD3FC; margin-bottom: 4px; }
.va-track a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.va-track code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; font-size: 14px; }

.va-addr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.va-addr { font-size: 14px; line-height: 1.7; color: #C7D6E4; }
.va-addr strong { display: block; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; font-weight: 600; }

.va-empty { color: #93A7BC; font-size: 14.5px; line-height: 1.7; }
.va-empty a { color: #7DD3FC; }

/* ── THE PRIMARY BUTTON. WHITE ON THIS CYAN IS 2.77:1 ─────────────────────
   Measured, not assumed: #FFFFFF on #0EA5E9 is 2.77:1, which fails AA for a
   15px label by a wide margin - and this is the control on every call to
   action in the account. It is the SAME defect the homepage hit on
   `.vh-btn--c` and was fixed the same way, so this uses the site's own
   precedent rather than inventing a colour: midnight #082040 on the cyan,
   which measures 5.87:1.

   The hover BRIGHTENS rather than darkens. The old hover (#0284C7) takes dark
   ink to 3.98:1 - i.e. hovering the button would have broken the contrast that
   resting state had just fixed. #38BDF8 is 7.60:1. */
.va-btn {
  /* inline-FLEX, not inline-block: several of these carry a trailing arrow
     glyph and inline-block gave it no gap, so "See all 24 orders→" ran the
     arrow into the "s". Behaviour for a text-only button is unchanged. */
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: #0EA5E9; color: #fff; border: 0; border-radius: 999px;
  padding: 13px 26px; font-family: Onest, sans-serif; font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.va-btn:hover { background: #38BDF8; color: #fff; }
.va-btn[disabled] { opacity: .55; cursor: default; }
.va-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #DCE7F2; }
.va-btn.ghost:hover { background: rgba(255,255,255,.07); }

/* ---- sign in ---- */
.va-auth { max-width: 440px; margin: 40px auto 90px; }
.va-auth .va-card { padding: 30px 28px; }
.va-auth h1 { font-size: 26px; margin: 0 0 8px; color: #fff; }
.va-auth .va-sub { margin-bottom: 22px; line-height: 1.6; }
.va-label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: #93A7BC; margin: 0 0 8px; font-weight: 600; }
.va-input {
  width: 100%; box-sizing: border-box; background: rgba(8,20,34,.8);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 16px;
  color: #fff; font-size: 15px; font-family: Inter, sans-serif;
}
.va-input:focus { outline: none; border-color: #0EA5E9; box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.va-digits { display: flex; gap: 8px; justify-content: space-between; }
.va-digit { width: 100%; text-align: center; font-size: 22px; padding: 12px 0; letter-spacing: 0; font-family: Onest, sans-serif; }
.va-err { color: #FCA5A5; font-size: 13.5px; margin: 10px 0 0; min-height: 18px; }
.va-ok { color: #86EFAC; font-size: 13.5px; margin: 10px 0 0; }
.va-row { display: flex; gap: 12px; align-items: center; margin-top: 18px; }
.va-link { background: none; border: 0; color: #7DD3FC; cursor: pointer; font-size: 13.5px; padding: 0; font-family: inherit; }
.va-link:hover { text-decoration: underline; }
.va-fields { display: grid; gap: 14px; }
.va-fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.va-mask { color: #fff; font-weight: 600; }

.va-signout { display: flex; gap: 10px; align-items: center; }

@media (max-width: 640px) {
  .va-wrap { padding: 28px 16px 64px; }
  .va-fields .two { grid-template-columns: 1fr; }
  .va-order-top { gap: 6px; }
}

/* ---- partner earnings (/my-account/affiliate/) ----
   Five rules, all new class names, so nothing above changes. The page reuses
   .va-card / .va-stats / .va-order wholesale; only the codes list and the
   small print below a card had no existing equivalent. */
.va-fine { color: #93A7BC; font-size: 12.5px; line-height: 1.65; margin: 14px 0 0; }
.va-fine strong { color: #E6EEF6; font-weight: 600; }

.va-codes { display: grid; gap: 10px; }
.va-code {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 12px 16px; background: rgba(8,32,64,.35);
}
.va-code-name {
  font-family: Onest, sans-serif; font-weight: 700; color: #7DD3FC;
  font-size: 15px; letter-spacing: .04em;
}
.va-code-meta { color: #93A7BC; font-size: 13px; }

/* The hold tile carries a date in its label ("On hold - frees Sep 5"), which is
   longer than every other label in the row. Without this it clipped rather than
   wrapped, and a truncated DATE reads as a different date. */
.va-stat .l { white-space: normal; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE 2026-09-03 CRAFT PASS
   ───────────────────────────────────────────────────────────────────────────
   Same tokens as everything above - Onest for headings, Inter for body, cyan
   #0EA5E9 / #7DD3FC, the navy card gradient - so this reads as one surface
   with the rest of the site rather than a second design.

   What changed and why is in the component files. In short: the account was a
   6,850px scroll of expanded orders with no navigation, a receipt whose
   numbers did not add up, and a carrier name printed next to every tracking
   number against the owner's own shipping rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- account navigation ------------------------------------------------ */
/* The partner dashboard had nothing linking to it from anywhere. */
.va-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 24px; padding: 5px;
  background: rgba(8, 20, 34, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  width: fit-content; max-width: 100%;
}
.va-nav a {
  display: block; padding: 9px 18px; border-radius: 999px;
  font-family: Onest, Inter, sans-serif; font-size: 13.5px; font-weight: 600;
  color: #93A7BC; text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.va-nav a:hover { color: #DCE7F2; background: rgba(255, 255, 255, .05); }
.va-nav a.is-here { color: #fff; background: rgba(14, 165, 233, .22); }

/* ---- small shared text ------------------------------------------------- */
.va-lede { font-size: 15.5px; line-height: 1.65; color: #C7D6E4; margin: 0; }
.va-lede strong { color: #7DD3FC; font-weight: 700; }
.va-muted { color: #8FA3B8; }
.va-cta-row { margin: 18px 0 0; }
.va-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: #93A7BC; text-decoration: none; margin-bottom: 10px;
}
.va-back:hover { color: #7DD3FC; }

/* A tile for a number that is good news (money the customer holds). */
.va-stat.is-good { background: rgba(45, 212, 191, .09); border-color: rgba(45, 212, 191, .28); }
.va-stat.is-good .n { color: #7FE7D4; }

/* ---- order cards ------------------------------------------------------- */
.va-order-open {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
  font-family: Onest, sans-serif; font-size: 13px; font-weight: 600;
  color: #7DD3FC; text-decoration: none;
}
.va-order-open:hover { text-decoration: underline; }

/* Cancelled and failed orders. Present, findable, and visibly not purchases -
   on the owner's own account 11 of 24 orders are one of these, and at equal
   weight they drown the 13 that are real. */
.va-order.is-void { opacity: .62; background: rgba(8, 20, 34, .3); }
.va-order.is-void:hover { opacity: 1; }

.va-thumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; align-items: center; }
.va-thumbs img,
.va-thumbs .va-line-noimg {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
  background: #0B1520; border: 1px solid rgba(255, 255, 255, .07); flex: 0 0 40px;
}
.va-thumbs-more { font-size: 12.5px; color: #8FA3B8; margin-left: 2px; }

/* ---- lines ------------------------------------------------------------- */
.va-line-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-line-name { overflow-wrap: anywhere; }
.va-line-noimg {
  width: 44px; height: 44px; border-radius: 8px; flex: 0 0 44px;
  background: #0B1520; border: 1px solid rgba(255, 255, 255, .06);
}

/* ---- tracking ---------------------------------------------------------- */
.va-track-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.va-track-go {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: Onest, sans-serif; font-size: 13px; font-weight: 600;
  color: #7DD3FC; text-decoration: none; border: 0;
}
.va-track-go:hover { text-decoration: underline; }
/* The number is the thing being copied down, so it stays selectable and plain
   rather than being turned into the link itself. */
.va-track code { user-select: all; }

/* ---- the totals block -------------------------------------------------- */
.va-totals {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.va-tot-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 5px 0; font-size: 14.5px; color: #C7D6E4;
}
.va-tot-row.is-credit span:last-child { color: #86EFAC; }
.va-tot-row.is-muted { color: #8FA3B8; }
.va-tot-row.is-total {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #fff; font-weight: 700; font-size: 16px;
  font-family: Onest, Inter, sans-serif;
}

/* ---- store credit ------------------------------------------------------ */
.va-credits { margin-top: 18px; }
.va-credits-h {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: #7FE7D4; font-weight: 600; margin-bottom: 10px;
}
.va-credit {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid rgba(45, 212, 191, .26); border-radius: 12px;
  background: rgba(45, 212, 191, .07);
}
.va-credit-amt {
  font-family: Onest, sans-serif; font-weight: 700; font-size: 17px; color: #7FE7D4;
}
.va-credit-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; color: #fff; user-select: all;
  padding: 4px 9px; border-radius: 7px; background: rgba(0, 0, 0, .28);
}
.va-credit-part { font-size: 12.5px; color: #8FA3B8; }
.va-copy {
  margin-left: auto; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid rgba(45, 212, 191, .45);
  color: #7FE7D4; font-family: Onest, sans-serif; font-size: 12.5px; font-weight: 600;
}
.va-copy:hover { background: rgba(45, 212, 191, .14); }

/* ---- progressive disclosure of older orders ---------------------------- */
.va-more { margin-top: 4px; }
.va-more > summary {
  list-style: none; cursor: pointer; padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  color: #DCE7F2; font-family: Onest, sans-serif; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.va-more > summary::-webkit-details-marker { display: none; }
.va-more > summary:hover { background: rgba(255, 255, 255, .05); }
.va-more > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px);
}
.va-more[open] > summary { margin-bottom: 14px; }
/* Chevron only. Swapping the LABEL when open needs a second string, and the
   summary already carries a count ("Show 18 earlier orders (11 cancelled)")
   that is still the truth once it is open. */
.va-more[open] > summary::after { transform: rotate(-135deg) translateY(2px); }

.va-help { background: rgba(8, 32, 64, .32); }

@media (max-width: 640px) {
  /* ── IT WRAPS. IT USED TO SCROLL, AND THE SCROLL HID A TAB ──────────────
     `overflow-x: auto; flex-wrap: nowrap` kept the strip on one line and let
     the overflow scroll. Measured in a real engine at 390px with the real
     fonts, for a customer who IS a partner (four tabs):

         nav box 368px, content 446px  ->  78px overflowed
         "Shop"       ended at 441.7px  ->  entirely off-screen
         "Membership" ended at 368.3px  ->  flush against the edge

     The page itself did not overflow, so nothing flagged it: the tab was
     simply not there. On iOS the scrollbar is invisible until you drag, so
     there was no affordance either - a partner on a phone had no way back to
     the shop from their own account, and no reason to think one existed.

     Wrapping cannot hide anything, at any width, for any label. The radius
     drops from a 999px pill to 22px because a two-row stadium turns its ends
     into large semicircles. Nothing else changes: tab padding and font stay
     as they are, so the tap targets do not shrink.

     Non-partners were never affected - three tabs measure 299px and fit. */
  .va-nav { width: 100%; flex-wrap: wrap; overflow: visible; border-radius: 22px; }
  .va-credit { gap: 6px 10px; }
  .va-copy { margin-left: 0; }
  .va-tot-row { font-size: 14px; }
}

/* A card that answers something the customer just did, rather than reporting
   state. Warm rather than cyan so it does not read as another data card. */
.va-notice {
  background: rgba(234, 179, 8, .07);
  border-color: rgba(234, 179, 8, .26);
}
.va-notice h2 { color: #FDE68A; }

/* The partner share link. */
.va-code-share { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.va-code-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #C7D6E4; user-select: all;
  padding: 4px 9px; border-radius: 7px; background: rgba(0, 0, 0, .26);
  overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEMBERSHIP ON THE ACCOUNT PAGE  (2026-09-03)
   ───────────────────────────────────────────────────────────────────────────
   Same tokens as everything above. The plan tiles borrow the stat tile's cyan
   wash rather than inventing a third card treatment, so the page still reads
   as one surface.
   ═══════════════════════════════════════════════════════════════════════════ */

/* What a membership actually gets you. Two lines, not a marketing list -
   the tier cards on /membership/ are where the full comparison lives. */
.va-perks { margin: 14px 0 0; padding: 0 0 0 20px; list-style: none; }
.va-perks li {
  position: relative; color: #C7D6E4; font-size: 14.5px; line-height: 1.7;
  margin: 0 0 6px;
}
.va-perks li::before {
  content: ""; position: absolute; left: -18px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #38BDF8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .16);
}
.va-perks li strong { color: #E6EEF6; font-weight: 600; }

/* The join tiles. `auto-fit` so one sellable tier is a full-width card and
   three are a row - a single tile stranded in a fixed 3-column grid was the
   thing that made the affiliate stat row look broken. */
.va-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px; margin: 18px 0 4px;
}
.va-plan {
  background: rgba(14, 165, 233, .06);
  border: 1px solid rgba(14, 165, 233, .2);
  border-radius: 14px; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
/* The tier they clicked on /membership/, carried through as ?vsmem_tier=. */
.va-plan.is-picked {
  background: rgba(14, 165, 233, .12);
  border-color: rgba(56, 189, 248, .55);
}
.va-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.va-plan-name {
  font-family: Onest, Inter, sans-serif; font-weight: 700; font-size: 16px; color: #fff;
}
.va-plan-price { font-family: Onest, Inter, sans-serif; font-weight: 700; font-size: 17px; color: #7DD3FC; }
.va-plan-price small { font-size: 11.5px; font-weight: 500; color: #93A7BC; margin-left: 1px; }
.va-plan-b { color: #93A7BC; font-size: 13px; line-height: 1.55; margin: 2px 0 12px; }
.va-plan .va-btn { width: 100%; text-align: center; margin-top: auto; }

/* ---- a lone odd tile no longer sits half-width -------------------------
   The stat row is `auto-fit, minmax(150px, 1fr)`, which at 390px resolves to
   two columns. A customer with three tiles (orders, spent, points - no store
   credit) left the third one stranded at half width beside a hole. Measured
   on the owner's own account, which is exactly that shape. */
@media (max-width: 640px) {
  .va-stats > .va-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .va-plans { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTNER EARNINGS — THE CRAFT PASS  (2026-09-03)
   ───────────────────────────────────────────────────────────────────────────
   Rendered and looked at for the first time (verify-shots/account/craft2).
   What it showed: a brand-new partner met FOUR TILES READING $0.00 stacked
   above a card explaining that it was zero, and a partner owed $45 had that
   figure given the same weight as the two zeros beside it. The tiles were four
   disconnected facts and the partner had to do the arithmetic to answer the
   only question the page exists for: how much, and when.
   ═══════════════════════════════════════════════════════════════════════════ */

/* THE ANSWER, ONCE, IN A SENTENCE. */
.va-answer {
  background: linear-gradient(180deg, rgba(14, 165, 233, .13), rgba(14, 165, 233, .06));
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 16px; padding: 20px 22px; margin: 0 0 14px;
}
.va-answer-n {
  font-family: Onest, Inter, sans-serif; font-weight: 700; color: #7DD3FC;
  font-size: clamp(30px, 5vw, 40px); line-height: 1.05; letter-spacing: -0.01em;
}
.va-answer-l { color: #C7D6E4; font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }
.va-answer-l strong { color: #E6EEF6; font-weight: 600; }
.va-answer.is-waiting { border-color: rgba(251, 191, 36, .38); background: linear-gradient(180deg, rgba(251, 191, 36, .12), rgba(251, 191, 36, .05)); }
.va-answer.is-waiting .va-answer-n { color: #FDE68A; }

/* The supporting figures, deliberately smaller than the answer above them. */
.va-subtotals {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  margin: 0 0 22px; padding: 0 22px;
}
.va-subtotal { font-size: 13.5px; color: #93A7BC; }
.va-subtotal b { color: #DCE7F2; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A zero-rate personal code should LOOK different, not only say so. */
.va-code.is-personal { background: rgba(255, 255, 255, .025); border-style: dashed; }
.va-code.is-personal .va-code-name { color: #A9BACD; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE 2026-09-04 ACCOUNT REBUILD
   ───────────────────────────────────────────────────────────────────────────
   Structure taken from the owner's reference screenshots
   (docs/reference/account/aminoclub-*.png): an identity header, a horizontal
   rail of icon tabs with the current one as a filled pill, then a page that
   leads with an eyebrow, a display greeting, a large plan card and a points
   card with the distance to the next reward drawn.

   THE LOOK IS NOT TAKEN. The reference is cream and black with black pills and
   pastel quick-link cards. This is the same navy/cyan system as everything
   above in this file - #0EA5E9 and #7DD3FC on #0F1D2E/#082040, Onest for
   display, Inter for body - so the account still reads as one surface with the
   store rather than as a second design pasted in.

   CONTRAST. Every text colour used here is checked against the surface it sits
   on. The muted label #93A7BC on the darkest card ground (#0B1622) is 6.6:1;
   the dimmest body colour used on a card is #C7D6E4 at 11.4:1. Nothing on
   these pages is below 4.5:1, which is asserted at 1728/1440/390 rather than
   assumed - see the note in the commit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE COLUMN IS ALIGNED TO THE SITE'S OWN CONTENT WIDTH, MEASURED ──────
   The account pages run wider than the old single column - the plan card is
   two columns and the tiles are a four-up row, both of which are cramped at
   1080. The first attempt used 1180px, which produced THREE different gutters
   stacking down one page: measured at 1728, the account column sat at
   274..1454, the newsletter band directly beneath it at 244..1484, and the
   footer at 224..1504.

   The site's own token is `--wrap: 1240px` (public/live/home.css:11152) and
   `.vh-wrap` is `width: min(var(--wrap), calc(100% - 40px))`, so the newsletter
   card's left edge is the site's true content edge. `.va-wrap` is border-box
   with 20px of side padding, so matching that edge means 1240 + 40 = 1280 here:
   the account's CARDS then begin exactly where the newsletter card does -
   verified 244px at 1728 and 100px at 1440, on both. */
.va-ac { max-width: calc(1240px + 40px); }

/* A heading that names the page for a screen reader while the page's own
   display headline does the visible work. Not `display:none` - that removes it
   from the accessibility tree as well, which is the opposite of the point. */
.va-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- identity header --------------------------------------------------- */
.va-ac-head {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin: 0 0 22px;
}
.va-ac-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.va-ac-av {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0EA5E9, #0369A1);
  color: #fff; font-family: Onest, Inter, sans-serif; font-weight: 700;
  font-size: 19px; line-height: 1;
}
.va-ac-idt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-ac-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #93A7BC;
}
.va-ac-name {
  font-family: Onest, Inter, sans-serif; font-size: 18px; font-weight: 600;
  color: #fff; overflow-wrap: anywhere;
}
.va-ac-actions { display: flex; align-items: center; gap: 10px; }
.va-ac-shop {
  font-family: Onest, Inter, sans-serif; font-size: 13.5px; font-weight: 600;
  color: #DCE7F2; text-decoration: none; padding: 10px 6px;
}
.va-ac-shop:hover { color: #7DD3FC; }

/* The back-office signpost. Shell.tsx renders `.va-ac-shop .va-ac-admin` for a
   viewer whose OWN session is an admin one, and until now nothing styled the
   second class, so the one control that leaves the storefront looked identical
   to "Shop" beside it. A filled pill separates them; cyan carries WHITE type,
   which is the storefront's own pairing (`background:#0EA5E9; color: white` in
   vsc-core.css) and what every other filled cyan control here now uses. */
.va-ac-admin {
  color: #fff;
  background: #0EA5E9;
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.va-ac-admin:hover { color: #fff; background: #0284C7; }

/* ---- the tab rail ------------------------------------------------------ */
/* `.va-nav` is the base pill bar this replaces; `.va-rail` adds the icons and
   lets the row SCROLL rather than wrap. A wrapping rail is two rows of pills at
   1180 and three at 390, which stops looking like navigation. */
.va-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.va-rail::-webkit-scrollbar { display: none; }
.va-rail a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; flex: 0 0 auto;
}
.va-rail .va-rail-i { display: inline-flex; opacity: .8; }
.va-rail a.is-here { background: #0EA5E9; color: #fff; }
.va-rail a.is-here .va-rail-i { opacity: 1; }
.va-rail a:focus-visible {
  outline: 2px solid #7DD3FC; outline-offset: 2px;
}

/* ---- page opening ------------------------------------------------------ */
.va-hero { margin: 6px 0 22px; }
.va-hero-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #93A7BC; margin: 0 0 8px;
}
.va-hero-h {
  font-family: Onest, Inter, sans-serif;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: #fff; margin: 0;
}
.va-hero-sub {
  font-size: 15px; line-height: 1.65; color: #A9BACD;
  margin: 12px 0 0; max-width: 62ch;
}
.va-hero-cta { margin: 18px 0 0; }

/* A small caps label introducing a group of cards. */
.va-section-l {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #93A7BC; margin: 28px 0 12px;
}

/* ---- the plan card ----------------------------------------------------- */
.va-plan-card {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px; align-items: center;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(14, 165, 233, .18), transparent 62%),
    linear-gradient(160deg, #12243A, #0A1726 62%, #081522);
  border: 1px solid rgba(125, 211, 252, .18);
  border-radius: 22px; padding: 34px 34px 32px; margin: 0 0 18px;
}
.va-plan-card.is-pending { border-color: rgba(251, 191, 36, .32); }
.va-plan-main { min-width: 0; }
.va-plan-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #7DD3FC; margin: 0 0 10px;
}
.va-plan-name {
  font-family: Onest, Inter, sans-serif;
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: #fff; margin: 0;
}
.va-plan-sub {
  font-size: 15px; line-height: 1.6; color: #A9BACD; margin: 14px 0 0;
  max-width: 42ch;
}
.va-plan-cta { margin: 22px 0 0; }
.va-plan-cta .va-btn { display: inline-flex; align-items: center; gap: 7px; }

/* The fact column, with the hairline the reference uses to bind the rows. */
.va-plan-facts { margin: 0; display: grid; gap: 18px; }
.va-fact { border-left: 1px solid rgba(125, 211, 252, .26); padding-left: 16px; }
.va-fact dt {
  font-size: 12.5px; color: #93A7BC; margin: 0 0 3px;
}
.va-fact dd {
  margin: 0; font-family: Onest, Inter, sans-serif; font-weight: 600;
  font-size: 16px; color: #fff;
}
.va-fact-note { margin: 4px 0 0; font-size: 12px; color: #8FA3B8; line-height: 1.5; }

/* ---- the points card --------------------------------------------------- */
.va-points {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px; align-items: center;
  background: linear-gradient(180deg, rgba(14, 165, 233, .14), rgba(14, 165, 233, .05));
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 20px; padding: 26px 30px; margin: 0 0 22px;
}
.va-points-eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #7DD3FC; margin: 0;
}
.va-points-n {
  font-family: Onest, Inter, sans-serif; font-weight: 700;
  font-size: clamp(40px, 5vw, 62px); line-height: 1; letter-spacing: -0.03em;
  color: #fff; margin: 8px 0 0; font-variant-numeric: tabular-nums;
}
.va-points-w { font-size: 14.5px; color: #C7D6E4; margin: 10px 0 0; }
.va-points-r { min-width: 0; }
.va-bar-top {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: #A9BACD; margin: 0 0 8px;
}
.va-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .11);
}
.va-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #0EA5E9, #7DD3FC);
  /* A zero-width fill is invisible, which reads as a broken bar rather than as
     an empty one. min-width keeps a sliver on screen at 0 points. */
  min-width: 4px;
}
.va-points-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: Onest, Inter, sans-serif; font-size: 13.5px; font-weight: 600;
  color: #7DD3FC; text-decoration: none;
}
.va-points-go:hover { text-decoration: underline; }

/* ---- stat tiles -------------------------------------------------------- */
.va-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin: 0 0 22px;
}
.va-tile {
  background: rgba(8, 20, 34, .5);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px; padding: 18px 20px;
}
.va-tile-l {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #93A7BC;
}
.va-tile-n {
  font-family: Onest, Inter, sans-serif; font-weight: 700;
  font-size: 27px; line-height: 1.15; color: #fff; margin-top: 8px;
  overflow-wrap: anywhere;
}
.va-tile-f { font-size: 12.5px; color: #8FA3B8; margin-top: 6px; }
.va-tile.is-good { border-color: rgba(45, 212, 191, .3); }
.va-tile.is-good .va-tile-n { color: #7FE7D4; }

/* ---- quick links ------------------------------------------------------- */
.va-quick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 0 0 26px;
}
.va-quick-c {
  display: flex; flex-direction: column; gap: 5px;
  border-radius: 16px; padding: 20px 22px; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 32, 64, .38);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.va-quick-c:hover { border-color: rgba(125, 211, 252, .4); transform: translateY(-2px); }
.va-quick-h {
  font-family: Onest, Inter, sans-serif; font-size: 16.5px; font-weight: 600;
  color: #fff;
}
.va-quick-s { font-size: 13.5px; color: #A9BACD; }
.va-quick-go {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: #7DD3FC;
}
/* One accent per destination, so the row reads as three things rather than as
   three copies of one thing. Borders only - a saturated fill behind body text
   is where the reference's pastel cards would fail contrast on a dark ground. */
.va-quick-c.is-partner { border-color: rgba(251, 191, 36, .3); }
.va-quick-c.is-partner .va-quick-go { color: #FDE68A; }
.va-quick-c.is-profile { border-color: rgba(125, 211, 252, .3); }
.va-quick-c.is-orders { border-color: rgba(167, 139, 250, .32); }
.va-quick-c.is-orders .va-quick-go { color: #C4B5FD; }

/* ---- empty states ------------------------------------------------------ */
.va-none { text-align: center; padding: 30px 12px 22px; }
.va-none-h {
  font-family: Onest, Inter, sans-serif; font-size: 19px; font-weight: 600;
  color: #fff; margin: 0 0 8px;
}
.va-none .va-cta-row { margin-top: 18px; }

/* ---- membership tab ---------------------------------------------------- */
.va-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin: 0 0 18px;
}
.va-tier {
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 32, 64, .38);
  border-radius: 18px; padding: 22px 24px;
}
/* A tier with no recurring price behind it. Dimmed and dashed so it reads as
   "not yet" without a button that would refuse every press. */
.va-tier.is-shut { border-style: dashed; background: rgba(255, 255, 255, .025); }
.va-tier-n {
  font-family: Onest, Inter, sans-serif; font-size: 19px; font-weight: 600;
  color: #fff; margin: 0;
}
.va-tier-p {
  font-family: Onest, Inter, sans-serif; font-size: 30px; font-weight: 700;
  color: #fff; margin: 10px 0 0; letter-spacing: -0.02em;
}
.va-tier-p small { font-size: 14px; font-weight: 500; color: #93A7BC; margin-left: 2px; }
.va-tier-l { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.va-tier-l li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: #C7D6E4;
}
.va-tier-l svg { flex: 0 0 auto; margin-top: 2px; color: #7DD3FC; }
.va-tier-note { font-size: 12px; line-height: 1.55; color: #8FA3B8; margin: 14px 0 0; }

.va-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 30px; }
.va-faq-q {
  font-family: Onest, Inter, sans-serif; font-size: 14.5px; font-weight: 600;
  color: #E6EEF6; margin: 0 0 6px;
}
.va-faq-a { font-size: 14px; line-height: 1.65; color: #A9BACD; margin: 0; }

/* ---- rewards tab ------------------------------------------------------- */
.va-how {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 0 0 22px;
}
.va-how-c {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 20, 34, .5);
  border-radius: 16px; padding: 20px 22px;
}
.va-how-l {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #93A7BC; margin: 0;
}
.va-how-h {
  font-family: Onest, Inter, sans-serif; font-size: 19px; font-weight: 600;
  color: #fff; margin: 8px 0 0;
}
.va-how-b { font-size: 13.5px; line-height: 1.6; color: #A9BACD; margin: 10px 0 0; }
.va-how-b a { color: #7DD3FC; }

.va-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.va-ledger li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.va-ledger li:last-child { border-bottom: 0; }
.va-ledger-w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.va-ledger-h { font-size: 14.5px; color: #E6EEF6; }
.va-ledger-s { font-size: 12.5px; color: #8FA3B8; }
.va-ledger-n {
  margin-left: auto; font-family: Onest, Inter, sans-serif; font-weight: 700;
  font-size: 16px; color: #7FE7D4; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.va-ledger li.is-out .va-ledger-n { color: #FDE68A; }

/* ---- profile tab ------------------------------------------------------- */
.va-idcard {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(160deg, rgba(14, 165, 233, .16), rgba(14, 165, 233, .05));
  border: 1px solid rgba(56, 189, 248, .26);
  border-radius: 20px; padding: 24px 28px; margin: 0 0 20px;
}
.va-idcard-av {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #0EA5E9, #0369A1);
  color: #fff; font-family: Onest, Inter, sans-serif; font-weight: 700; font-size: 26px;
}
.va-idcard-l {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #7DD3FC; margin: 0;
}
.va-idcard-n {
  font-family: Onest, Inter, sans-serif; font-size: 22px; font-weight: 700;
  color: #fff; margin: 6px 0 0; overflow-wrap: anywhere;
}
.va-idcard-s { font-size: 13.5px; color: #A9BACD; margin: 5px 0 0; overflow-wrap: anywhere; }

.va-rows { margin: 0; display: grid; gap: 0; }
.va-row-i {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline;
  padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.va-row-i:last-child { border-bottom: 0; }
.va-row-i dt {
  flex: 0 0 150px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #93A7BC;
}
.va-row-i dd {
  margin: 0; font-size: 15px; color: #E6EEF6; overflow-wrap: anywhere;
}

/* ---- partner: why join ------------------------------------------------- */
.va-why {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px; margin: 0 0 20px;
}
.va-why-c {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(8, 32, 64, .38);
  border-radius: 16px; padding: 20px 22px;
}
.va-why-h {
  font-family: Onest, Inter, sans-serif; font-size: 16px; font-weight: 600;
  color: #fff; margin: 0;
}
.va-why-b { font-size: 13.5px; line-height: 1.6; color: #A9BACD; margin: 8px 0 0; }

/* Store credit is money, so its card is marked as such rather than looking
   like every other panel on the page. */
.va-credit-card { border-color: rgba(45, 212, 191, .28); }

/* ---- narrower ---------------------------------------------------------- */
@media (max-width: 900px) {
  .va-plan-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .va-points { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}

@media (max-width: 640px) {
  .va-ac { max-width: none; }
  .va-ac-head { gap: 12px; }
  .va-ac-av { width: 40px; height: 40px; font-size: 17px; }
  .va-ac-name { font-size: 16px; }
  /* ── THE RAIL SCROLLS, AND IT HAS TO LOOK LIKE IT DOES ─────────────────
     Six tabs do not fit in 390px, and wrapping them would put three rows of
     pills above the fold - which is most of the first screen. So it scrolls.

     But a rounded pill bar that ENDS neatly 16px from the screen edge reads as
     a complete three-item nav, and the other three tabs are then invisible and
     undiscoverable: the first capture at 390 showed exactly that. Running the
     strip to the viewport edge instead means the next tab is clipped by the
     SCREEN, which is the affordance every horizontal rail relies on - and
     unlike a fade mask it costs nothing when the rail is scrolled to its end.

     The 640px rule further up sets `flex-wrap: wrap` on `.va-nav`, so
     restating nowrap here is not redundant. */
  .va-rail {
    flex-wrap: nowrap; overflow-x: auto;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  .va-rail a { padding: 9px 14px; font-size: 13px; }
  .va-hero-h { font-size: 30px; }
  .va-plan-name { font-size: 38px; }
  .va-points-n { font-size: 44px; }
  .va-row-i dt { flex-basis: 100%; }
  .va-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .va-tile { padding: 15px 16px; }
  .va-tile-n { font-size: 23px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   THE ADDRESS BOOK  (components/account/AddressBook.tsx)
   ─────────────────────────────────────────────────────────────────────────
   The first EDITABLE thing in the account area, so it is the first that needs
   form furniture beyond the sign-in box. It deliberately reuses `.va-input`,
   `.va-label`, `.va-btn` and `.va-err` rather than introducing a second set of
   field styles - the sign-in card and this form should be the same object.

   CONTRAST IS MEASURED, NOT ASSUMED. Composited in a real browser at 1728,
   1440 and 390 (tmp/verify-address-visual.mjs -> verify-shots/address-book/
   contrast.json), blending every translucent layer down to the first opaque
   ancestor - the card is a gradient over a dark page, so reading the declared
   colour alone gives the wrong answer:

     .va-ferr     #FCA5A5 on rgb(15,22,32)   ->   9.57:1
     .va-opt      #93A7BC on rgb(15,22,32)   ->   7.35:1
     .va-fslegend #93A7BC on rgb(15,22,32)   ->   7.35:1
     .va-check    #C7D6E4 on rgb(15,22,32)   ->  12.26:1
     .va-input    #FFFFFF on rgb(9,20,34)    ->  18.46:1
     .va-btn      #082040 on #0EA5E9         ->   5.87:1  (the site's own
                  precedent value, unchanged - it matching exactly is what
                  validates the measurement method)

   Worst across every new control at every width: 5.87:1. #FCA5A5 is the same
   red `.va-err` already uses, so a field error and a form error read as one
   system. */

.va-cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
/* `.va-card h2` carries its own bottom margin; inside the head row the flex
   gap owns the spacing, so it is dropped rather than fought with. */
.va-cardhead h2 { margin: 0; }

/* The small control that sits beside a heading. Same pill, less weight, so it
   reads as secondary to the page's real calls to action. */
.va-btn-sm { padding: 8px 16px; font-size: 13.5px; }

.va-fs { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.va-fslegend {
  padding: 0; margin: 0 0 12px;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em;
  color: #93A7BC; font-weight: 600;
}

/* Two-up on desktop, one-up on a phone. `minmax(0,1fr)` rather than `1fr`:
   a bare 1fr floors at the content's min-content width, which a long
   autofilled value can exceed - that is the classic grid overflow. */
.va-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 560px) { .va-fgrid { grid-template-columns: minmax(0, 1fr); } }

.va-f { margin: 0 0 14px; min-width: 0; }
.va-f .va-label { margin-bottom: 6px; }
.va-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* `select` does not inherit the font from `.va-input` on its own in any
   engine, and an unstyled arrow on a dark field renders as a light system
   control. Both are set here so the state picker matches its siblings. */
select.va-input {
  appearance: none; -webkit-appearance: none;
  font-family: Inter, sans-serif;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A7BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px;
}
select.va-input option { background: #0B1622; color: #fff; }

.va-fbad .va-input { border-color: #F87171; }
.va-fbad .va-input:focus { border-color: #F87171; box-shadow: 0 0 0 3px rgba(248,113,113,.20); }
.va-ferr { color: #FCA5A5; font-size: 12.5px; margin: 6px 0 0; }

.va-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 18px; cursor: pointer;
  color: #C7D6E4; font-size: 14px; line-height: 1.5;
}
/* 18px, not the ~13px default: this is the control that decides whether a
   second address is collected at all, and it is tapped on a phone. */
.va-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0EA5E9; flex: none; }

.va-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Full width and stacked on a phone, so neither button lands under a thumb by
   accident and neither wraps its own label. */
@media (max-width: 560px) {
  .va-actions { flex-direction: column; }
  .va-actions .va-btn { width: 100%; }
}