/* ═══════════════════════════════════════════════════════════════
   Binny Ops — component library.

   Loaded last on every screen, desktop and phone, so these rules are
   the final word. One definition per component: a button is the same
   height, radius, font, colour and hover everywhere it appears, and
   an h2 is the same size on a phone as it is on the office PC.

   Desktop classes (.bo-*) and phone classes (.m-*) are listed side by
   side deliberately — same rule, two names, no drift.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Headings ─────────────────────────────────────────────────
   h1  page title
   h2  card or section title
   h3  overline above a list or group

   Element defaults are wrapped in :where() so they carry no weight.
   Otherwise `.bo h1` (element + class) would outrank a plain class and
   a heading that needed a different level would silently lose.        */

:where(.bo h1) { font: var(--t-h1); color: var(--c-navy); letter-spacing: -.01em; margin: 0 0 var(--s-3); }
:where(.bo h2) { font: var(--t-h2); color: var(--c-navy); margin: 0 0 var(--s-3); }
:where(.bo h3) { font: var(--t-h3); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--track-h3); margin: 0 0 var(--s-2); }

.bo-h1, .m-hero__big, .m-lookup__big, .m-hello__hi {
  font: var(--t-h1);
  color: var(--c-navy);
  letter-spacing: -.01em;
  margin: 0;
}

.bo-h2, .m-sheet__t, .m-step__h {
  font: var(--t-h2);
  color: var(--c-navy);
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--s-3);
}

.bo-h3, .m-sec__h {
  font: var(--t-h3);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-h3);
  margin: 0 0 var(--s-2);
}

/* The phone app bar is furniture, not page content: same family and
   weight, one step down, and white because the bar is navy. */
.m-top__title { font: var(--t-h2); color: #fff; margin: 0; letter-spacing: 0; text-transform: none; }
.m-lookup__big { color: #fff; }
.m-hello__hi { margin: 2px 0 0; }
.m-step__h { display: flex; align-items: center; gap: var(--s-3); }

/* ─── Buttons ──────────────────────────────────────────────────
   One button. Variants change colour only, never shape or size.  */

.bo-btn, .m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--h-ctl);
  padding: 0 18px;
  margin: 0;
  font: var(--t-btn);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-navy);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-dk);
  border-radius: var(--r-2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}

.bo-btn:hover, .m-btn:hover {
  background: var(--c-surface-2);
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.bo-btn:active, .m-btn:active { transform: translateY(1px); }
.bo-btn:focus-visible, .m-btn:focus-visible { outline: var(--ring); outline-offset: 2px; }
.bo-btn[disabled], .m-btn[disabled], .bo-btn.is-busy, .m-btn.is-busy {
  opacity: .55;
  pointer-events: none;
}

.bo-btn .m-i, .m-btn .m-i { width: 20px; height: 20px; flex: none; }

/* Primary: the bin orange. Navy text on orange reads at 5.4:1;
   white would be 2.6:1, which is why it is not used. */
.bo-btn--primary, .m-btn--primary {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: var(--c-navy);
}
.bo-btn--primary:hover, .m-btn--primary:hover {
  /* Darkening orange far enough to "look pressed" drops navy text below
     AA, so the hover state leans on shadow and a small shift instead. */
  background: var(--c-orange-dark);
  border-color: var(--c-orange-dark);
  color: var(--c-navy);
  box-shadow: var(--sh-2);
}

.bo-btn--dark, .m-btn--dark {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}
.bo-btn--dark:hover, .m-btn--dark:hover {
  background: var(--c-navy-deep);
  border-color: var(--c-navy-deep);
  color: #fff;
}

.bo-btn--ghost, .m-btn--ghost {
  background: transparent;
  border-color: var(--c-line-dk);
  color: var(--c-navy);
}
.bo-btn--ghost:hover, .m-btn--ghost:hover { background: var(--c-surface-2); border-color: var(--c-navy); }

.bo-btn--danger, .m-btn--danger {
  background: var(--c-surface);
  border-color: var(--c-danger-line);
  color: var(--c-danger);
}
.bo-btn--danger:hover, .m-btn--danger:hover {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}

.bo-btn--small, .m-btn--small { min-height: var(--h-ctl-sm); padding: 0 13px; font-size: 14px; }
.bo-btn--big, .m-btn--big { min-height: var(--h-ctl-lg); font-size: 17px; border-radius: var(--r-3); }
.bo-btn--block, .m-btn--block { width: 100%; }

/* Phone buttons fill the width by default; desktop buttons hug. */
.m-btn { width: 100%; }
.m-btn--auto { width: auto; }
/* Layout (side-by-side pairs, inline selects, the floating button) is
   mobile.css's job — it sets its own widths after this file's default. */

.bo-btn--icon, .m-round {
  min-height: var(--h-ctl);
  width: var(--h-ctl);
  padding: 0;
  border-radius: var(--r-round);
}
.bo-btn--icon:hover { color: var(--c-danger); border-color: var(--c-danger); background: var(--c-danger-bg); }

/* ─── Links ────────────────────────────────────────────────────  */

.bo-link, .m-link {
  background: none;
  border: 0;
  padding: 0;
  font: var(--t-small);
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bo-link:hover, .m-link:hover { color: var(--c-orange-text); }
.bo-sku, .m-sku {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--c-navy);
  text-decoration: none;
}
.bo-sku:hover, .m-sku:hover { color: var(--c-orange-text); }

/* ─── Form controls ────────────────────────────────────────────  */

.bo-label, .m-label {
  display: block;
  font: var(--t-small);
  font-weight: 700;
  color: var(--c-ink);
  margin: var(--s-4) 0 6px;
}

.bo-input, .m-input {
  display: block;
  width: 100%;
  min-height: var(--h-ctl);
  padding: 10px 14px;
  /* 16px minimum: anything smaller makes iOS zoom in on focus. */
  font: 500 16px/1.35 var(--font);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line-dk);
  border-radius: var(--r-2);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.bo-input:hover, .m-input:hover { border-color: var(--c-navy); }
.bo-input:focus, .m-input:focus {
  outline: none;
  border-color: var(--c-orange);
  box-shadow: 0 0 0 3px rgba(230,126,34,.2);
}
textarea.bo-input, textarea.m-input { min-height: 86px; line-height: 1.5; resize: vertical; }

select.bo-input, select.m-input {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359636F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

/* Two fields on one line where they belong together — first and last
   name, suburb and postcode. Stacks on narrow screens. */
.bo-row2, .m-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  align-items: start;
}
.bo-row2 > *, .m-row2 > * { min-width: 0; }
.bo-row2 .bo-label, .m-row2 .m-label { margin-top: var(--s-4); }
@media (max-width: 520px) {
  .bo-row2, .m-row2 { grid-template-columns: 1fr; gap: 0; }
}

/* A record's own number — J0004, C0012, INV B14. Monospace so the
   digits line up down a column. */
.bo-ref, .m-ref {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--c-muted);
  white-space: nowrap;
}
.bo-help--ref { margin-top: 0; }


/* ─── Status pills and tags ────────────────────────────────────
   Bin state colours are shared: in yard is green everywhere, on
   site amber, out of service red, retired grey.                  */

.bo-pill, .m-pill, .m-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px 9px;
  border-radius: var(--r-1);
  font: var(--t-tiny);
  white-space: nowrap;
  background: #E7EBF0;
  color: #414B57;
}
.m-tag .m-i { width: 14px; height: 14px; }

.bo-pill--yard, .m-pill--yard, .m-tag--ready { background: var(--c-ok-bg); color: var(--c-ok); }
.bo-pill--on_site, .m-pill--on_site, .m-tag--site { background: var(--c-warn-bg); color: var(--c-warn); }
.bo-pill--in_transit, .m-pill--in_transit, .m-tag--date { background: var(--c-info-bg); color: var(--c-info); }
.bo-pill--out_of_service, .m-pill--out_of_service, .m-tag--warn { background: var(--c-danger-bg); color: var(--c-danger); }
.bo-pill--retired, .m-pill--retired, .m-tag--done { background: #E7EBF0; color: #414B57; }
.m-tag--size { background: var(--c-info-bg); color: var(--c-info); font-size: 13.5px; }

/* ─── Chips (filters and choices) ──────────────────────────────  */

.bo-chip,
.m-chip:not(.m-chip--link) > span,
.m-chip--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--h-ctl);
  padding: 0 15px;
  border: 1.5px solid var(--c-line-dk);
  border-radius: var(--r-round);
  background: var(--c-surface);
  font: var(--t-btn);
  font-size: 15px;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.bo-chip:hover, .m-chip--link:hover, .m-chip:hover > span { border-color: var(--c-navy); }
.bo-chip.is-on,
.m-chip--link.is-on,
.m-chip input:checked + span {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}
.bo-chip.is-on .m-dim, .m-chip--link.is-on .m-dim { color: #C2D2E2; }
.m-chip input:focus-visible + span, .m-chip--link:focus-visible { outline: var(--ring); outline-offset: 2px; }
.m-chip--sm { min-height: var(--h-ctl-sm); padding: 0 13px; font-size: 14px; }

/* ─── Surfaces ─────────────────────────────────────────────────  */

.bo-card, .m-card, .m-list, .m-hero, .m-step, .m-line, .m-track {
  background: var(--c-surface);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}
.bo-card { border: 1px solid var(--c-line); box-shadow: none; }
.bo-card--danger { border-color: var(--c-danger-line); }
.bo-card--danger .bo-h2 { color: var(--c-danger); }
/* A voided invoice: still on file, clearly not live. Grey rather than
   red, because nothing is wrong — a mistake was put right. */
.bo-card--void { border-left: 4px solid #8A94A0; background: #F4F6F8; }
.bo-void-amt, .bo-void-amt strong { text-decoration: line-through; color: var(--c-muted); }
.bo-card--void .bo-h2 { color: #414B57; letter-spacing: .08em; text-transform: uppercase; }
.bo-card--flag { border-left: 4px solid var(--c-orange); }

/* ─── Muted text ───────────────────────────────────────────────  */

.bo-dim, .m-dim, .bo-help, .m-help, .bo-or {
  color: var(--c-muted);
  font-weight: 500;
}
.bo-table th { color: var(--c-muted); }

/* A date that has already passed with the bin still out. Defined after
   the muted rules above on purpose: it is usually sitting on a .bo-dim
   and has to win. */
.bo-late, .m-late { color: var(--c-danger); font-weight: 700; }

/* ─── Alerts and toasts ────────────────────────────────────────  */

.bo-alert, .m-toast {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-2);
  font: var(--t-small);
  font-weight: 600;
  border-left: 4px solid transparent;
}
.bo-alert--ok, .m-toast--ok { background: var(--c-ok-bg); color: var(--c-ok); border-left-color: var(--c-ok); }
.bo-alert--error, .m-toast--error { background: var(--c-danger-bg); color: var(--c-danger); border-left-color: var(--c-danger); }
.bo-alert--warn { background: var(--c-warn-bg); color: var(--c-warn); border-left-color: var(--c-warn); }

/* ─── Navigation progress ──────────────────────────────────────
   Drawn by progress.js while the next page is on its way. Sits above
   everything including the sticky top bar, and is invisible until
   something is actually loading.                                   */

#binny-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--c-orange);
  box-shadow: 0 0 8px rgba(230, 126, 34, .7);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

#binny-progress.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #binny-progress { transition: none !important; }
}

/* A control that has been pressed and is waiting on the server. The
   spinner replaces the icon rather than sitting beside it, so the
   button does not change width and shift the row. */
.bo-btn.is-busy, .m-btn.is-busy {
  position: relative;
  color: transparent !important;
}

.bo-btn.is-busy::after, .m-btn.is-busy::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--c-navy);
  animation: bo-spin .7s linear infinite;
}

.bo-btn--dark.is-busy::after, .m-btn--dark.is-busy::after { color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
  .bo-btn.is-busy::after, .m-btn.is-busy::after { animation-duration: 2s; }
}

/* ─── Focus, everywhere ────────────────────────────────────────  */

:focus-visible { outline: var(--ring); outline-offset: 2px; }

/* ─── Terms, privacy, staff notice ──────────────────────────────── */

/* Reading text, not a form: a comfortable measure and line height. */
.bo-legal { max-width: 68ch; font-size: 15px; line-height: 1.6; color: var(--c-ink, #1C2733); }
.bo-legal p { margin: 0 0 10px; }
.bo-legal ul { margin: 0 0 10px; padding-left: 20px; }
.bo-legal li { margin: 0 0 4px; }
.bo-legal__h { margin: 18px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--c-navy, #002C5E); }
.bo-legal > .bo-legal__h:first-child { margin-top: 0; }

/* On the gate each document scrolls in its own box, so three of them
   fit on one screen without a wall of text pushing Continue off it. */
.bo-legal--box {
  max-height: 300px;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--c-line, #DDE2E8);
  border-radius: 8px;
  background: #FAFBFC;
  font-size: 14.5px;
  max-width: none;
}
.bo-legal--box:focus-visible { outline: 2px solid var(--c-orange, #E67E22); outline-offset: 2px; }

.bo-login__card--wide { max-width: 640px; }
.bo-legal-gate__doc ~ .bo-legal-gate__doc { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-line, #DDE2E8); }
.bo-legal-gate__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16.5px; font-weight: 700; color: var(--c-navy, #002C5E); }
.bo-legal-gate__t .bo-dim { font-size: 13px; font-weight: 500; }
.bo-legal-gate__agree { margin: 12px 0 0; font-weight: 600; }

.bo-form--wide { max-width: 860px; }
.bo-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; }

@media (max-width: 600px) {
  .bo-legal--box { max-height: 46vh; }
  .bo-legal-gate__t { flex-direction: column; gap: 2px; }
}

/* A locked field should look locked. Paid and void invoices showed
   their lines in boxes that looked editable and silently were not. */
.bo-input:disabled, .bo-input[readonly] {
  background: var(--c-bg, #F2F5F8);
  color: var(--c-ink, #1D2530);
  border-color: transparent;
  cursor: default;
  -webkit-text-fill-color: var(--c-ink, #1D2530);
  opacity: 1;
}

/* Undo a tick — folded away under the line, never the first thing pressed */
.bo-undo { margin-top: 6px; text-align: right; }
.bo-undo > summary { display: inline-block; cursor: pointer; list-style: none; color: var(--c-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.bo-undo > summary::-webkit-details-marker { display: none; }
.bo-undo[open] > summary { margin-bottom: 6px; }
.bo-undo__form { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.bo-undo__form .bo-input { width: auto; min-width: 220px; }

/* Person or business — two-way switch */
.bo-seg { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 8px; }
.bo-seg legend { width: 100%; margin-bottom: 6px; padding: 0; }
.bo-seg__opt { position: relative; display: inline-flex; cursor: pointer; }
.bo-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bo-seg__opt span {
  display: inline-flex; align-items: center; min-height: var(--h-ctl-sm, 38px); padding: 0 16px;
  border: 1px solid var(--c-line-dk); border-radius: var(--r-2); background: var(--c-surface);
  font-weight: 600; color: var(--c-navy);
}
.bo-seg__opt input:checked + span { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.bo-seg__opt input:focus-visible + span { outline: var(--ring); outline-offset: 2px; }

/* Addresses on the customer form */
.bo-row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--s-3); align-items: start; }
.bo-row3 > * { min-width: 0; }
.bo-row3 .bo-label { margin-top: var(--s-4); }
@media (max-width: 620px) { .bo-row3 { grid-template-columns: 1fr 1fr; } .bo-row3 > :last-child { grid-column: 1 / -1; } }
.bo-addrs { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.bo-addr { border: 1px solid var(--c-line); border-radius: var(--r-3); padding: 12px 16px 16px; margin: 0; background: var(--c-surface-2); }
.bo-addr__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bo-addr__head .bo-check { margin: 0; font-size: 14px; }
.bo-addr__rm { color: var(--c-muted); font-size: 13.5px; }
.bo-addr .bo-row2 .bo-label { margin-top: var(--s-3); }
.bo-addrlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bo-addrlist li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bo-addrlist li > span:first-child { flex: 1 1 260px; }
.bo-pill--tiny { font-size: 11.5px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.bo-addrpick { margin-bottom: 4px; }

/* Anything given a display value must still hide when [hidden]. */
[hidden] { display: none !important; }

/* Web bookings */
.bo-check--inline { display: inline-flex; margin: 8px 16px 8px 0; }
.bo-fieldset { border: 0; padding: 0; margin: 14px 0 6px; }
.bo-fieldset legend { padding: 0; margin-bottom: 4px; }
.bo-fieldset .bo-check { margin: 8px 0; }
.bo-reasons { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.bo-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-left: 4px; border-radius: var(--r-round); background: var(--c-orange); color: var(--c-navy); font-size: 12px; font-weight: 700;
}
.bo-seg--links { margin: 0 0 var(--s-4); }
.bo-seg__link {
  display: inline-flex; align-items: center; min-height: var(--h-ctl-sm); padding: 0 14px; border: 1px solid var(--c-line-dk);
  border-radius: var(--r-2); background: var(--c-surface); color: var(--c-navy); font-weight: 600; text-decoration: none;
}
.bo-seg__link.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.bo-seg__link.is-on .bo-count { background: #fff; }
.bo-alert--bookings { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ─── Dev mode ─────────────────────────────────────────────────── */

.bo-dev {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: repeating-linear-gradient(135deg, #F28C28 0 14px, #E57B12 14px 28px);
  color: #1B1B1B;
  font-size: 14px;
}

/* The strip scrolls away; the header keeps an orange edge so dev mode
   is never out of sight. */
.bo-dev ~ .bo-top,
.bo-dev ~ .m-top { box-shadow: inset 0 -4px 0 #F28C28; }

.bo-dev strong { text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.bo-dev span { flex: 1 1 220px; }
.bo-dev__short { display: none; }

@media (max-width: 600px) {
  .bo-dev { padding: 6px 12px; gap: 8px; font-size: 13px; flex-wrap: nowrap; }
  .bo-dev__long { display: none; }
  .bo-dev__short { display: inline; flex: 1 1 auto; }
}
.bo-dev form { margin: 0; }

.bo-dev__off {
  border: 1px solid #1B1B1B;
  background: #fff;
  color: #1B1B1B;
  border-radius: 6px;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.bo-devlog {
  margin: 16px auto;
  max-width: 1240px;
  padding: 10px 16px;
  background: #FFF4F2;
  border: 1px solid #E5B4AC;
  border-radius: 8px;
  font-size: 13px;
}

.bo--m .bo-devlog { margin: 14px 0; }

.bo-devlog summary { cursor: pointer; font-weight: 700; color: #8A2A1B; }

.bo-devlog__list { margin: 10px 0 0; padding-left: 20px; }
.bo-devlog__list li { margin-bottom: 8px; word-break: break-word; }
.bo-devlog__list code { display: block; font-size: 12px; color: #555; }

.bo-devmail { border: 1px solid var(--bo-line); border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; }
.bo-devmail summary { cursor: pointer; }
.bo-devmail pre { white-space: pre-wrap; font-size: 13px; margin: 10px 0 0; }

/* Mixed jobs: a line that is not the job's main service says what it is. */
.bo-linesvc { display: block; font-size: 12.5px; color: var(--bo-soft); margin-top: 2px; }
.bo-addline__group { display: contents; }
.bo-addline__group[hidden] { display: none; }

/* Price grid: weight limit and dimensions next to each size. */
.bo-rate--size { flex-wrap: wrap; row-gap: 6px; }
.bo-repeat__row .bo-input--xs { max-width: 70px; }