/* Frontend UX standard — application-level rules shared by tenant screens.
   Keep this sheet last in index.html. It owns layout decisions that should be consistent
   across screens; screen-specific styles stay with the screen's existing brand sheets. */

body.vt{
  --ux-space-1:4px;
  --ux-space-2:8px;
  --ux-space-3:12px;
  --ux-space-4:16px;
  --ux-space-5:24px;
  --ux-list-top-gutter:26px;
  --ux-card-pad-compact:var(--ux-space-3) 14px;
  --ux-card-pad-form:var(--ux-space-4);
  --ux-empty-pad:var(--ux-space-5) var(--ux-space-3);
}

/* Screen headings are navigation anchors, not hero copy. Keep them compact so the first useful
   control remains visible on a phone. */
body.vt .page-head h1,
body.vt h1.page-title{font-size:20px;line-height:1.2;font-weight:750;letter-spacing:-.015em;margin-top:0}
body.vt .eyebrow{display:none}
body.vt .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* One shared previous-place control. It uses the recorded route stack, so a report drill-down
   returns to the exact report/filter the user left rather than a hardcoded dashboard. */
body.vt .nav-pill{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:4px 9px;
  margin:0 0 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  color:var(--ink);font-size:12px;font-weight:650;line-height:1.2;cursor:pointer}
body.vt .nav-pill:hover{border-color:var(--brand);background:var(--brand-faint);color:var(--ink)}
body.vt .nav-pill:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* A card owns its internal spacing through .card-body. Removing an outer card inset avoids
   the current 6–8px card inset stacking with Tina4's 16px .card-body inset. */
body.vt .card{padding:0}
body.vt .card-body{padding:var(--ux-card-pad-compact)}
/* Contacts has an older, more specific page rule that adds a second 6–8px inset.
   Keep the same single-inset card contract as Service Items. */
body.vt .ct-page .card{padding:0}

/* `.alert` is the legacy error banner, but several forms correctly add `.alert-ok` after a
   successful save. The generic tenant alert rule was more specific and painted those successes
   red. Keep failures red and make every explicit success banner use the green semantic tone. */
body.vt .alert.alert-ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:var(--ok);color:var(--ok)}

/* Forms and rule editors need a little more breathing room around grouped controls, but still
   use one predictable inset rather than a nested card + body combination. */
body.vt .card-body.ct-edit,
body.vt .card-body.rule-form,
body.vt .card-body.set-form{padding:var(--ux-card-pad-form)}
/* sleek-date owns its inner input and calendar button. Styling the custom-element host as a second
   .form-control creates the double border seen in Batch Invoicing and shifts the icon. */
body.vt sleek-date.form-control{display:block;height:auto;min-height:0;padding:0;border:0;background:transparent;box-shadow:none}
body.vt .doc-page .page-head.with-action{margin-bottom:var(--ux-space-3)}
/* Service Items is the reference list surface. Other list screens opt into this contract rather
   than recreating top padding or action spacing in their templates. */
body.vt .ux-list-page{padding-top:var(--ux-list-top-gutter)}
/* Service Items and Batch Invoices share one list rhythm: action, count, optional form, list. */
body.vt .bt-list-page .page-head.with-action{padding-top:0;padding-bottom:0;margin:0 0 var(--ux-space-2)}
body.vt .bt-list-page .bt-list-tools{justify-content:flex-start}
body.vt .bt-list-page .bt-list-tools .row-actions{order:2}
body.vt .bt-new-card{margin-top:0;margin-bottom:var(--ux-space-3)}
body.vt .bt-new-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--ux-space-3)}
body.vt .bt-new-head h3{margin:0;font-size:16px}
body.vt .bt-new-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ux-space-3)}
body.vt .bt-count{margin:0 0 var(--ux-space-4);align-self:flex-start}
body.vt .list-count{font-size:16px;line-height:1.2;color:var(--muted)}
body.vt .bt-card .bt-delete{margin-left:auto;display:inline-flex;align-items:center}
body.vt .inv-row .inv-row-delete{align-self:center;margin-left:auto}
body.vt .inv-toolbar{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ux-space-2)}
body.vt .inv-toolbar>.inv-count{margin:0;align-self:flex-start}
/* The single shared list action row: search and primary Add action.  It is the only list
   element that sticks, which keeps Batch Templates, Service Items and Contacts compact. */
body.vt .ux-list-actions{
  display:flex;align-items:center;gap:var(--ux-space-2);width:100%;
  /* Match the landing-page gutter after the row becomes sticky; otherwise it visibly jumps
     upward against the app bar as soon as the list starts moving. */
  position:sticky;top:calc(var(--bar-h) + var(--ux-list-top-gutter));z-index:20;
  background:var(--bg);padding:0;margin:0;
}
body.vt .ux-search{
  display:block;flex:0 0 auto;max-width:320px;width:100%;height:34px !important;min-height:34px;
  box-sizing:border-box;padding:4px 10px 4px 34px !important;font-size:13px;line-height:24px;
}
body.vt .ux-list-actions .ux-search{
  flex:0 0 auto;width:100%;max-width:none;
  margin:0;padding:4px 10px 4px 34px !important;height:34px !important;min-height:34px;
  line-height:24px;box-sizing:border-box;
}
/* Contacts keeps its segment and tag filters in normal flow below the shared action row. */
body.vt .ct-page .ct-count{margin:var(--ux-space-2) 0}
body.vt .ct-page .doc-tabhead{display:flex;flex-direction:column;align-items:stretch;gap:var(--ux-space-2);margin-top:0}
body.vt .ct-page .doc-tabhead>.segs{margin:0;min-width:0}
/* Contacts previously zeroed its page gutter. Use the exact shared list gutter so its toolbar
   and table align with Batch Invoices and Service Items on wide screens. */
body.vt .page.ct-page{padding:26px 22px 80px}
body.vt .page.ct-page.ux-list-page{padding-top:26px}
/* Wide layouts keep the search and primary action together; filters and counts retain a second row. */
@media (min-width:768px){
  body.vt .ux-list-actions .ux-search{flex:1 1 auto;width:auto}
  body.vt .ux-list-actions>.btn.primary,
  body.vt .ux-list-actions .row-actions{flex:0 0 auto}
  body.vt .ux-list-actions .row-actions .btn{width:auto}
}
body.vt .inv-price-chip{margin-right:4px}
body.vt .inv-price-unit{opacity:.65}
body.vt .inv-empty{padding:24px;text-align:center}
body.vt .inv-row-code{font-weight:400}
body.vt .inv-form-title{margin:0}
body.vt .inv-form-intro{font-size:12px;margin-top:2px}
body.vt .inv-form-hint{font-size:12px}
body.vt .inv-prices-hint{font-size:12px;font-weight:400}
body.vt .inv-price-header-rate{text-align:right}
body.vt .inv-no-currencies{padding:16px;text-align:center;border:1px dashed var(--line);border-radius:8px}
body.vt .inv-price-tag.inherit{margin-left:6px}
body.vt .detail-placeholder{padding:32px;text-align:center}
body.vt .detail-placeholder-title{margin:0 0 8px}
body.vt .detail-placeholder-copy{margin:0;opacity:.75}
body.vt .cb-card-file{display:none}
body.vt .cb-vat-inline.is-hidden{display:none}

@media (min-width:768px){
  /* Keep the right side of every service-item card on the same columns: prices share a stable
     right-aligned slot and the destructive action owns the final 28px. */
  body.vt .inv-row-prices{flex:0 0 260px;max-width:260px;justify-content:flex-end}
  body.vt .inv-row-delete{flex:0 0 28px}
}

/* KPI cards already have a compact information hierarchy; preserve their established metric. */
body.vt .kpi .card-body{padding:14px 16px}

/* Dashboard: use the same compact, fluid panel grid as the other list surfaces. The legacy fixed
   five-column grid overflowed as soon as the sidebar reduced the available content width. */
body.vt .dash-page{padding-top:var(--ux-space-4)}
/* Every dashboard section uses the same 14px horizontal inset.  The prior dashboard cards
   inherited zero padding from the shared card reset, leaving each section's header and contents
   to establish their own (often mismatched) gutters. */
body.vt .dash-page .dash-coll>.coll-toggle{margin:0;padding:var(--ux-space-3) 14px;line-height:1.25}
body.vt .dash-page .dash-coll>.coll-body{padding:0 14px 14px}
body.vt .dash-page .dash-coll>.coll-body>.kpis{margin:0}
body.vt .dash-page .dash-coll>.coll-body>.btn{margin-top:var(--ux-space-3)}
body.vt .dash-page .kpis{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:var(--ux-space-3)}
/* Keep long currency figures inside their KPI tile. The auto-fit track is minmax(155px,1fr); a
   grid item's default min-width:auto let an unbreakable figure (e.g. R 16,960,399.55) push the
   track wider and bleed past the tile edge. Let the tile shrink, fluidly scale the value so big
   numbers fit on one line, and allow a wrap as a last resort — never clip a money figure. */
body.vt .dash-page .kpis>.kpi{min-width:0}
body.vt .dash-page .kpi-value{font-size:clamp(14px,1.15vw + 6px,20px);overflow-wrap:anywhere;hyphens:none}
body.vt .dash-page .dash-coll{margin-bottom:var(--ux-space-3)}
/* Financial-year turnover comparison: each fiscal month carries the prior-year and current-year
   turnover bars side by side. The bars are data-driven; layout, sizing and colours stay shared CSS. */
body.vt .dash-fy-chart{margin:0 0 var(--ux-space-3);overflow-x:auto}
body.vt .dash-fy-legend{display:flex;justify-content:flex-end;gap:var(--ux-space-3);margin:0 0 var(--ux-space-2);
  color:var(--muted);font-size:11px;font-weight:700}
body.vt .dash-fy-key{display:inline-flex;align-items:center;gap:5px}
body.vt .dash-fy-key::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--muted)}
body.vt .dash-fy-key.current::before{background:var(--brand)}
body.vt .dash-fy-cols{display:grid;grid-template-columns:repeat(12,minmax(34px,1fr));gap:var(--ux-space-2);min-width:440px}
body.vt .dash-fy-col{display:grid;grid-template-rows:132px auto;gap:var(--ux-space-1);min-width:0}
body.vt .dash-fy-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--line)}
body.vt .dash-fy-bar{display:block;width:min(16px,40%);min-height:0;border-radius:3px 3px 0 0;background:var(--muted)}
body.vt .dash-fy-bar.current{background:var(--brand)}
body.vt .dash-fy-bar.neg{background:var(--bad)}
body.vt .dash-fy-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--muted);font-size:10px}
/* Shared bank-register hover: cashbook and dashboard allocation rows use the same response without
   turning a whole row into a deceptive click target. */
body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit){transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit):hover{background:var(--surface-2)}

@media (max-width:1100px){
  /* The bank and activity tables become labeled panels before columns need horizontal scrolling. */
  body.vt .dash-page .dash-bank-table,
  body.vt .dash-page .dash-activity-table{overflow:visible}
  body.vt .dash-page .dash-bank-table table,
  body.vt .dash-page .dash-bank-table tbody,
  body.vt .dash-page .dash-activity-table table,
  body.vt .dash-page .dash-activity-table tbody{display:block;width:100%}
  body.vt .dash-page .dash-bank-table thead,
  body.vt .dash-page .dash-activity-table thead{display:none}
  body.vt .dash-page .dash-bank-table tbody,
  body.vt .dash-page .dash-activity-table tbody{display:grid;gap:var(--ux-space-2)}
  body.vt .dash-page .dash-bank-table tr,
  body.vt .dash-page .dash-activity-table tr{display:grid;gap:var(--ux-space-2);padding:var(--ux-space-3) 14px;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
  body.vt .dash-page .dash-bank-table tr{grid-template-columns:1fr auto}
  body.vt .dash-page .dash-activity-table tr{grid-template-columns:1fr auto}
  body.vt .dash-page .dash-bank-table td,
  body.vt .dash-page .dash-activity-table td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ux-space-3);
    padding:0;border:0;text-align:left!important;min-width:0}
  body.vt .dash-page .dash-bank-table td:nth-child(2),
  body.vt .dash-page .dash-activity-table td:nth-child(2){grid-column:1/-1}
  body.vt .dash-page .dash-bank-table td::before,
  body.vt .dash-page .dash-activity-table td::before{content:attr(data-label);flex:0 0 auto;color:var(--faint);font-size:10px;
    font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  body.vt .dash-page .dash-bank-table td:empty{display:none}
  body.vt .dash-page .dash-activity-table td:nth-child(2){align-items:flex-start;overflow-wrap:anywhere}
  /* These are cards at this breakpoint. The desktop list hover colours individual cells,
     which creates horizontal bars instead of one clear hover state. */
  body.vt .dash-page .dash-bank-table tr.clickable,
  body.vt .dash-page .dash-activity-table tr.clickable{transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
  body.vt .dash-page .dash-bank-table tr.clickable:hover,
  body.vt .dash-page .dash-activity-table tr.clickable:hover{background:var(--surface-2);border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-faint)}
  body.vt .dash-page .dash-bank-table tr.clickable:hover td,
  body.vt .dash-page .dash-activity-table tr.clickable:hover td{background:transparent}
}

/* Empty states should explain the next action without taking a full viewport band. */
body.vt .empty{padding:var(--ux-empty-pad)}

/* Service item rows are interactive surfaces. The old fallback was a light-theme colour, which
   made a dark-theme hover flash white and reduced contrast. Use the tenant theme ladder instead. */
body.vt .inv-row:hover,
body.vt .inv-row:focus-visible{
  background:var(--surface-2);
  border-color:var(--brand);
  color:var(--ink);
}
body.vt .inv-row:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
body.vt .inv-row:hover .inv-row-name,
body.vt .inv-row:focus-visible .inv-row-name{color:var(--ink)}

/* Service item editor: the old `--muted-bg` fallback painted the pricing panel white in the
   dark tenant theme. Keep the editor on the same surface ladder as the rest of the application. */
body.vt .inv-form{
  background:var(--surface);
  border-color:var(--line);
  padding:var(--ux-card-pad-form);
}
body.vt .inv-form-close{display:none}
body.vt .inv-prices{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--ink);
  padding:12px;
}
body.vt .inv-price-row{border-bottom-color:var(--line-soft)}
body.vt .inv-price-tag.inherit{background:rgba(75,214,160,.16);color:var(--ok)}
body.vt .inv-price-row .ss{min-width:0;width:100%}
body.vt .inv-price-row .inv-tax-search{height:32px;box-sizing:border-box}
body.vt .inv-code-input{width:100%;max-width:none}

/* Form actions always read left-to-right as Cancel, then the primary commitment. This keeps
   forms consistent even when a screen's template order is accidentally reversed. */
body.vt .form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
body.vt .form-actions>.btn.btn-primary,
body.vt .form-actions>.btn.primary{order:2}
body.vt .form-actions>.btn:not(.btn-primary):not(.primary){order:1}

/* Windows convention: primary commitment first, Cancel second. macOS and unknown platforms use
   the default above (Cancel first, primary second). Screen markup stays platform-neutral. */
html.platform-windows body.vt .form-actions>.btn.btn-primary,
html.platform-windows body.vt .form-actions>.btn.primary{order:1}
html.platform-windows body.vt .form-actions>.btn:not(.btn-primary):not(.primary){order:2}

@media (max-width:767px){
  body.vt .form-actions{align-items:stretch}
  body.vt .form-actions>.btn{flex:1 1 140px}
}

/* Desktop pricing grids become explicit cards on a phone. Each row gets its own boundary so
   currency, rate, unit and VAT remain grouped while the controls can use the full width. */
@media (max-width:720px){
  body.vt .inv-price-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--surface);
  }
  body.vt .inv-price-row + .inv-price-row{margin-top:8px}
  body.vt .inv-price-row .inv-price-ccy{margin-bottom:2px}
}

/* Primary create actions are full-width on mobile so the next step is obvious and easy to tap.
   Supporting counts stay secondary and align to the edge below the action. */
@media (max-width:767px){
  body.vt .app-bar .app-title{display:block;font-size:11px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.vt .bt-list-page .page-head.with-action{padding-top:0;margin-top:0}
  body.vt .bt-list-page>.page-head h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  body.vt .bt-new-grid{grid-template-columns:1fr}
  body.vt .inv-form-close{display:inline-flex;align-items:center;justify-content:center}
  body.vt .inv-row{position:relative;padding-right:48px}
  body.vt .inv-row .inv-row-delete{position:absolute;top:8px;right:8px;margin:0;align-self:auto}
  body.vt .bt-card{position:relative;padding-right:48px}
  body.vt .bt-card .bt-delete{position:absolute;top:8px;right:8px;margin:0}
  body.vt .ct-addr-card{position:relative;padding-right:48px}
  body.vt .ct-addr-card .ct-addr-delete{position:absolute;top:8px;right:8px;margin:0}
  body.vt .doc-page .page-head.with-action .row-actions{width:100%}
  body.vt .doc-page .page-head.with-action .row-actions>.btn{width:100%;justify-content:center}
  body.vt .inv-toolbar{align-items:stretch;gap:8px}
  body.vt .ux-list-actions{flex-direction:column;align-items:stretch;gap:8px}
  body.vt .ux-list-actions>.btn.primary,
  body.vt .ux-list-actions .row-actions,
  body.vt .ux-list-actions .row-actions>.btn{width:100%;justify-content:center}
  body.vt .ux-search{flex:0 0 auto;max-width:320px;width:100%;height:34px !important;min-height:34px}
  body.vt .inv-toolbar>.inv-count{margin-left:0;align-self:flex-start}
}

/* Keep mobile content off the viewport edge while allowing dense cards to stay compact. */
@media (max-width:767px){
  body.vt .page{padding-left:12px;padding-right:12px}
  body.vt .ct-page{padding-left:12px !important;padding-right:12px !important}
}

/* Small-screen contact cards are self-contained surfaces; the card body rule must not add a
   second inset to the table-row cards. */
@media (max-width:767px){
  body.vt .ct-list tr{padding:var(--ux-space-3) 14px}
}

/* The bank register is an endless chronological list. At narrower app widths, keeping nine
   table columns forces every transaction into an unreadable horizontal grid. Render each row as
   a self-contained panel instead, while retaining the same table markup and controls. */
@media (max-width:1100px){
  body.vt .cb-register-wrap{overflow:visible}
  body.vt .cb-register-table,
  body.vt .cb-register-table tbody{display:block;width:100%;border:0;background:transparent}
  body.vt .cb-register-table thead{display:none}
  body.vt .cb-register-table tbody{display:grid;gap:var(--ux-space-2)}
  body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit){
    position:relative;display:grid;grid-template-columns:auto max-content minmax(0,1fr) auto;
    grid-template-areas:
      "select date ref actions"
      "description description description description"
      "received paid balance balance"
      "source source source source";
    gap:var(--ux-space-2);padding:var(--ux-space-3) 14px;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  }
  /* Posted register lines keep an empty selection cell in the shared table markup.
     Remove that grid column on cards so the date aligns with the panel content. */
  body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit):has(.cb-th-sel:empty),
  body.vt .cb-register-table.bank-inbox-table tbody tr.cb-line:not(.cb-row-edit){
    grid-template-columns:max-content minmax(0,1fr) auto;
    grid-template-areas:
      "date ref actions"
      "description description description"
      "received paid balance"
      "source source source";
  }
  body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit):hover{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-faint)}
  body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit) td{
    display:block;padding:0;border:0;min-width:0;text-align:left;white-space:normal;
  }
  /* aboo.css colours every table cell on hover. These rows are cards, so preserve one
     consistent card surface and use the border as the hover cue. */
  body.vt .cb-register-table tbody tr.cb-line:not(.cb-row-edit):hover td{background:transparent}
  /* The unallocated marker used to sit on the first table cell. Put it on the card edge
     now that the first visible cell is the date. */
  body.vt .cb-register-table tbody tr.cb-row-unalloc{border-left:3px solid #b45309}
  body.vt .cb-register-table tbody tr.cb-row-unalloc td:first-child{box-shadow:none}
  body.vt .cb-register-table .cb-th-sel{grid-area:select;align-self:center}
  body.vt .cb-register-table .cb-td-date{grid-area:date;align-self:center;font-weight:650}
  body.vt .cb-register-table .cb-td-ref{grid-area:ref;align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.vt .cb-register-table .cb-td-desc{grid-area:description;overflow-wrap:anywhere;line-height:1.35}
  body.vt .cb-register-table .cb-td-act2{grid-area:actions;align-self:center;justify-self:end}
  body.vt .cb-register-table .cb-td-received{grid-area:received}
  body.vt .cb-register-table .cb-td-paid{grid-area:paid}
  body.vt .cb-register-table .cb-td-balance{grid-area:balance;justify-self:end}
  body.vt .cb-register-table .cb-td-source{grid-area:source}
  body.vt .cb-register-table .cb-td-received::before,
  body.vt .cb-register-table .cb-td-paid::before,
  body.vt .cb-register-table .cb-td-balance::before,
  body.vt .cb-register-table .cb-td-source::before{
    content:attr(data-label);display:block;margin-bottom:2px;color:var(--faint);font-size:10px;
    font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  body.vt .cb-register-table .cb-row-opening{grid-template-areas:
    "date date date balance"
    "description description description description"
    "received paid source source"}
  body.vt .cb-register-table .cb-row-opening .cb-th-sel,
  body.vt .cb-register-table .cb-row-opening .cb-td-act2{display:none}
}

/* Inline "create account" from the bank GL allocation dropdown (owner 2026-09-21). */
body.vt .cb-drop-add{color:var(--brand);font-weight:600;cursor:pointer;border-top:1px solid var(--line-soft)}
body.vt .cb-create-acc{padding:4px 0}
body.vt .cb-create-row{display:flex;flex-direction:column;gap:3px;padding:5px 10px}
body.vt .cb-create-row label{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
body.vt .cb-create-actions{display:flex;gap:8px;justify-content:flex-end;padding:8px 10px 4px}

/* Register "Jump to statement" nav on the balance bar (owner 2026-09-21). */
body.vt .cb-jump{max-width:210px;height:var(--control-h);padding:2px 8px;font-size:12.5px}