/* ═══════════════════════════════════════════════════════════════
   Binny Ops — app styling.
   One responsive interface: office PCs and phones, same screens.
   ═══════════════════════════════════════════════════════════════ */

/* Colours, type and radii live in tokens.css. Nothing here defines its own. */

* { box-sizing: border-box; }

body.bo {
  margin: 0;
  font-family: var(--bo-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bo-grey);
  background: var(--bo-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bo-navy); }
a:hover { color: var(--bo-orange); }

:focus-visible { outline: 3px solid var(--bo-orange); outline-offset: 2px; }

/* ─── Top bar ──────────────────────────────────────────────────── */

.bo-top {
  background: var(--bo-navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.bo-top__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 62px;
  flex-wrap: wrap;
}

.bo-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.bo-brand:hover { color: #fff; }
.bo-brand__mark { width: 26px; height: 26px; color: var(--bo-orange); display: block; }
.bo-brand__mark svg { width: 100%; height: 100%; }
.bo-brand__txt b { color: var(--bo-orange); font-weight: 800; }

.bo-who { display: flex; align-items: center; gap: 14px; font-size: 14px; margin-left: auto; }
.bo-who__name { color: #C7D6E5; text-decoration: none; }
.bo-who__name:hover { color: #fff; text-decoration: underline; }
.bo-who__out { color: #fff; text-decoration: none; font-weight: 600; }
.bo-who__out:hover { color: var(--bo-orange); }

@media (max-width: 720px) {
  .bo-top__in { min-height: 56px; padding: 10px 16px; gap: 12px; }
  .bo-who__name { display: none; }
}

/* ─── Layout ───────────────────────────────────────────────────── */

.bo-main { padding: 26px 0 60px; }
.bo-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ─── Tabs ─────────────────────────────────────────────────────────
   Separate compact buttons that wrap onto a second row when the window
   is narrow. Every tab is always on screen: nothing scrolls sideways
   out of sight, whatever the screen size or zoom.
   ─────────────────────────────────────────────────────────────── */

.bo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.bo-tab {
  flex: none;
  display: inline-block;
  padding: 7px 13px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--bo-soft);
  text-decoration: none;
  background: #E9EDF2;
  border: 1px solid var(--bo-line);
  border-radius: 7px;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}

.bo-tab:hover { background: #DFE5EC; color: var(--bo-navy); }

.bo-tab.is-on,
.bo-tab.is-on:hover {
  background: var(--bo-navy);
  border-color: var(--bo-navy);
  color: #fff;
}

.bo-tab:focus-visible { outline: 2px solid var(--bo-orange); outline-offset: 2px; }

/* ─── Content panel ────────────────────────────────────────────── */

.bo-panel {
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 8px;
  padding: 26px 26px 30px;
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .bo-wrap { padding: 0 12px; }
  .bo-tab { font-size: 13.5px; padding: 7px 11px; }
  .bo-panel { padding: 20px 16px 24px; }
}

.bo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* Headings — see components.css */

.bo-sub { margin: 5px 0 0; color: var(--bo-soft); font-size: 15px; }
.bo-dim { display: block; font-size: 14px; }

.bo-actions-top { margin: 0 0 18px; }

/* ─── Cards ────────────────────────────────────────────────────── */

.bo-card {
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

/* Inside the panel the surface already exists — use a tint, not a box */
.bo-panel > .bo-card,
.bo-panel .bo-form > .bo-card {
  background: #FAFBFC;
  border-color: var(--bo-line);
}

.bo-panel > .bo-card:last-child { margin-bottom: 0; }

.bo-card--form { max-width: 680px; }
.bo-card--danger { border-color: #E8CFCD; max-width: 680px; }
.bo-card--danger .bo-h2 { color: var(--bo-red); }

/* ─── Stats ────────────────────────────────────────────────────── */

.bo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.bo-stats--tight { margin-bottom: 18px; }

.bo-stat {
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-top: 3px solid var(--bo-orange);
  border-radius: 7px;
  padding: 15px 18px;
}

.bo-stat__n {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--bo-navy);
  font-variant-numeric: tabular-nums;
}

.bo-stat__l { display: block; margin-top: 3px; font-size: 13px; color: var(--bo-soft); }

/* ─── Alerts ───────────────────────────────────────────────────── */

/* Alerts — see components.css */

.bo-alert a { color: inherit; font-weight: 600; }

/* ─── Buttons ──────────────────────────────────────────────────── */

/* Buttons, links, labels and inputs are in components.css.
   What stays here is how they are laid out on a wide screen. */

.bo-form { max-width: 640px; }
.bo-form > .bo-label:first-of-type { margin-top: 0; }

.bo-input--sku { text-transform: uppercase; font-weight: 700; letter-spacing: .05em; }
.bo-input--num { max-width: 130px; }
.bo-input--search { max-width: 280px; }

.bo-help { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.bo-help--warn { color: var(--c-warn); }

.bo-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0;
  font-size: 15px;
  cursor: pointer;
}
.bo-check input { width: 18px; height: 18px; accent-color: var(--c-orange); }

.bo-readonly { margin: 20px 0; padding: 14px 16px; background: var(--c-bg); border-radius: var(--r-1); }
.bo-readonly .bo-label { margin-top: 0; }

.bo-formfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.bo-formfoot--sticky {
  position: sticky;
  bottom: 0;
  background: var(--c-bg);
  padding: 16px 0;
  margin-top: 0;
  border-top: 1px solid var(--c-line);
}

/* ─── Repeaters ────────────────────────────────────────────────── */

.bo-repeat { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.bo-repeat__row { display: flex; align-items: center; gap: 9px; }
.bo-repeat__row .bo-input { max-width: 320px; }
.bo-repeat__row .bo-input--num { max-width: 120px; }
.bo-unit { font-weight: 600; color: var(--c-muted); font-size: 15px; }

/* ─── Filters ──────────────────────────────────────────────────── */

.bo-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.bo-filters .bo-input,
.bo-addline .bo-input,
.bo-inline-form .bo-input { width: auto; min-width: 150px; }

/* Desktop buttons hug their label; the phone default is full width. */
.bo-btn { width: auto; }

/* ─── Table ────────────────────────────────────────────────────── */

.bo-tablewrap {
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 8px;
  overflow: hidden;
}

.bo-panel .bo-table th { background: #F7F9FB; }

.bo-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.bo-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bo-soft);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bo-line);
  background: #FAFBFC;
}

.bo-table td { padding: 13px 16px; border-bottom: 1px solid var(--bo-line); vertical-align: middle; }
.bo-table tr:last-child td { border-bottom: 0; }
.bo-table tbody tr:hover { background: #FCFDFE; }

.bo-num { text-align: right; font-variant-numeric: tabular-nums; }
.bo-rowact { text-align: right; white-space: nowrap; }

.bo-sku {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--bo-navy);
  text-decoration: none;
}

.bo-sku:hover { color: var(--bo-orange); }

/* Cards on phones — tables do not survive small screens */
@media (max-width: 700px) {
  .bo-tablewrap { border: 0; background: none; }
  .bo-table, .bo-table tbody, .bo-table tr, .bo-table td { display: block; width: 100%; }
  .bo-table thead { display: none; }

  .bo-table tr {
    background: var(--bo-white);
    border: 1px solid var(--bo-line);
    border-radius: 8px;
    margin-bottom: 11px;
    padding: 6px 0;
  }

  .bo-table td {
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 8px 15px;
    text-align: right;
  }

  .bo-table td::before {
    content: attr(data-label);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bo-soft);
    text-align: left;
  }

  .bo-table td:first-child { font-size: 17px; padding-top: 12px; }
  .bo-rowact { justify-content: flex-end; }
  .bo-dim { display: inline; }
}

/* ─── Pills ────────────────────────────────────────────────────── */

/* Pills — see components.css */

/* ─── Empty state ──────────────────────────────────────────────── */

.bo-empty {
  background: var(--bo-white);
  border: 1px dashed var(--bo-line);
  border-radius: 8px;
  padding: 46px 24px;
  text-align: center;
  color: var(--bo-soft);
}

.bo-empty strong { color: var(--bo-navy); font-size: 17px; }

/* ─── Pager ────────────────────────────────────────────────────── */

.bo-pager { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }

.bo-pager__a {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.bo-pager__a.is-on { background: var(--bo-navy); border-color: var(--bo-navy); color: #fff; }

/* ─── Footer ───────────────────────────────────────────────────── */

.bo-foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--bo-soft);
  border-top: 1px solid var(--bo-line);
}

.bo-foot a { color: var(--bo-soft); }

/* ─── Login ────────────────────────────────────────────────────── */

/* body.bo sets the page grey; this has to outrank it. */
body.bo--login { background: var(--bo-navy); }

.bo-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.bo-login__card {
  background: var(--bo-white);
  border-radius: 10px;
  padding: 34px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

.bo-login__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  margin-bottom: 26px;
  font-weight: 800;
  font-size: 21px;
  color: var(--bo-navy);
}

.bo-login__brand .bo-brand__mark { color: var(--bo-orange); width: 28px; height: 28px; }
.bo-login__brand .bo-brand__txt b { color: var(--bo-orange); }

.bo-login .bo-form { max-width: none; }
.bo-login .bo-btn--block { margin-top: 8px; padding: 13px; font-size: 16px; }

.bo-login__help { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--bo-soft); }
.bo-login__help a { color: var(--bo-soft); }

.bo-login__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; color: var(--bo-navy); text-align: center; }
.bo-login__foot { margin: 18px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.78); }
.bo-help--lead { margin: 0 0 16px; font-size: 14.5px; text-align: center; }

@media (max-width: 480px) {
  .bo-login { padding: 16px; justify-content: flex-start; padding-top: max(40px, env(safe-area-inset-top)); }
  .bo-login__card { padding: 28px 22px; }
  /* 16px stops iOS zooming into the field on focus */
  .bo-login .bo-input { font-size: 16px; }
}

/* ─── Password field ───────────────────────────────────────────── */

.bo-pass { display: flex; gap: 6px; align-items: stretch; }
.bo-pass .bo-input { flex: 1; min-width: 0; }
.bo-pass__toggle {
  flex: none;
  font-family: var(--bo-font);
  font-size: 13px;
  font-weight: 600;
  padding: 0 12px;
  border: 1px solid var(--bo-line);
  border-radius: 6px;
  background: var(--bo-bg);
  color: var(--bo-navy);
  cursor: pointer;
  min-width: 58px;
}
.bo-pass__toggle:hover { border-color: var(--bo-navy); }
.bo-pass .bo-btn { flex: none; }

/* ─── Choice cards (role, password method) ─────────────────────── */

.bo-choice { border: 0; margin: 18px 0 0; padding: 0; min-width: 0; }
.bo-choice legend.bo-label { padding: 0; margin: 0; }
.bo-choice__opt {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 13px;
  margin-top: 8px;
  border: 1px solid var(--bo-line);
  border-radius: 7px;
  cursor: pointer;
  background: var(--bo-white);
}
.bo-choice__opt:has(input:checked) { border-color: var(--bo-orange); background: #FFF8F0; }
.bo-choice__opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bo-orange); flex: none; }
.bo-choice__opt > span { display: flex; flex-direction: column; gap: 1px; }
.bo-choice__opt .bo-dim { font-size: 13.5px; }
.bo-choice[disabled] .bo-choice__opt { opacity: .6; cursor: not-allowed; }

.js .bo-reveal:not(.is-open) { display: none; }

.bo-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--bo-soft); font-size: 13px; }
.bo-divider::before, .bo-divider::after { content: ''; flex: 1; height: 1px; background: var(--bo-line); }

.bo-inline-form.bo-inline-form--start { justify-content: flex-start; }
.bo-alert .bo-inline-form { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.bo-back { margin: 0 0 12px; }
.bo-pills-row { margin: 0 0 16px; }

/* ─── Diagnostics ──────────────────────────────────────────────── */

.bo-pre {
  background: #1E252C;
  color: #D8E0E8;
  padding: 14px 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.bo-diag-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bo-diag-actions form {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bo-diag-actions .bo-help { margin: 0; }

.bo-strong { font-weight: 700; color: var(--bo-navy); text-decoration: none; }
.bo-strong:hover { color: var(--bo-orange); }

code {
  background: #EEF2F6;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  word-break: break-all;
}

/* ─── Flagged cards (overdue, dispatch queue) ─────────────────── */

.bo-card--flag { border-left: 4px solid var(--bo-orange); }

.bo-queue { list-style: none; margin: 14px 0 0; padding: 0; }

.bo-queue li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--bo-line);
}

.bo-queue li:last-child { border-bottom: 0; }
.bo-queue a { text-decoration: none; min-width: 0; }
.bo-queue a strong { color: var(--bo-navy); margin-right: 8px; }
.bo-queue a:hover strong { color: var(--bo-orange); }

/* ─── Bin lookup panel ─────────────────────────────────────────── */

.bo-lookup {
  background: var(--bo-navy);
  color: #fff;
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 20px;
}

.bo-lookup__label {
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bo-orange);
}

.bo-lookup__big { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 800; line-height: 1.15; }
.bo-lookup__sub { margin: 4px 0 0; color: #C7D6E5; }
.bo-lookup__meta { margin: 10px 0 0; color: #9FB4C8; font-size: 14px; }

/* ─── Tracking timeline ────────────────────────────────────────── */

.bo-track { list-style: none; margin: 0; padding: 0; }

.bo-track__item {
  display: flex;
  gap: 18px;
  padding: 0 0 20px 0;
  position: relative;
}

.bo-track__when {
  flex: 0 0 108px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bo-navy);
  padding-top: 2px;
}

.bo-track__when span { display: block; font-weight: 400; }

.bo-track__body {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 2px solid var(--bo-line);
  padding: 0 0 4px 20px;
  position: relative;
}

.bo-track__body::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bo-line);
  border: 2px solid var(--bo-white);
}

.bo-track__item--delivered .bo-track__body::before,
.bo-track__item--swapped_in .bo-track__body::before { background: var(--bo-orange); }

.bo-track__item--collected .bo-track__body::before,
.bo-track__item--returned .bo-track__body::before { background: #2E7D3A; }

.bo-track__item:last-child .bo-track__body { border-left-color: transparent; }

.bo-track__what { margin: 0 0 3px; font-weight: 700; color: var(--bo-navy); }
.bo-track__where { margin: 0; font-size: 15px; }
.bo-track__where strong { color: var(--bo-navy); }
.bo-track__addr { margin: 2px 0 0; font-size: 14px; color: var(--bo-soft); }
.bo-track__note { margin: 6px 0 0; font-size: 14.5px; color: var(--bo-grey); font-style: italic; }
.bo-track__job { margin: 6px 0 0; font-size: 13.5px; }

@media (max-width: 600px) {
  .bo-track__item { flex-direction: column; gap: 4px; }
  .bo-track__when { flex: none; }
  .bo-track__body { border-left: 0; padding-left: 0; }
  .bo-track__body::before { display: none; }
}

/* ─── Job detail ───────────────────────────────────────────────── */

.bo-jobhead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 18px;
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.bo-jobhead__col p { margin: 0; font-size: 15px; }
.bo-jobhead .bo-label { margin: 0 0 5px; }

.bo-inline-form { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.bo-inline-form .bo-input { width: auto; min-width: 120px; }

.bo-addline {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--bo-bg);
  border-radius: 7px;
}

.bo-inline-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bo-navy);
}

.bo-inline-label .bo-input { width: auto; min-width: 150px; }
.bo-or { font-size: 14px; padding-bottom: 12px; }

/* ─── Raw data viewer ──────────────────────────────────────────── */

.bo-tabset { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

/* Chips — see components.css */

.bo-tablewrap--raw { overflow-x: auto; }

.bo-table--raw { font-size: 13px; min-width: 900px; }
.bo-table--raw th, .bo-table--raw td { padding: 8px 11px; white-space: nowrap; }
.bo-table--raw td { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

.bo-null { color: #B0BAC4; font-style: italic; }
.bo-wrapany { word-break: break-word; white-space: normal; }

/* ─── Movement recorder ────────────────────────────────────────── */

.bo-recorder { padding: 0; }

.bo-recorder__toggle {
  cursor: pointer;
  list-style: none;
  padding: 18px 24px;
  font-weight: 700;
  font-size: 17px;
  color: var(--bo-navy);
  position: relative;
}

.bo-recorder__toggle::-webkit-details-marker { display: none; }

.bo-recorder__toggle::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 15px;
  font-size: 24px;
  font-weight: 400;
  color: var(--bo-orange);
}

.bo-recorder[open] .bo-recorder__toggle::after { content: "\2013"; }
.bo-recorder[open] .bo-recorder__toggle { border-bottom: 1px solid var(--bo-line); }
.bo-recorder > .bo-help,
.bo-recorder > .bo-form { padding: 0 24px; }
.bo-recorder > .bo-form { padding-bottom: 22px; }
.bo-recorder > .bo-help { padding-top: 16px; }

.bo-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0 18px;
}

/* ─── Parked bin rows ──────────────────────────────────────────── */

.bo-row--out_of_service td,
/* Dim the row without washing the text below AA. */
.bo-row--retired td { color: var(--c-muted); }
.bo-row--retired .bo-sku, .bo-row--retired .bo-link { color: var(--c-muted); }

.bo-row--out_of_service { background: #FFF9F0; }
.bo-row--retired { background: #F7F7F8; }

.bo-row--out_of_service td:first-child { box-shadow: inset 3px 0 0 #D99A3C; }
.bo-row--retired td:first-child { box-shadow: inset 3px 0 0 #A9B2BB; }

.bo-row--out_of_service .bo-sku,
.bo-row--retired .bo-sku { text-decoration: line-through; text-decoration-thickness: 1px; }


@media (max-width: 700px) {
  .bo-row--out_of_service td:first-child,
  .bo-row--retired td:first-child { box-shadow: none; }
  .bo-row--out_of_service, .bo-row--retired { border-left: 4px solid #D99A3C; }
  .bo-row--retired { border-left-color: #A9B2BB; }
}

/* ─── State buttons ────────────────────────────────────────────── */

.bo-statebtns { display: flex; gap: 10px; flex-wrap: wrap; }
.bo-statebtns form { margin: 0; }

/* ─── Autosave indicator ───────────────────────────────────────── */

.bo-autosave {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bo-white);
  border: 1px solid var(--bo-line);
  border-radius: 999px;
  padding: 7px 16px 7px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bo-soft);
  margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(0, 44, 94, 0.07);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.bo-autosave__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #A9B2BB;
  flex: none;
  transition: background-color 0.2s ease;
}

.bo-autosave.is-idle .bo-autosave__dot { background: #2E7D3A; }
.bo-autosave.is-typing { color: #8A5A0B; border-color: #E8CFA4; }
.bo-autosave.is-typing .bo-autosave__dot { background: var(--bo-orange); }
.bo-autosave.is-saving .bo-autosave__dot { background: var(--bo-orange); animation: bo-pulse 0.9s ease-in-out infinite; }
.bo-autosave.is-ok { color: #1E5527; border-color: #BBD8C0; }
.bo-autosave.is-ok .bo-autosave__dot { background: #2E7D3A; }
.bo-autosave.is-error { color: #7E2A24; border-color: #E8CFCD; }
.bo-autosave.is-error .bo-autosave__dot { background: var(--bo-red); }

@keyframes bo-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .bo-autosave.is-saving .bo-autosave__dot { animation: none; }
}

.bo-unitnote { font-size: 13px; color: var(--bo-soft); white-space: nowrap; }

/* ─── Prices ───────────────────────────────────────────────────── */

.bo-rate__l { min-width: 190px; font-weight: 600; }

/* A customer's own prices, read-only on their screen. */
.bo-ratelist { list-style: none; margin: 10px 0 0; padding: 0; }
.bo-ratelist li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
}
.bo-ratelist li:last-child { border-bottom: 0; }
.bo-ratelist li > span:first-child { min-width: 120px; font-weight: 600; }
.bo-ratelist .bo-dim { display: inline; font-size: 13.5px; }

.bo-rates { margin-top: 10px; }
.bo-rates .bo-repeat__row + .bo-repeat__row { margin-top: 8px; }

/* A money field: the dollar sign sits inside the box so the number
   lines up with the ones in the tables. */
.bo-moneyin { position: relative; display: inline-block; }
.bo-moneyin__sign {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--c-muted);
  pointer-events: none;
}
.bo-moneyin .bo-input { padding-left: 25px; max-width: 130px; }

.bo-bullets { margin: 10px 0 0; padding-left: 20px; }
.bo-bullets li { margin: 6px 0; font-size: 15px; }