/* WhatBox MCF — component library v1. Requires tokens.css.
   All selectors are wb- prefixed; legacy hooks (.btn .card .chip .fieldRow …) are untouched.
   Breakpoints: 720px (= --wb-bp-mobile), 1040px (= --wb-bp-narrow). */

/* ── Base ─────────────────────────────────────────────────────────── */
.wb-page{background:var(--wb-page);color:var(--wb-ink);font:var(--wb-fw-body) var(--wb-fs-body)/var(--wb-lh-body) var(--wb-font);padding:var(--wb-s4) var(--wb-s6) var(--wb-s8);display:flex;flex-direction:column;gap:var(--wb-s4);box-sizing:border-box;min-height:100%}
.wb-page *,.wb-page *::before,.wb-page *::after{box-sizing:border-box}
.wb-page a{color:var(--wb-brand);font-weight:600;text-decoration:none}
.wb-page a:hover{color:var(--wb-brand-hover);text-decoration:underline}
.wb-page :focus-visible{outline:none;box-shadow:0 0 0 2px var(--wb-surf),0 0 0 4px var(--wb-focus)}
.wb-num{font-variant-numeric:tabular-nums}
.wb-money{font-variant-numeric:tabular-nums;text-align:right}
.wb-mono{font-family:var(--wb-mono);font-size:12px}
.wb-muted{color:var(--wb-ink3)}
.wb-help{font-size:var(--wb-fs-help);line-height:var(--wb-lh-help);color:var(--wb-ink2)}
.wb-help.-quiet{color:var(--wb-ink3)}
.wb-help.-warn{color:var(--wb-warn)}
.wb-help.-good{color:var(--wb-good)}
.wb-help.-crit{color:var(--wb-crit)}
.wb-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Brand row + page header + tabs ───────────────────────────────── */
.wb-brand{display:flex;align-items:center;padding:var(--wb-s1) 0 0}
.wb-brand img{height:var(--wb-logo-h);width:auto;display:block}
.wb-page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--wb-s4);flex-wrap:wrap}
.wb-page-header__title{font:var(--wb-fw-title) var(--wb-fs-title)/var(--wb-lh-title) var(--wb-font);margin:0}
.wb-page-header__status{font-size:var(--wb-fs-body);line-height:var(--wb-lh-body);color:var(--wb-ink2);margin-top:2px}
.wb-page-header__status b{color:var(--wb-ink);font-weight:600}
.wb-page-header__actions{display:flex;gap:var(--wb-s2);flex:none}
.wb-tabs{display:flex;gap:var(--wb-s1);border-bottom:1px solid var(--wb-line)}
.wb-tabs__tab{padding:10px 12px;font-weight:500;color:var(--wb-ink2);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.wb-tabs__tab:hover{color:var(--wb-ink);text-decoration:none}
.wb-tabs__tab[aria-current="page"]{color:var(--wb-ink);font-weight:600;border-bottom-color:var(--wb-brand)}

/* ── Card ─────────────────────────────────────────────────────────── */
.wb-card{background:var(--wb-surf);border:1px solid var(--wb-line);border-radius:var(--wb-r-card);box-shadow:var(--wb-shadow-1);display:flex;flex-direction:column;gap:var(--wb-s3);padding:var(--wb-s4)}
.wb-card.-flush{padding:0;gap:0;overflow:hidden}
.wb-card.-good{border-color:var(--wb-good-line);box-shadow:var(--wb-shadow-2)}
.wb-card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s2)}
.wb-card.-flush>.wb-card__head{padding:var(--wb-s3) var(--wb-s4)}
.wb-card__title{font:var(--wb-fw-card) var(--wb-fs-card)/var(--wb-lh-card) var(--wb-font);margin:0}
.wb-card__foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--wb-s2);border-top:1px solid var(--wb-line);padding-top:var(--wb-s3);flex-wrap:wrap}
.wb-card__foot.-split{justify-content:space-between}
.wb-card.-flush>.wb-card__foot{padding:var(--wb-s3) var(--wb-s4);background:var(--wb-surf2)}
.wb-card__note{padding:10px var(--wb-s4);font-size:var(--wb-fs-help);line-height:var(--wb-lh-help);color:var(--wb-ink3);border-top:1px solid var(--wb-line)}
.wb-grid{display:grid;gap:var(--wb-s4);grid-template-columns:repeat(var(--wb-cols,2),minmax(0,1fr));align-items:start}
.wb-grid.-fields{gap:var(--wb-s3);grid-template-columns:repeat(var(--wb-cols,3),minmax(0,1fr))}
@media (max-width:1040px){.wb-grid{grid-template-columns:1fr}.wb-grid.-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.wb-grid.-fields{grid-template-columns:1fr}}

/* ── Stat ─────────────────────────────────────────────────────────── */
.wb-stat{background:var(--wb-surf);border:1px solid var(--wb-line);border-left:3px solid var(--wb-inh);border-radius:var(--wb-r-card);padding:var(--wb-s3) 14px;display:flex;flex-direction:column;gap:2px}
.wb-stat.-gold{border-left-color:var(--wb-gold)}.wb-stat.-good{border-left-color:var(--wb-good)}.wb-stat.-crit{border-left-color:var(--wb-crit)}
.wb-stat__label{font-size:var(--wb-fs-help);color:var(--wb-ink2)}
.wb-stat__value{font:var(--wb-fw-stat) var(--wb-fs-stat)/var(--wb-lh-stat) var(--wb-font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wb-stat.-gold .wb-stat__value{color:var(--wb-gold)}.wb-stat.-crit .wb-stat__value{color:var(--wb-crit)}.wb-stat__value.-none{color:var(--wb-ink3)}
.wb-stat__basis{font-size:var(--wb-fs-help);color:var(--wb-ink3)}
.wb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wb-s3)}
@media (max-width:720px){.wb-stats{grid-template-columns:1fr}}

/* ── Banner ───────────────────────────────────────────────────────── */
.wb-banner{display:flex;gap:10px;padding:10px 12px;border-radius:var(--wb-r-ctl);background:var(--wb-inh-bg);border:1px solid var(--wb-inh-line);color:var(--wb-ink);font-size:var(--wb-fs-body);line-height:1.45}
.wb-banner__icon{width:18px;height:18px;border-radius:50%;background:var(--wb-inh);color:var(--wb-ink-inv);font:700 11px/18px var(--wb-font);text-align:center;flex:none}
.wb-banner__icon svg{width:10px;height:10px;vertical-align:-1px}
.wb-banner.-warn{background:var(--wb-warn-bg);border-color:var(--wb-warn-line)}.wb-banner.-warn .wb-banner__icon{background:var(--wb-warn)}
.wb-banner.-crit{background:var(--wb-crit-bg);border-color:var(--wb-crit-line)}.wb-banner.-crit .wb-banner__icon{background:var(--wb-crit)}
.wb-banner.-billing{background:var(--wb-brand-soft);border-color:var(--wb-brand)}.wb-banner.-billing .wb-banner__icon{background:var(--wb-brand)}

/* ── Chip ─────────────────────────────────────────────────────────── */
.wb-chip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--wb-r-pill);font:var(--wb-fw-chip) var(--wb-fs-chip)/1 var(--wb-font);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;background:var(--wb-surf3);color:var(--wb-ink2);border:1px solid var(--wb-line-strong);font-variant-numeric:tabular-nums}
.wb-chip.-good{background:var(--wb-good-bg);color:var(--wb-good);border-color:var(--wb-good-line)}
.wb-chip.-inh{background:var(--wb-inh-bg);color:var(--wb-inh);border-color:var(--wb-inh-line)}
.wb-chip.-warn{background:var(--wb-warn-bg);color:var(--wb-warn);border-color:var(--wb-warn-line)}
.wb-chip.-crit{background:var(--wb-crit-bg);color:var(--wb-crit);border-color:var(--wb-crit-line)}
.wb-chip.-brand{background:var(--wb-brand-soft);color:var(--wb-brand-ink);border-color:var(--wb-brand)}
.wb-chip.-quiet{color:var(--wb-ink3);border-color:var(--wb-line)}
.wb-chip.-row{height:18px;padding:0 6px;font-size:10px;background:var(--wb-surf)} /* chip inside a tinted row */
.wb-chip.-row.-warn{color:var(--wb-warn)}.wb-chip.-row.-crit{color:var(--wb-crit)}

/* ── Buttons ──────────────────────────────────────────────────────── */
.wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wb-s2);height:var(--wb-ctl-h);padding:0 12px;border-radius:var(--wb-r-ctl);font:600 var(--wb-fs-body)/1 var(--wb-font);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--wb-dur-fast) var(--wb-ease),color var(--wb-dur-fast);background:var(--wb-surf);color:var(--wb-ink);border:1px solid var(--wb-line-strong)}
.wb-btn:hover{background:var(--wb-surf2);text-decoration:none;color:var(--wb-ink)}
.wb-btn:disabled,.wb-btn[aria-disabled="true"]{background:var(--wb-surf);color:var(--wb-ink3);border-color:var(--wb-line);cursor:not-allowed}
.wb-btn.-primary{background:var(--wb-btn-primary-bg);color:var(--wb-btn-primary-fg);border-color:transparent}
.wb-btn.-primary:hover{background:var(--wb-btn-primary-hover);color:var(--wb-btn-primary-fg)}
.wb-btn.-primary:disabled{background:var(--wb-surf3);color:var(--wb-ink3)}
.wb-btn.-destructive{color:var(--wb-crit);border-color:var(--wb-crit-line)}
.wb-btn.-destructive:hover{background:var(--wb-crit-bg);color:var(--wb-crit)}
.wb-btn.-destructive.-confirm{background:var(--wb-crit);color:var(--wb-ink-inv);border-color:transparent}
.wb-btn.-ghost{background:transparent;border-color:transparent;color:var(--wb-brand);padding:0 8px}
.wb-btn.-ghost:hover{background:var(--wb-brand-soft);color:var(--wb-brand-hover)}
.wb-btn.-ghost.-quiet{color:var(--wb-ink3);font-weight:500;font-size:var(--wb-fs-help)}
.wb-btn.-outline-brand{color:var(--wb-brand);border-color:var(--wb-brand)}
.wb-btn.-sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--wb-r-sm)}
.wb-btn.-block{width:100%}
.wb-btn.is-loading{pointer-events:none}
.wb-btn.is-saved,.wb-btn.-saved{background:var(--wb-good-bg);color:var(--wb-good);border-color:var(--wb-good-line)} /* hold for --wb-dur-saved, then revert */
.wb-btn__spinner,.wb-spinner{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:wb-spin .8s linear infinite;flex:none}
@keyframes wb-spin{to{transform:rotate(360deg)}}
.wb-actions{display:flex;gap:var(--wb-s2);align-items:center;flex-wrap:wrap}
@media (max-width:720px){.wb-btn{font-size:var(--wb-fs-mobile-btn)}.wb-actions.-stack{flex-direction:column;align-items:stretch}.wb-actions.-stack .wb-btn{width:100%}}

/* ── Fields ───────────────────────────────────────────────────────── */
.wb-field{display:flex;flex-direction:column;gap:var(--wb-s1);min-width:0}
.wb-field.-inline{flex-direction:row;align-items:center;gap:6px}
.wb-label{font-weight:500;font-size:var(--wb-fs-help);color:var(--wb-ink2)}
.wb-label .wb-req{color:var(--wb-crit)}
.wb-field.is-disabled .wb-label{color:var(--wb-ink3)}
.wb-input,.wb-select{height:var(--wb-ctl-h);padding:0 10px;border:1px solid var(--wb-line-strong);border-radius:var(--wb-r-ctl);background:var(--wb-surf);color:var(--wb-ink);font:var(--wb-fs-body) var(--wb-font);width:100%;min-width:0;transition:border-color var(--wb-dur-fast)}
.wb-input::placeholder{color:var(--wb-ink3)}
.wb-input:hover,.wb-select:hover{border-color:var(--wb-ink3)}
.wb-input:focus-visible,.wb-select:focus-visible{border-color:var(--wb-focus)}
.wb-input:disabled,.wb-select:disabled{background:var(--wb-surf3);color:var(--wb-ink3);border-color:var(--wb-line);cursor:not-allowed}
.wb-input.-num{text-align:right;font-variant-numeric:tabular-nums}
.wb-input.-mono{font-family:var(--wb-mono);font-size:12px}
.wb-input.-tiny{width:var(--wb-input-tiny);flex:none}
.wb-input.-small{width:var(--wb-input-small);flex:none}
.wb-input.-override{border-style:dashed} /* pack override: placeholder shows the measured value */
.wb-field.is-error .wb-input,.wb-input[aria-invalid="true"]{border-color:var(--wb-crit)}
.wb-field.is-error .wb-help,.wb-error{color:var(--wb-crit);font-size:var(--wb-fs-help)}
.wb-field.is-warn .wb-input{border-color:var(--wb-warn-line)}
.wb-select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236E7089' stroke-width='1.5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.wb-dims{display:flex;gap:var(--wb-s1);align-items:center}
.wb-dims__x{color:var(--wb-ink3)}
@media (max-width:720px){.wb-dims .wb-input.-tiny{width:auto;flex:1}}
.wb-filter{position:relative;width:240px;max-width:100%}
.wb-filter .wb-input{padding-left:30px}
.wb-filter svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--wb-ink3);pointer-events:none}
/* Checkbox / radio: native inputs, styled via accent-color, plus an optional card variant */
.wb-check,.wb-radio{display:flex;gap:var(--wb-s2);align-items:center;font-size:var(--wb-fs-body);cursor:pointer;min-height:24px}
.wb-check input,.wb-radio input{width:16px;height:16px;margin:0;accent-color:var(--wb-brand);flex:none}
.wb-check.-top,.wb-radio.-top{align-items:flex-start}.wb-check.-top input,.wb-radio.-top input{margin-top:2px}
.wb-check.is-disabled,.wb-radio.is-disabled{color:var(--wb-ink3);cursor:not-allowed}
.wb-radio-card{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);background:var(--wb-surf);cursor:pointer}
.wb-radio-card input{margin:2px 0 0;accent-color:var(--wb-brand);flex:none}
.wb-radio-card:has(input:checked){border-color:var(--wb-brand);background:var(--wb-brand-soft)}
.wb-radio-card b{display:block;font-size:var(--wb-fs-body)}
.wb-radio-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--wb-s2)}
@media (max-width:720px){.wb-radio-cards{grid-template-columns:1fr}.wb-check input,.wb-radio input{width:20px;height:20px}}
.wb-toggle-row{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s2);padding:8px 10px;border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);background:var(--wb-surf2)}
.wb-toggle-row .wb-check{font-weight:500}
/* Range with end labels */
.wb-range{display:flex;flex-direction:column;gap:6px}
.wb-range__head{display:flex;justify-content:space-between;font-weight:500}
.wb-range__val{color:var(--wb-ink3);font-weight:400;font-variant-numeric:tabular-nums}
.wb-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0;cursor:pointer}
.wb-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--wb-brand) var(--wb-pct,50%),var(--wb-line-strong) var(--wb-pct,50%))}
.wb-range input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--wb-line-strong)}
.wb-range input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--wb-brand)}
.wb-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--wb-range-thumb);height:var(--wb-range-thumb);margin-top:calc((4px - var(--wb-range-thumb))/2);border-radius:50%;background:var(--wb-surf);border:2px solid var(--wb-brand);box-shadow:var(--wb-shadow-1)}
.wb-range input[type=range]::-moz-range-thumb{width:var(--wb-range-thumb);height:var(--wb-range-thumb);border-radius:50%;background:var(--wb-surf);border:2px solid var(--wb-brand);box-shadow:var(--wb-shadow-1)}
.wb-range__ends{display:flex;justify-content:space-between;font-size:var(--wb-fs-help);color:var(--wb-ink2)}
/* Segment filter chips (replace hidden checkboxes) */
.wb-segment{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.wb-segment::-webkit-scrollbar{display:none}
.wb-segment__item{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--wb-r-pill);font:600 12px/1 var(--wb-font);background:var(--wb-surf);color:var(--wb-ink2);border:1px solid var(--wb-line-strong);cursor:pointer;white-space:nowrap;flex:none;text-decoration:none}
.wb-segment__item:hover{background:var(--wb-surf2);text-decoration:none;color:var(--wb-ink)}
.wb-segment__item[aria-pressed="true"],.wb-segment__item.is-active{background:var(--wb-btn-primary-bg);color:var(--wb-btn-primary-fg);border-color:transparent}
.wb-segment__item.-warn{background:var(--wb-warn-bg);color:var(--wb-warn);border-color:var(--wb-warn-line)}
.wb-segment__item.-crit{background:var(--wb-crit-bg);color:var(--wb-crit);border-color:var(--wb-crit-line)}
@media (max-width:720px){.wb-segment__item{height:32px;padding:0 12px}}
.wb-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s3);padding:var(--wb-s3) var(--wb-s4);border-bottom:1px solid var(--wb-line);flex-wrap:wrap}
.wb-legend{display:flex;gap:var(--wb-s4);padding:8px var(--wb-s4);background:var(--wb-surf2);border-bottom:1px solid var(--wb-line);font-size:var(--wb-fs-help);line-height:var(--wb-lh-help);color:var(--wb-ink2);flex-wrap:wrap}
.wb-legend b{color:var(--wb-ink)}

/* ── Table (CSS grid; set --wb-cols on .wb-table) ─────────────────── */
.wb-table{display:flex;flex-direction:column;font-size:var(--wb-fs-table);line-height:var(--wb-lh-table);font-variant-numeric:tabular-nums;overflow-x:auto}
/* fr tracks in --wb-cols must be written minmax(0,Nfr) so a text column can shrink
   below its content instead of collapsing to 0 and letting the row overflow. */
.wb-table>.wb-table__head,.wb-table>.wb-row{min-width:min-content}
.wb-table__head,.wb-row{display:grid;grid-template-columns:var(--wb-cols);gap:var(--wb-s3);padding:8px var(--wb-s4);align-items:center;border-bottom:1px solid var(--wb-line)}
.wb-table__head{font:var(--wb-fw-chip) var(--wb-fs-chip)/1.3 var(--wb-font);color:var(--wb-ink2);letter-spacing:.02em;text-transform:uppercase;align-items:end}
.wb-row{min-height:var(--wb-row-h);transition:background var(--wb-dur-base)}
.wb-row:last-child{border-bottom:0}
.wb-row.-placeholder{background:var(--wb-warn-bg)}
.wb-row.-violation{background:var(--wb-crit-bg)}
.wb-row.-archived{opacity:.55}
.wb-row.-saved{box-shadow:inset 3px 0 0 var(--wb-good)} /* hold --wb-dur-saved */
.wb-row.-new{background:var(--wb-brand-soft)}
.wb-cell{min-width:0}
.wb-cell.-num,.wb-cell.-money{text-align:right}
.wb-cell.-r{text-align:right}
.wb-cell__title{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wb-cell__sub{font-size:var(--wb-fs-help);color:var(--wb-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-cell.-mono{font-family:var(--wb-mono);font-size:12px}
.wb-cell .-good,.wb-delta.-good{color:var(--wb-good)}
.wb-delta.-crit{color:var(--wb-crit);font-weight:600}
.wb-table__pager{display:flex;justify-content:space-between;align-items:center;padding:10px var(--wb-s4);font-size:var(--wb-fs-help);color:var(--wb-ink3)}
/* Rows become cards below --wb-bp-table (1100px): the fixed px tracks of the wide
   tables (products, boxes, amazon-skus) no longer fit inside the embedded admin frame
   between ~720 and ~1100px, so they collapse there rather than scrolling sideways. */
@media (max-width:1100px){
  .wb-table__head{display:none}
  .wb-table{gap:var(--wb-s3);padding:var(--wb-s3)}
  .wb-row{display:flex;flex-direction:column;align-items:stretch;gap:var(--wb-s2);padding:var(--wb-s3);border:1px solid var(--wb-line);border-radius:var(--wb-r-card);background:var(--wb-surf);box-shadow:var(--wb-shadow-1)}
  .wb-row.-placeholder{border-color:var(--wb-warn-line)}
  .wb-row.-violation{border-color:var(--wb-crit-line)}
  .wb-row.-saved{box-shadow:var(--wb-shadow-1);border-color:var(--wb-good-line)}
  .wb-cell{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--wb-s2);align-items:center;font-size:var(--wb-fs-body)}
  .wb-cell[data-label]::before{content:attr(data-label);font-size:var(--wb-fs-help);color:var(--wb-ink2)}
  .wb-cell.-num,.wb-cell.-money,.wb-cell.-r{text-align:left}
  .wb-cell.-title{display:block}
  .wb-cell.-title .wb-cell__sub{white-space:normal}
  .wb-cell.-action{display:block}
  .wb-cell.-action .wb-btn{width:100%}
  .wb-cell.-hide-m{display:none}
  .wb-cell.-flags{display:flex;gap:var(--wb-s4)}
  .wb-cell.-flags::before{display:none}
  .wb-cell .wb-input:not(.-tiny){width:100%}
  .wb-table__pager{padding:0}
  .wb-subtable .wb-row{border-radius:var(--wb-r-ctl)}
}
@media (max-width:1100px) and (min-width:721px){
  .wb-table{padding:var(--wb-s4)}
  .wb-cell{grid-template-columns:120px minmax(0,1fr)}
}

/* ── Stepper (wizard) ─────────────────────────────────────────────── */
.wb-stepper{background:var(--wb-surf);border:1px solid var(--wb-line);border-radius:var(--wb-r-card);box-shadow:var(--wb-shadow-1);overflow:hidden}
.wb-stepper__head{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s4);padding:var(--wb-s4) var(--wb-s4) var(--wb-s3)}
.wb-stepper__brand{display:flex;gap:var(--wb-s3);align-items:center;min-width:0}
.wb-stepper__mascot{width:var(--wb-mascot);height:var(--wb-mascot);object-fit:contain;flex:none}
.wb-stepper__title{font:600 18px/1.2 var(--wb-font);display:flex;align-items:center;gap:var(--wb-s2);flex-wrap:wrap}
.wb-stepper__sub{font-size:var(--wb-fs-body);color:var(--wb-ink2);margin-top:2px}
.wb-stepper__next{display:flex;gap:var(--wb-s2);align-items:center;flex:none}
.wb-stepper__next-label{font-size:var(--wb-fs-help);color:var(--wb-ink3)}
.wb-rail{display:flex;gap:var(--wb-s1);padding:0 var(--wb-s4) 14px}
.wb-rail.-bare{padding:0}
.wb-rail__seg{flex:1;height:6px;border-radius:3px;background:var(--wb-surf3)}
.wb-rail__seg.-done{background:var(--wb-good)}.wb-rail__seg.-current{background:var(--wb-brand)}
.wb-rail.-mini{gap:3px;width:70px;padding:0}.wb-rail.-mini .wb-rail__seg{height:4px}
.wb-step{display:flex;gap:var(--wb-s3);padding:var(--wb-s3) var(--wb-s4) var(--wb-s3) 20px;border-top:1px solid var(--wb-line);align-items:flex-start;position:relative}
.wb-step.-current::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 2px 2px 0;background:var(--wb-brand)}
.wb-step__mark{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;text-align:center;font:600 12px/22px var(--wb-font);border:1.5px solid var(--wb-line-strong);color:var(--wb-ink3);line-height:19px}
.wb-step.-done .wb-step__mark{background:var(--wb-good);border-color:var(--wb-good);color:#fff;line-height:22px;font-weight:700}
.wb-step.-current .wb-step__mark{background:var(--wb-brand);border-color:var(--wb-brand);color:#fff;line-height:22px;box-shadow:0 0 0 3px var(--wb-brand-soft)}
.wb-step.-skipped .wb-step__mark{border-style:dashed}
.wb-step__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--wb-s3)}
.wb-step__row{display:flex;justify-content:space-between;gap:var(--wb-s4);align-items:center}
.wb-step__label{font:600 14px/1.3 var(--wb-font)}
.wb-step__status{font-size:var(--wb-fs-body);color:var(--wb-ink2)}
.wb-step.-done .wb-step__status{color:var(--wb-good)}
.wb-step.-skipped .wb-step__status{color:var(--wb-ink3)}
.wb-step__actions{display:flex;gap:var(--wb-s2);flex:none;align-items:center}
.wb-step__actions.-m{display:none} /* mobile duplicate of the action block; shown under 720px */
.wb-step__toggle{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--wb-ink3);background:none;border:0;border-radius:var(--wb-r-ctl);cursor:pointer}
.wb-step__toggle svg{width:14px;height:14px;transition:transform var(--wb-dur-base) var(--wb-ease)}
.wb-step[aria-expanded="true"] .wb-step__toggle svg,.wb-step.-current .wb-step__toggle svg{transform:rotate(180deg)}
.wb-step__panel{border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);background:var(--wb-surf2);padding:14px;display:flex;flex-direction:column;gap:var(--wb-s3)}
.wb-step__panel.-row{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--wb-s4);padding:var(--wb-s3) 14px}
.wb-step__panel[hidden]{display:none}
.wb-stepper__foot{border-top:1px solid var(--wb-line);padding:var(--wb-s3) var(--wb-s4);display:flex;justify-content:space-between;gap:var(--wb-s4);align-items:center;flex-wrap:wrap;background:var(--wb-surf2)}
.wb-setup-line{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s3);min-height:32px;padding:0 var(--wb-s1);color:var(--wb-ink2)}
.wb-setup-line__l{display:flex;gap:10px;align-items:center}
@media (max-width:720px){
  .wb-stepper__head{flex-direction:column;align-items:stretch;padding:14px 14px 10px}
  .wb-stepper__next{display:none} /* the current step's own button is the next action on mobile */
  .wb-stepper__title{font-size:16px}
  .wb-step{padding:var(--wb-s3) 14px var(--wb-s3) 16px}
  .wb-step__row{align-items:flex-start}
  .wb-step__actions{display:none}
  .wb-step__actions.-m{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .wb-step__toggle{width:44px;height:44px;margin:-10px -12px 0 0}
  .wb-step__panel{padding:var(--wb-s3)}
  .wb-step__panel.-row{flex-direction:column;align-items:stretch}
  .wb-stepper__foot{flex-direction:column;align-items:stretch}
  .wb-setup-line{flex-direction:column;align-items:flex-start;gap:var(--wb-s1)}
}

/* ── Hero / reveal ────────────────────────────────────────────────── */
.wb-hero{background:var(--wb-surf);border:1px solid var(--wb-good-line);border-radius:var(--wb-r-card);box-shadow:var(--wb-shadow-2);overflow:hidden}
.wb-hero__bar{height:6px;background:var(--wb-good)}
.wb-hero__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:var(--wb-s6);padding:var(--wb-s5) var(--wb-s5) var(--wb-s4)}
.wb-hero__lead{display:flex;gap:14px;align-items:flex-start}
.wb-hero__mascot{width:56px;height:56px;object-fit:contain;flex:none}
.wb-hero__kicker{font:600 11px var(--wb-font);letter-spacing:.06em;color:var(--wb-good);text-transform:uppercase}
.wb-hero__title{font:600 22px/1.2 var(--wb-font);margin:4px 0 0}
.wb-hero__text{font-size:var(--wb-fs-body);color:var(--wb-ink2);margin-top:6px}
.wb-hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wb-hero__item{background:var(--wb-surf2);border:1px solid var(--wb-line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.wb-hero__item.-gold{border-left:3px solid var(--wb-gold)}
.wb-hero__item .wb-stat__value{font-size:24px;color:var(--wb-gold)}
.wb-dot{width:8px;height:8px;border-radius:50%;background:var(--wb-good);display:inline-block;flex:none}
.wb-dot.-inh{background:var(--wb-inh)}
.wb-hero__item b{display:flex;gap:6px;align-items:center;font-size:var(--wb-fs-body)}
.wb-hero__foot{border-top:1px solid var(--wb-line);padding:var(--wb-s3) var(--wb-s5);display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s3);flex-wrap:wrap;background:var(--wb-surf2)}
@media (max-width:720px){.wb-hero__body{grid-template-columns:1fr;padding:var(--wb-s4) 14px;gap:var(--wb-s3)}.wb-hero__grid{grid-template-columns:1fr}.wb-hero__mascot{width:44px;height:44px}.wb-hero__title{font-size:18px}.wb-hero__foot{flex-direction:column;align-items:stretch}.wb-hero__foot .wb-actions{flex-direction:column;align-items:stretch}}

/* ── Feedback ─────────────────────────────────────────────────────── */
.wb-toast{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--wb-r-ctl);background:var(--wb-toast-bg);color:var(--wb-toast-fg);font:500 var(--wb-fs-body)/1.4 var(--wb-font);box-shadow:var(--wb-shadow-3);max-width:480px}
.wb-toast__icon{font-weight:700;color:var(--wb-good)}
.wb-toast.-err .wb-toast__icon{color:var(--wb-crit)}
.wb-toast-region{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}
.wb-toast-region .wb-toast{pointer-events:auto}
.wb-verify{display:inline-flex;gap:var(--wb-s2);align-items:center;font-size:var(--wb-fs-body);color:var(--wb-ink2)}
.wb-verify.-ok{color:var(--wb-good)}.wb-verify.-err{color:var(--wb-crit)}
.wb-empty{background:var(--wb-surf);border:1px dashed var(--wb-line-strong);border-radius:var(--wb-r-card);padding:var(--wb-s5) var(--wb-s4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--wb-s2)}
.wb-empty__mascot{width:40px;height:40px;object-fit:contain}
.wb-empty__title{font-weight:600}
.wb-empty__text{font-size:var(--wb-fs-help);line-height:var(--wb-lh-help);color:var(--wb-ink2);max-width:40ch}
.wb-skeleton{border-radius:var(--wb-r-ctl);background:linear-gradient(90deg,var(--wb-surf3) 25%,var(--wb-surf2) 50%,var(--wb-surf3) 75%);background-size:200% 100%;animation:wb-shimmer 1.4s linear infinite;height:var(--wb-ctl-h)}
.wb-skeleton.-text{height:12px;border-radius:4px}
.wb-skeleton.-title{height:14px;width:55%;border-radius:4px}
@keyframes wb-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.wb-skeleton{animation:none}}
.wb-usage{height:6px;border-radius:3px;background:var(--wb-surf3);overflow:hidden}
.wb-usage__fill{height:100%;background:var(--wb-brand)}

/* ── Provider list, jump nav, settings index ──────────────────────── */
.wb-list-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--wb-s3);padding:var(--wb-s3) var(--wb-s4);border-top:1px solid var(--wb-line);align-items:center}
.wb-list-row.-planned{opacity:.7}
.wb-list-row__name{font-weight:600;display:flex;gap:var(--wb-s2);align-items:center;flex-wrap:wrap}
.wb-list-row__desc{font-size:var(--wb-fs-help);line-height:1.4;color:var(--wb-ink2)}
@media (max-width:720px){.wb-list-row{grid-template-columns:1fr auto}.wb-list-row .wb-btn{grid-column:1/-1;width:100%}}
.wb-jumpnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--wb-s4)}
.wb-jumpnav a{padding:6px 10px;border-radius:var(--wb-r-sm);font-weight:500;color:var(--wb-ink2);text-decoration:none}
.wb-jumpnav a:hover{background:var(--wb-surf);color:var(--wb-ink);text-decoration:none}
.wb-jumpnav a[aria-current="true"]{background:var(--wb-surf);color:var(--wb-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--wb-brand)}
.wb-jumpnav__note{margin-top:var(--wb-s2);border-top:1px solid var(--wb-line);padding:10px;font-size:var(--wb-fs-help);color:var(--wb-ink3)}
.wb-settings{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--wb-s6);align-items:start}
.wb-settings__main{display:flex;flex-direction:column;gap:var(--wb-s4)}
.wb-index{display:none}
.wb-index__item{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-top:1px solid var(--wb-line);color:inherit;text-decoration:none}
.wb-index__item:hover{background:var(--wb-surf2);text-decoration:none;color:inherit}
.wb-index__item:first-child{border-top:0}
.wb-index__name{font-weight:600;font-size:14px}
.wb-index__sub{font-size:var(--wb-fs-help);color:var(--wb-ink2)}
.wb-index__r{display:flex;gap:var(--wb-s2);align-items:center;flex:none;color:var(--wb-ink3)}
.wb-back{display:flex;align-items:center;gap:var(--wb-s2)}
.wb-back__btn{width:44px;height:44px;margin-left:-12px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;color:var(--wb-ink2);background:none;border:0;cursor:pointer}
.wb-back__crumb{font-size:var(--wb-fs-help);color:var(--wb-ink3)}
@media (max-width:1040px){.wb-settings{grid-template-columns:1fr}.wb-jumpnav{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--wb-s1)}.wb-jumpnav__note{display:none}}
@media (max-width:720px){
  /* Settings on mobile: the jump nav becomes a card index; sections are shown one at a time via :target (or server-side ?section=). */
  .wb-jumpnav{display:none}
  .wb-index{display:block}
  .wb-settings__main>section{display:none}
  .wb-settings__main>section:target,.wb-settings__main>section.is-open{display:flex;flex-direction:column;gap:var(--wb-s3)}
  .wb-settings__main:has(section:target)~.wb-index,.wb-settings.has-open .wb-index{display:none}
}
.wb-rule-legend{display:flex;gap:var(--wb-s4);align-items:center;flex-wrap:wrap;font-size:var(--wb-fs-help);line-height:var(--wb-lh-help);color:var(--wb-ink3)}
.wb-rule-legend b{color:var(--wb-ink)}
.wb-subtable{border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);overflow:hidden}
.wb-subtable .wb-table__head{background:var(--wb-surf2);padding:8px 12px;border-bottom:0}
.wb-subtable .wb-row{padding:8px 12px;border-top:1px solid var(--wb-line);border-bottom:0}
.wb-plan{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);gap:var(--wb-s2)}
.wb-plan.-current{border-color:var(--wb-brand);background:var(--wb-brand-soft)}
.wb-plan__r{display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.wb-nav-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--wb-line);border-radius:var(--wb-r-ctl);background:var(--wb-surf2);color:inherit;text-decoration:none}
.wb-nav-row:hover{text-decoration:none;color:inherit;background:var(--wb-surf3)}
.wb-tiers{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--wb-s2);font-size:var(--wb-fs-help);color:var(--wb-ink2);align-items:center}
.wb-icon-btn{width:32px;height:32px;border-radius:var(--wb-r-ctl);background:transparent;color:var(--wb-ink3);border:1px solid transparent;cursor:pointer;font-size:14px}
.wb-icon-btn:hover{background:var(--wb-surf3);color:var(--wb-ink)}

/* ── Demo-only: state dividers in the handoff HTML (delete in app) ─ */
.wb-demo-divider{margin:40px 0 12px;padding:6px 10px;border-left:3px solid var(--wb-brand);font:600 12px/1.4 var(--wb-font);letter-spacing:.06em;text-transform:uppercase;color:var(--wb-ink2);background:var(--wb-surf)}
.wb-demo-divider small{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--wb-ink3)}
.wb-demo-divider:first-child{margin-top:0}