/* /verify-bot/ — Lords Verification: the product page, the setup wizard and the owner's dashboard (js/verify-bot.js).
   Reuses site.css: tokens, header, buttons, eyebrow, lede, coin rail, section heads, the lime pricing block, the
   stamp, the wallet rows, the WalletConnect pop-up, the footer. The app is ONE container with flat content inside:
   rules, spacing and colour — never a box inside the box (the owner's rule); confirms and alerts are dialogs.
   Mobile first: most server owners will set this up from a phone. */

/* ---------- header: the badge + "Lords Verification · by Hood Lords" ---------- */
.vb-brand-row { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.vb .brand span { white-space: nowrap; }
.vb-by {
  padding-left: .7rem; border-left: 1px solid var(--line); white-space: nowrap;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
}
.vb .nav a { white-space: nowrap; }
/* the section links only where they fit on the line beside "Lords Verification · by Hood Lords"; "Set up" stays */
@media (max-width: 820px) { .vb .nav a:not(.nav-x) { display: none; } }
@media (max-width: 400px) { .vb-by { display: none; } .vb .brand { font-size: 1.3rem; } }

/* The app goes first once someone is signed in (js adds .is-app): the hero steps aside, the product info stays below. */
.vb-main { display: flex; flex-direction: column; }
.vb.is-app .vb-hero { display: none; }
.vb.is-app .vb-app { order: -1; padding-top: clamp(1.25rem, 4vw, 2.5rem); }

/* ---------- hero ---------- */
.vb-hero { position: relative; overflow: clip; }
.vb-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center;
  padding: clamp(2.25rem, 7vw, 6rem) var(--gutter) clamp(2.25rem, 6vw, 5rem); max-width: 1320px; margin-inline: auto;
}
@media (max-width: 820px) { .vb-hero-grid { grid-template-columns: 1fr; } }
.vb-mark {
  margin: 0 0 1.25rem; font-family: var(--display); font-weight: 400; color: var(--lime);
  font-size: clamp(3.4rem, 1.6rem + 8.5vw, 8rem); line-height: .84; letter-spacing: .01em;
  display: flex; flex-direction: column;
}
.vb-mark span:nth-child(2) { padding-left: .22em; color: var(--bone); }
.vb-hero .lede strong { color: var(--lime); }
.vb-price-line {
  margin: 0; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
}
.vb-price-line::before { content: "✦ "; color: var(--lime); }
/* the holder's way out, tucked under the lede and ABOVE the buttons — in view on a phone before "Set up my server" is
   (2026-10-01: below them it sat under the fold). A line of text, flat: no box. */
.vb-hero .vb-holder-line { margin: -.85rem 0 1.4rem; }
.vb-proof { margin: .6rem 0 0; font-size: var(--step--1); color: var(--bone-dim); }
.vb-proof b { color: var(--lime); }
.vb-hero-copy > * { animation: rise .8s var(--ease-out) both; }
.vb-hero-copy > *:nth-child(2) { animation-delay: .08s; }
.vb-hero-copy > *:nth-child(3) { animation-delay: .16s; }
.vb-hero-copy > *:nth-child(4) { animation-delay: .24s; }
.vb-hero-copy > *:nth-child(5) { animation-delay: .3s; }
.vb-hero-copy > *:nth-child(6) { animation-delay: .36s; }

/* the badge: round, on a hard offset slab like the home page's hero art, stamped */
.vb-badge { position: relative; margin: 0; justify-self: center; width: min(78vw, 340px); animation: rise 1s var(--ease-out) .15s both; }
.vb-badge img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--lime-dim); }
.vb-badge .stamp { top: .6rem; right: -.6rem; color: var(--lime); border-color: var(--lime); }
.vb-badge figcaption {
  margin-top: 1.3rem; text-align: center;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim);
}
@media (max-width: 820px) { .vb-badge { order: -1; width: min(56vw, 240px); justify-self: start; margin-bottom: .5rem; } .vb-badge figcaption { display: none; } }
@media (prefers-reduced-motion: reduce) { .vb-hero-copy > *, .vb-badge { animation: none; } }

/* ---------- sections ---------- */
.vb-sec { padding: clamp(3rem, 8vw, 6.5rem) var(--gutter); max-width: 1320px; width: 100%; margin-inline: auto; }
.vb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
@media (max-width: 820px) { .vb-steps { grid-template-columns: 1fr; } }
.vb-steps li { padding: 1.4rem clamp(0rem, 2vw, 1.75rem) 1.6rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 821px) { .vb-steps li + li { padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--line); } }
.vb-step-n { display: block; font-family: var(--display); font-size: var(--step-3); line-height: 1; color: var(--lime); }
.vb-steps h3 { margin: .4rem 0 .5rem; font: 700 var(--step-1) var(--narrow); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.vb-steps p { margin: 0; color: var(--bone-dim); max-width: 42ch; }
.vb-steps b { color: var(--bone); }

/* what holders see: the Discord illustration + four flat points */
.vb-sees-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .vb-sees-grid { grid-template-columns: 1fr; } }
.vb-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vb-points li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .vb-points li { grid-template-columns: 1fr; gap: .2rem; } }
.vb-points b { font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); padding-top: .2rem; }
.vb-points span { color: var(--bone); }

/* Discord's dark theme, drawn — its own greys and blurple, scoped here. One surface; the embed is a rule down its side. */
.vb-discord {
  --dc-bg: #313338; --dc-text: #dbdee1; --dc-dim: #949ba4; --dc-head: #f2f3f5; --dc-green: #248046; --dc-grey: #4e5058; --dc-app: #5865f2;
  margin: 0; background: var(--dc-bg); color: var(--dc-text); padding: 1rem 1rem 1.2rem; border-radius: 8px;
  font: 400 .95rem/1.4 "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 10px 10px 0 var(--lime-dim);
}
.vb-d-chan { margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 1px solid #3f4147; font-weight: 700; color: var(--dc-head); }
.vb-d-chan span { color: var(--dc-dim); margin-right: .15rem; font-weight: 400; }
.vb-d-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; }
.vb-d-msg + .vb-d-msg { margin-top: 1.1rem; }
.vb-d-av { width: 40px; height: 40px; border-radius: 50%; }
.vb-d-body p { margin: 0; }
.vb-d-name { font-weight: 600; color: var(--dc-head); }
.vb-d-app { display: inline-block; margin-left: .25rem; padding: 0 .3rem; border-radius: 3px; background: var(--dc-app); color: #fff; font-size: .62rem; font-weight: 700; vertical-align: .12em; }
.vb-d-time { margin-left: .3rem; color: var(--dc-dim); font-size: .72rem; font-weight: 400; }
.vb-d-embed { margin-top: .35rem; padding: .2rem 0 .2rem .8rem; border-left: 4px solid var(--lime); }
.vb-d-embed p + p { margin-top: .35rem; }
.vb-d-title { font-weight: 700; color: var(--dc-head); }
.vb-d-small { font-size: .82rem; color: var(--dc-dim); }
.vb-d-body b { color: var(--dc-head); }
.vb-d-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem !important; }
.vb-d-btn { display: inline-block; padding: .35rem .9rem; border-radius: 4px; background: var(--dc-grey); color: #fff; font-size: .85rem; font-weight: 600; }
.vb-d-btn.is-go { background: var(--dc-green); }
.vb-d-reply { opacity: .95; }

/* FAQ: flat details rows */
.vb-faq { border-top: 1px solid var(--line); max-width: 860px; }
.vb-faq details { border-bottom: 1px solid var(--line); }
.vb-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; font: 700 var(--step-1) var(--narrow); letter-spacing: .02em; color: var(--bone);
}
.vb-faq summary::-webkit-details-marker { display: none; }
.vb-faq summary::after { content: "+"; font: 400 1.6rem/1 var(--sans); color: var(--lime); transition: transform .25s var(--ease-out); }
.vb-faq details[open] summary::after { transform: rotate(45deg); }
.vb-faq summary:hover { color: var(--lime); }
.vb-faq details p { margin: 0 0 1.2rem; max-width: 64ch; color: var(--bone-dim); }
.vb-faq details p b { color: var(--bone); }

.vb-pricing .tier-foot .btn { white-space: nowrap; }

/* ---------- the app: ONE container ---------- */
.vb-app { padding: 0 0 clamp(3rem, 8vw, 6rem); }   /* the landing's last word: right under the FAQ */
.vb-app-box {
  width: min(100% - 2 * var(--gutter), 900px); margin-inline: auto;
  border: 3px solid var(--lime-dim); background: color-mix(in oklch, var(--lime) 4%, var(--ink));
  padding: clamp(1.25rem, 4vw, 2.25rem);
}
@media (max-width: 560px) { .vb-app-box { width: 100%; border-width: 3px 0; padding: 1.4rem var(--gutter); } }
.vb-app-box > .eyebrow { margin-bottom: .5rem; }
.vb-app-title { margin: 0 0 .6rem; font-family: var(--display); font-weight: 400; font-size: var(--step-3); line-height: .95; color: var(--lime); overflow-wrap: anywhere; }
.vb-app-lede { margin: 0 0 1.1rem; max-width: 60ch; color: var(--bone); }
.vb-app-lede b, .vb-p b { color: var(--lime); }
.vb-p { margin: 0 0 .9rem; max-width: 62ch; color: var(--bone-dim); }
.vb-p:last-child { margin-bottom: 0; }
.vb-p code, .vb-mono { font-family: ui-monospace, Menlo, monospace; font-size: .9em; color: var(--bone); overflow-wrap: anywhere; }
.vb-signin-btn { min-width: 16rem; }
@media (max-width: 560px) { .vb-signin-btn, .vb-wide-btn { width: 100%; } }
.vb-rule { margin: 1.4rem 0; border: 0; border-top: 1px solid var(--line); }

/* the signed-in line: who, and a way out */
.vb-who { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--bone-dim); }
.vb-who img, .vb-who .vb-av-none { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lime); object-fit: cover; flex: none; }
.vb-av-none { display: inline-grid; place-items: center; background: var(--ink-3); color: var(--lime); font: 700 .85rem var(--narrow); }
.vb-who b { color: var(--bone); font: 700 var(--step-0) var(--narrow); letter-spacing: .03em; }
.vb-who .link-btn { margin-left: auto; }

/* progress / error lines — text, not a box */
.vb-status { margin: .9rem 0 0; color: var(--bone-dim); font-size: var(--step--1); max-width: 62ch; overflow-wrap: anywhere; }
.vb-status:empty { display: none; }
.vb-status.is-busy { color: var(--bone); }
.vb-status.is-busy::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .55em; border-radius: 50%; background: var(--lime); animation: vb-pulse 1s ease-in-out infinite; vertical-align: .05em; }
.vb-status.is-bad { color: color-mix(in oklch, var(--red) 80%, var(--bone)); }
.vb-status.is-bad .link-btn { color: var(--lime); }
.vb-status.is-good { color: var(--lime); }
.vb-status.is-warn { color: oklch(84% 0.14 85); }
.vb-status code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; color: var(--bone); }
/* a refusal that carries a list (what to fix, what the build will do, what was made) — plain lines, no box */
.vb-status-list { margin: .35rem 0 .15rem; padding-left: 1.15rem; }
.vb-status-list li { margin: .2rem 0; }
.vb-status-list li::marker { color: currentColor; }
.vb-status-list.is-plan { color: var(--bone-dim); }
.vb-status-sub { display: block; margin-top: .6rem; color: var(--bone); font-weight: 600; }
@keyframes vb-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .vb-status.is-busy::before { animation: none; } }

/* tags: coloured words, a dot between them — text, never a little box inside the box */
.vb-tag { display: inline-block; font: 700 .72rem var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap; }
.vb-tag + .vb-tag::before { content: "·"; margin-right: .5em; color: var(--bone-dim); }
.vb-tag.is-live { color: var(--lime); }
.vb-tag.is-warn { color: oklch(84% 0.14 85); }
.vb-tag.is-bad { color: color-mix(in oklch, var(--red) 80%, var(--bone)); }

/* ---------- your servers: flat rows ---------- */
.vb-srv-list { list-style: none; margin: .6rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.vb-srv-list li { border-bottom: 1px solid var(--line); }
.vb-srv {
  width: 100%; min-height: 4rem; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  padding: .6rem 0; background: none; border: 0; color: var(--bone); cursor: pointer; text-align: left; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.vb-srv:hover .vb-srv-name, .vb-srv:focus-visible .vb-srv-name { color: var(--lime); }
.vb-srv:focus-visible { outline: none; }
.vb-srv:focus-visible .vb-srv-go { text-decoration: underline; }
.vb-srv-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.vb-srv-icon.vb-av-none { font-size: 1.05rem; border-color: var(--line); }
.vb-srv-text { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.vb-srv-name { font: 700 var(--step-0) var(--narrow); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-srv-sub { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; font-size: var(--step--1); color: var(--bone-dim); }
.vb-srv-go { font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); white-space: nowrap; }
.vb-srv-go::after { content: " →"; }

/* ---------- one server: the head, the stepper ---------- */
.vb-back { margin: 0 0 1rem; }
.vb-srv-head { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.1rem; }
.vb-srv-head .vb-srv-icon { width: 52px; height: 52px; border-color: var(--lime); }
.vb-srv-head .vb-av-none { width: 52px; height: 52px; font-size: 1.2rem; }
.vb-srv-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1; color: var(--lime); overflow-wrap: anywhere; }
.vb-srv-head p { margin: .3rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.vb-stepper { list-style: none; margin: 0 0 1.4rem; padding: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; border-bottom: 1px solid var(--line); counter-reset: vbstep; }
.vb-stepper li { counter-increment: vbstep; color: var(--bone-dim); }
.vb-stepper button {
  display: inline-flex; align-items: center; gap: .4em; background: none; border: 0; padding: .35rem 0; cursor: pointer; color: inherit;
  font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase;
}
/* the number (or the tick) is the button's own first part, so on a phone the circle alone is still something to tap */
.vb-stepper button::before { content: counter(vbstep); flex: none; display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--ink-3); color: var(--bone-dim); font: 900 .85em var(--sans); letter-spacing: 0; }
.vb-stepper li.is-done button::before { content: "✓"; background: transparent; color: var(--lime); box-shadow: inset 0 0 0 2px var(--lime); }
.vb-stepper li.is-now { color: var(--bone); }
.vb-stepper li.is-now button::before { background: var(--lime); color: var(--on-lime); }
.vb-stepper button:hover { color: var(--lime); }
.vb-stepper button:disabled { cursor: default; color: inherit; }
/* a phone: the circles in a row, and "Step 2 of 6 · Collection" under them (the labels stay for screen readers) */
.vb-step-count { display: none; margin: 0 0 1.2rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.vb-step-count b { color: var(--lime); }
@media (max-width: 560px) {
  .vb-stepper { gap: .5rem; padding-bottom: .7rem; margin-bottom: .8rem; }
  .vb-stepper button { padding: .3rem; font-size: .9rem; }
  .vb-step-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vb-step-count { display: block; }
}

.vb-step-title { margin: 0 0 .5rem; font: 700 var(--step-1) var(--narrow); letter-spacing: .04em; text-transform: uppercase; color: var(--bone); }
.vb-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 560px) { .vb-actions .btn { flex: 1 1 100%; } }
.vb-done-mark { margin: 0 0 .5rem; font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 12vw, 5rem); line-height: .9; color: var(--lime); }

/* ---------- forms: labels over fields, flat ---------- */
.vb-field { display: grid; gap: .35rem; margin: 0 0 1rem; max-width: 36rem; }
.vb-field > span, .vb-legend {
  font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim);
}
.vb-field small, .vb-help { color: var(--bone-dim); font-size: var(--step--1); line-height: 1.4; }
.vb-input {
  width: 100%; min-width: 0; background: var(--ink-2); color: var(--bone); border: 2px solid var(--line); border-radius: 0;
  font: 500 var(--step-0)/1.25 var(--sans); padding: .75rem .9rem; transition: border-color .2s;
}
.vb-input.is-mono { font-family: ui-monospace, Menlo, monospace; font-size: .95rem; }
.vb-input::placeholder { color: var(--bone-dim); opacity: .55; }
.vb-input:focus { border-color: var(--lime); outline: none; }
.vb-input[aria-invalid="true"] { border-color: var(--red); }
.vb-row { display: flex; gap: .6rem; align-items: stretch; }
.vb-row > .vb-input { flex: 1; }
@media (max-width: 560px) { .vb-row { flex-direction: column; } }
.vb-inline { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .5rem; align-items: center; margin-bottom: .5rem; max-width: 36rem; }
.vb-inline .link-btn { white-space: nowrap; }
.vb-fieldset { margin: 1.2rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }

/* ---------- the brand (white label): colour, preview, the dashboard's line ---------- */
.vb-colour { display: flex; gap: .6rem; align-items: center; }
.vb-colour input[type="color"] { flex: none; width: 3.1rem; height: 3.1rem; padding: 0; border: 2px solid var(--line); background: var(--ink-2); cursor: pointer; }
.vb-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.vb-colour input[type="color"]::-webkit-color-swatch { border: 0; }
.vb-colour .vb-input { max-width: 11rem; }
.vb-colour .link-btn { white-space: nowrap; }
/* the preview: the verify page's head, drawn flat under a rule — never a box in the box */
.vb-pv-legend { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); max-width: none; }
.vb-pv { padding: .8rem 0 .2rem; max-width: 36rem; }
.vb-pv-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .18em; text-transform: uppercase; color: var(--pv-dim, var(--lime-dim)); min-width: 0; }
.vb-pv-eyebrow > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-pv-icon { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; font-size: .7rem; }
.vb-pv-logo { height: 22px; width: auto; max-width: 80px; flex: none; object-fit: contain; }
.vb-pv-mark { margin: 0 0 .5rem; font: 400 clamp(2rem, 6vw, 3rem)/.9 var(--display); color: var(--pv-accent, var(--lime)); overflow-wrap: anywhere; }
.vb-pv-mark span { display: block; margin-top: .12em; font-size: .56em; line-height: 1; color: var(--bone); }
.vb-pv-tag { margin: 0 0 .8rem; font: 700 var(--step-0)/1.3 var(--narrow); letter-spacing: .06em; color: var(--pv-accent, var(--lime)); overflow-wrap: anywhere; }
.vb-pv-btn { display: inline-flex; margin-top: .3rem; padding: .7rem 1.1rem; background: var(--pv-accent, var(--lime)); color: var(--on-lime); font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; }
.vb-brand-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 1.1rem 0 0; font-size: var(--step--1); color: var(--bone-dim); }
.vb-brand-line .vb-legend { margin-right: .2rem; }
.vb-brand-parts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; }
.vb-brand-parts b { color: var(--bone); }
.vb-brand-parts code { font-family: ui-monospace, Menlo, monospace; color: var(--bone); }
.vb-brand-parts .dot { color: var(--bone-dim); }
.vb-swatch { display: inline-block; width: .95rem; height: .95rem; border-radius: 50%; vertical-align: -.12em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.vb-brand-logo { height: 20px; width: auto; max-width: 64px; object-fit: contain; vertical-align: middle; }
/* floated, so the legend sits under the rule like any label instead of cutting through it */
.vb-fieldset > .vb-legend { float: left; width: 100%; margin: 0 0 .5rem; padding: 0; }
.vb-fieldset > .vb-legend + * { clear: both; }

/* the licence choice: two flat rows with a radio each */
.vb-choices { list-style: none; margin: .4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.vb-choices li { border-bottom: 1px solid var(--line); }
.vb-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .9rem 0; cursor: pointer; }
.vb-choice input { width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; accent-color: var(--lime); }
.vb-choice b { display: block; font: 700 var(--step-0) var(--narrow); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); }
.vb-choice span { display: block; color: var(--bone-dim); font-size: var(--step--1); }
.vb-choice:has(input:checked) b { color: var(--lime); }
.vb-pane { padding: 1rem 0 .2rem; }
.vb-soon { margin: 0; font: 700 var(--step-1) var(--narrow); letter-spacing: .02em; color: var(--bone); max-width: 40ch; }
.vb-soon + .vb-p { margin-top: .5rem; }

/* the treasury line: the address to pay, big enough to check by eye */
.vb-pay { margin: 0 0 1rem; }
.vb-pay-addr { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: .3rem 0 .2rem; }
.vb-pay-addr code { font: 600 var(--step-0) ui-monospace, Menlo, monospace; color: var(--lime); overflow-wrap: anywhere; word-break: break-all; }
.vb-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 2px solid var(--line); }
.vb-seg label { cursor: pointer; }
.vb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.vb-seg span { display: block; padding: .5rem 1rem; font: 700 var(--step--1) var(--narrow); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.vb-seg input:checked + span { background: var(--lime); color: var(--on-lime); }
.vb-seg input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 2px; }

/* ---------- collections: what was found, and the list ---------- */
.vb-found { margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px solid var(--line); }
.vb-found-name { margin: 0 0 .2rem; font: 700 var(--step-1) var(--narrow); letter-spacing: .03em; color: var(--lime); overflow-wrap: anywhere; }
.vb-found-meta { margin: 0 0 .8rem; color: var(--bone-dim); font-size: var(--step--1); }
.vb-found-meta code { color: var(--bone); }
.vb-cands { list-style: none; margin: .5rem 0 .8rem; padding: 0; }
.vb-cands li { border-top: 1px solid var(--line); }
.vb-cands li:last-child { border-bottom: 1px solid var(--line); }
.vb-cols { list-style: none; margin: .4rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.vb-cols li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.vb-col-name { font: 700 var(--step-0) var(--narrow); letter-spacing: .04em; color: var(--bone); overflow-wrap: anywhere; }
.vb-col-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: var(--step--1); color: var(--bone-dim); }
.vb-col-meta code { color: var(--bone-dim); }
.vb-cols .link-btn { grid-column: 2; grid-row: 1 / span 2; }
.vb-empty { margin: .4rem 0 0; color: var(--bone-dim); font-size: var(--step--1); }

/* the build: what it makes, one line each */
.vb-plan { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.vb-plan li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); color: var(--bone); }
.vb-plan li::before { content: "·"; color: var(--lime-dim); font-weight: 900; text-align: center; }
.vb-plan li.is-ok::before { content: "✓"; color: var(--lime); }
.vb-plan li.is-warn::before { content: "!"; color: oklch(84% 0.14 85); }
.vb-plan li.is-warn { color: oklch(84% 0.14 85); }
.vb-plan code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }

/* done: the three things to keep */
.vb-keep { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.vb-keep li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .vb-keep li { grid-template-columns: minmax(0, 1fr) auto; } .vb-keep li > b { grid-column: 1 / -1; } }
.vb-keep b { font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.vb-keep code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; color: var(--bone); overflow-wrap: anywhere; min-width: 0; }
.vb-keep .link-btn, .vb-keep a { white-space: nowrap; }
.vb-keep-acts { display: inline-flex; gap: 1rem; }

/* ---------- the dashboard ---------- */
.vb-facts { display: flex; flex-wrap: wrap; margin: 0 0 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vb-facts > div { padding: .8rem 1.2rem .8rem 0; margin-right: 1.2rem; border-right: 1px solid var(--line); }
.vb-facts > div:last-child { border-right: 0; margin-right: 0; }
.vb-facts dt { font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.vb-facts dd { margin: .1rem 0 0; font-family: var(--display); font-size: var(--step-2); line-height: 1.05; color: var(--lime); }
.vb-facts dd small { display: block; font: 700 var(--step--1) var(--narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
@media (max-width: 560px) { .vb-facts > div { flex: 1 1 45%; margin-right: 0; padding-right: .8rem; border-right: 0; } .vb-facts > div:nth-child(odd) { border-right: 1px solid var(--line); margin-right: .8rem; } }
.vb-warn { margin: .2rem 0 .5rem; padding-left: .8rem; border-left: 3px solid oklch(80% 0.16 80); color: oklch(88% 0.1 85); font-size: var(--step--1); max-width: 70ch; }
.vb-warn.is-bad { border-left-color: var(--red); color: color-mix(in oklch, var(--red) 70%, var(--bone)); }
.vb-warn b { color: var(--bone); }
.vb-tabs { display: flex; gap: 1.2rem; margin: 1.4rem 0 .8rem; border-bottom: 1px solid var(--line); }
.vb-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: .6rem 0; cursor: pointer; font: 700 var(--step--1) var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.vb-tabs button.is-on { color: var(--lime); border-bottom-color: var(--lime); }
.vb-tabs button:hover { color: var(--lime); }
.vb-tabs .vb-count { margin-left: .35em; color: var(--bone); }

/* the linked wallets: flat rows (a table on a computer, stacked on a phone) */
.vb-links { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.vb-links th { text-align: left; padding: .5rem .6rem .5rem 0; font: 700 .72rem var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); border-bottom: 1px solid var(--line); }
.vb-links td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--bone); }
.vb-links td.dim, .vb-links .dim { color: var(--bone-dim); }
.vb-links code { font-family: ui-monospace, Menlo, monospace; font-size: .95em; }
.vb-links .vb-who-cell b { display: block; font: 700 var(--step-0) var(--narrow); letter-spacing: .03em; overflow-wrap: anywhere; }
.vb-links .num { font-weight: 700; color: var(--lime); }
.vb-links tr.is-none .num { color: var(--bone-dim); }
.vb-links .link-btn { padding-top: 0; padding-bottom: 0; margin: 0; }
@media (max-width: 640px) {
  .vb-links thead { display: none; }
  .vb-links, .vb-links tbody, .vb-links tr, .vb-links td { display: block; }
  /* who, then the wallet, then "holds · checked" on one line; Unlink down the right */
  .vb-links tr { padding: .7rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; }
  .vb-links td { padding: 0; border: 0; }
  .vb-links td:nth-child(1), .vb-links td:nth-child(2) { grid-column: 1 / 3; }
  .vb-links td:nth-child(3) { grid-column: 1; }
  .vb-links td:nth-child(4) { grid-column: 2; }
  .vb-links td:last-child { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
}
.vb-more { margin-top: .8rem; }
.vb-search { max-width: 26rem; margin: 0 0 .6rem; }