/* Seller backlog — the triage bench.
 *
 * Different job from /app.css, same family. The worklist is a dispatch board
 * worked to zero in a day; this is a bench where one card at a time gets
 * examined and disposed of, over weeks. So the card is wide and detailed
 * rather than thumb-sized, and the photos are the loudest thing on it —
 * they are what the whole tool exists to put in front of you.
 *
 * Tokens come from app.css. Red still means "waiting on you" and nothing else.
 */

/* The shell above this is the sticky element now; two stacked stickies at
 * top:0 overlap on scroll. */
.bhead {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  padding: 10px var(--pad) 12px;
}
.bhead__bar { display: flex; align-items: baseline; gap: 10px; }
.bhead__brand {
  font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); text-decoration: none;
}
.bhead__title { font: 600 16px/1 var(--sans); }
.bhead__who { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--ink-faint); }

.bstats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bstat {
  display: flex; align-items: baseline; gap: 6px;
  background: var(--field); border-radius: 6px; padding: 5px 10px;
  font: 400 12px/1.2 var(--sans); color: var(--ink-soft);
}
.bstat b { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bstat--owed b { color: var(--signal); }

.bcontrols { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bfilters { display: flex; flex-wrap: wrap; gap: 6px; }
.bchip {
  font: 400 12px/1 var(--sans); cursor: pointer;
  background: var(--card); color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 6px 11px;
}
.bchip:hover { border-color: var(--ink-faint); }
.bchip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.bchip small { font: 400 11px/1 var(--mono); opacity: .75; margin-left: 4px; }

.bshow { font: 400 12px/1 var(--sans); color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.bshow select {
  font: 400 12px/1 var(--sans); padding: 6px 8px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink);
}

.bbtn {
  font: 600 13px/1 var(--sans); cursor: pointer; border-radius: 7px;
  padding: 9px 14px; border: 1px solid transparent; background: var(--navy); color: #fff;
}
.bbtn:hover { filter: brightness(1.08); }
.bbtn:disabled { opacity: .5; cursor: default; filter: none; }
.bbtn--ghost { background: var(--card); color: var(--ink-soft); border-color: var(--rule); }
.bbtn--go { background: var(--go); }
.bbtn--warn { background: var(--card); color: var(--warn); border-color: var(--warn); }
.bbtn--close { background: var(--card); color: var(--signal); border-color: var(--signal); }
.bbtn--close:hover { background: var(--signal); color: #fff; }

.bshowing {
  font: 400 12px/1 var(--mono); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}

.blist { display: flex; flex-direction: column; gap: 14px; padding: 16px var(--pad) 120px; max-width: 900px; margin: 0 auto; }
.bempty { text-align: center; color: var(--ink-faint); padding: 60px 20px; font: 400 15px/1.5 var(--sans); }

/* ---- card ---- */
.bcard {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 1px 2px rgba(11,25,41,.04);
}
.bcard--owed { border-left: 3px solid var(--signal); }
/* Collapsed by default. A card's photos are not even requested until it is
 * opened, which is what keeps one screen from firing eighty image requests. */
.bcard__top {
  padding: 13px 16px; display: flex; gap: 12px; align-items: center;
  cursor: pointer; list-style: none;
}
.bcard__top::-webkit-details-marker { display: none; }
.bcard__top:hover { background: var(--field); }
.bcard[open] > .bcard__top { border-bottom: 1px solid var(--rule); }
.bcard__id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bcard__name { font: 600 16.5px/1.25 var(--sans); }
.bcard__prop {
  font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcard__meta { font: 400 11.5px/1.5 var(--mono); color: var(--ink-faint); }
.bcard__meta .owed { color: var(--signal); font-weight: 600; }
.bcard__chev { color: var(--ink-faint); font-size: 12px; transition: transform .15s; }
.bcard[open] > .bcard__top .bcard__chev { transform: rotate(180deg); }
.bcard__body { display: flex; flex-direction: column; }
.bcard__body > /* The seller answered these themselves. Shown in the "go" colour because it
 * turns the call from a discovery call into a verification call. */
.bcma { margin: 12px 16px 4px; padding: 11px 13px; border-radius: 8px;
        background: var(--go-bg); border: 1px solid rgba(15,123,95,.22); }
.bcma--partial { background: var(--warn-bg); border-color: rgba(180,83,9,.22); }
.bcma__head { font: 600 12px/1.3 var(--sans); color: var(--go); }
.bcma--partial .bcma__head { color: var(--warn); }
.bcma__grid { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.bcma__grid div { display: flex; flex-direction: column; gap: 1px; }
.bcma__grid dt { font: 400 10px/1 var(--sans); letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-faint); }
.bcma__grid dd { margin: 0; font: 500 13px/1.3 var(--mono); color: var(--ink); }

.bcma__notes { margin: 9px 0 0; font: 400 13px/1.5 var(--sans); color: var(--ink-soft); font-style: italic; }

.bphotos { padding-top: 14px; }

.btag {
  font: 600 11px/1 var(--sans); padding: 5px 9px; border-radius: 5px; white-space: nowrap;
  background: var(--field); color: var(--ink-soft);
}
.btag--sent_photos { background: var(--go-bg); color: var(--go); }
.btag--cma_done, .btag--cma_started { background: var(--navy); color: #fff; }
.btag--talked, .btag--thin_reply { background: var(--warn-bg); color: var(--warn); }
.btag--silent, .btag--promised, .btag--declined { background: var(--signal-bg); color: var(--signal); }

.bsum { padding: 14px 16px 4px; }
.bsum p { margin: 0 0 6px; font: 400 14px/1.55 var(--sans); color: var(--ink); }
.bsum .why { font: 400 12.5px/1.5 var(--sans); color: var(--ink-faint); margin: 0; }

/* ---- photos ---- */
/* The seller answered these themselves. Shown in the "go" colour because it
 * turns the call from a discovery call into a verification call. */
.bcma { margin: 12px 16px 4px; padding: 11px 13px; border-radius: 8px;
        background: var(--go-bg); border: 1px solid rgba(15,123,95,.22); }
.bcma--partial { background: var(--warn-bg); border-color: rgba(180,83,9,.22); }
.bcma__head { font: 600 12px/1.3 var(--sans); color: var(--go); }
.bcma--partial .bcma__head { color: var(--warn); }
.bcma__grid { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 0; }
.bcma__grid div { display: flex; flex-direction: column; gap: 1px; }
.bcma__grid dt { font: 400 10px/1 var(--sans); letter-spacing: .06em;
                 text-transform: uppercase; color: var(--ink-faint); }
.bcma__grid dd { margin: 0; font: 500 13px/1.3 var(--mono); color: var(--ink); }

.bphotos { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 14px; scrollbar-width: thin; }
.bphoto {
  flex: 0 0 auto; width: 108px; height: 108px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--rule); cursor: zoom-in; background: var(--field); padding: 0;
}
.bphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bphoto--video {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--ink); color: #fff;
}
.bphoto__play { font-size: 21px; line-height: 1; }
.bphoto--video small { font: 400 10px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; opacity: .8; }

.bphoto--more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 600 17px/1 var(--mono); color: var(--ink-soft); background: var(--field);
}
.bphoto--more small { font: 400 10px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }

.bphotos__none { padding: 0 16px 14px; font: 400 12.5px/1 var(--sans); color: var(--ink-faint); }

/* ---- thread ---- */
.bthread { border-top: 1px solid var(--rule); }
.bcard__body > .bphotos + .bthread { border-top: 1px solid var(--rule); }
.bthread > summary {
  cursor: pointer; list-style: none; padding: 10px 16px;
  font: 600 12px/1 var(--sans); color: var(--ink-soft);
}
.bthread > summary::-webkit-details-marker { display: none; }
.bthread > summary:hover { background: var(--field); }
.bthread__body { padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; }
.bmsg { display: flex; gap: 9px; font: 400 13px/1.5 var(--sans); }
.bmsg time { flex: 0 0 74px; font: 400 11px/1.6 var(--mono); color: var(--ink-faint); }
.bmsg span { flex: 1; }
.bmsg--them span { color: var(--ink); font-weight: 500; }
.bmsg--us span { color: var(--ink-soft); }

/* ---- draft + actions ---- */
/* White, like the rest of the card. This block used to be var(--field), which
 * is also the page background, so the card appeared to stop here and the real
 * boundary between one lead and the next was impossible to see. The card is one
 * white rectangle; hairline rules divide the sections inside it. */
.bdraft { border-top: 1px solid var(--rule); padding: 12px 16px; background: var(--card); }
.bdraft__label { font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.bdraft textarea {
  width: 100%; margin-top: 7px; padding: 10px; border-radius: 7px; resize: vertical;
  border: 1px solid var(--rule); background: var(--field); color: var(--ink);
  font: 400 14px/1.5 var(--sans); min-height: 90px; overflow: hidden;
}
.bdraft textarea:focus { background: var(--card); outline: 2px solid var(--royal); outline-offset: -1px; }
.bnote { width: 100%; margin-top: 8px; padding: 9px 10px; border-radius: 7px;
  border: 1px solid var(--rule); background: var(--field); color: var(--ink);
  font: 400 13px/1.4 var(--sans); }
.bnote:focus { background: var(--card); outline: 2px solid var(--royal); outline-offset: -1px; }

.bactions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rule); }
.bactions__spacer { flex: 1; }

/* ---- lightbox ---- */
.lb {
  position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 24, .93);
  display: flex; align-items: center; justify-content: center;
}
.lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.lb__close, .lb__nav {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 26px; line-height: 1;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255,255,255,.24); }
.lb__close { top: 18px; right: 18px; font-size: 30px; }
.lb__nav--prev { left: 16px; } .lb__nav--next { right: 16px; }
.lb__count { position: absolute; bottom: 18px; color: #fff; font: 400 12px/1 var(--mono); opacity: .8; }

.btoast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 8px;
  font: 500 13.5px/1 var(--sans); z-index: 90; max-width: 90vw;
}
.btoast--bad { background: var(--signal); }

@media (max-width: 600px) {
  .bcard__top { flex-direction: column; gap: 8px; }
  .bactions .bbtn { flex: 1 1 auto; }
  .bmsg time { flex-basis: 60px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Snooze is a decision about a date, not a fixed delay — "under contract with
 * another agent until October" is the case that matters. */
.snz { position: relative; display: inline-flex; }
.snz__menu {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: 8px; padding: 6px 8px; border-radius: 8px;
  background: var(--field); border: 1px solid var(--rule);
}
.snz__menu[hidden] { display: none; }
.snz__date {
  font: 400 12.5px/1 var(--sans); padding: 7px 8px; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
}

.bnote__hint { font: 400 11.5px/1.5 var(--sans); color: var(--ink-faint); align-self: center; }
.bdraft textarea.bnote { min-height: 56px; font-size: 13.5px; }

/* ---- Snooze menu -------------------------------------------------------- */
/* Loaded by every tab, so this styles the shared control from /actions.js. */
.snoozer { position: relative; display: inline-block; }

.snoozer__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  min-width: 13.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 20, 50, .18);
}

.snoozer__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  padding: 4px 8px 6px;
}

.snoozer__opt {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 14px;
  padding: 8px 9px;
  border-radius: 5px;
  cursor: pointer;
  color: inherit;
}
.snoozer__opt:hover,
.snoozer__opt:focus-visible { background: var(--hover, #eef2f7); outline: none; }

.snoozer__opt--go {
  background: var(--navy, #002868);
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin-top: 2px;
}
.snoozer__opt--go:hover { filter: brightness(1.12); background: var(--navy, #002868); }

.snoozer__opt--wake { color: var(--accentRed, #b22234); }

.snoozer__custom {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px 4px;
  border-top: 1px solid var(--line, #e2e8f0);
  margin-top: 3px;
}
.snoozer__custom span {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.snoozer__custom input {
  font: inherit;
  font-size: 14px;
  padding: 5px 6px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 5px;
  background: var(--card, #fff);
  color: inherit;
}

/* A sleeping card should read as set aside rather than as work. */
.bcard--snoozed { opacity: .62; }

/* ---- Add a note to Bigin ------------------------------------------------ */
.nb-wrap { position: relative; display: inline-block; }

.nb {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 40;
  width: min(24rem, 76vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 20, 50, .18);
}

.nb__text {
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 9px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
  background: var(--card, #fff);
  color: inherit;
  resize: vertical;
  min-height: 3.4rem;
}
.nb__text:focus-visible { outline: 2px solid var(--navy, #002868); outline-offset: 1px; }

.nb__row { display: flex; gap: 6px; justify-content: flex-end; }

/* A call with no Bigin contact has nowhere to put a note, so the button is not offered.
   Saying so beats a silent absence, which reads as a missing feature rather than a fact
   about that caller. */
.bnote-none {
  font-size: 12px;
  color: var(--muted, #64748b);
  align-self: center;
  font-style: italic;
}

/* --- New leads -------------------------------------------------------------
 *
 * The top of the page and the first work of the day. It has to read as a
 * different KIND of thing from the backlog beneath it, not a heavier version of
 * the same thing — otherwise it looks like the first page of one long list,
 * which is precisely the failure the split exists to fix.
 *
 * Red stays reserved for "this is waiting on you". The section frames itself in
 * navy and lets position, weight and the lane headings carry the urgency; only
 * the owed lane and the age-out warning are allowed to go red, because those
 * are the two things on this page a person is actually waiting on.
 */
.nlead {
  background: linear-gradient(var(--field), var(--card) 96px);
  border-bottom: 3px solid var(--navy);
}
.nlead__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 14px var(--pad) 4px;
}
.nlead__title {
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font: 600 17px/1 var(--sans); color: var(--navy);
}
.nlead__n {
  font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 9px;
}
.nlead__rule { margin: 0; font: 400 12px/1.45 var(--sans); color: var(--ink-soft); }
.nlead__rule .owed { color: var(--signal); font-weight: 600; }

/* Shown INSTEAD of the section when the new list is empty. An empty section
 * with a heading reads as a loading failure; a sentence reads as an answer. */
.nlead__clear {
  margin: 0; padding: 13px var(--pad); background: var(--card);
  border-bottom: 1px solid var(--rule);
  font: 400 13px/1.4 var(--sans); color: var(--ink-faint);
}

/* Website-form tally. Sits in the same bar but pushed to the far end and set
 * quieter than the list beside it: it is context for the week, not work. */
.nlead__tally {
  margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ntally__label {
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ntally__days {
  display: flex; gap: 9px; margin-left: 2px; padding-left: 10px;
  border-left: 1px solid var(--rule);
  font: 400 11px/1 var(--mono); color: var(--ink-faint);
}
.ntally__day b { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* A zero day is dimmed but never hidden — a gap in the strip would read as
 * "not measured" rather than "nobody submitted". */
.ntally__day--zero { opacity: .45; }

/* Lane headings. The lane is the instruction: "they replied, we owe an answer"
 * says what to do in a way that a position in a ranked list cannot. */
.nlane__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 12px var(--pad) 6px;
}
.nlane__n {
  min-width: 26px; text-align: center; padding: 4px 8px;
  font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums;
  background: var(--field); border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink);
}
.nlane__l { font: 600 13px/1 var(--sans); color: var(--ink); }
.nlane__w { font: 400 12px/1 var(--sans); color: var(--ink-faint); }

.nlane--owed .nlane__n { background: var(--signal-bg); border-color: var(--signal); color: var(--signal); }
.nlane--owed .nlane__l { color: var(--signal); }
/* Amber, not red: nobody is waiting on us here because nobody was ever told we
 * existed. It is a broken automation, which is a different alarm. */
.nlane--never_texted .nlane__n { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.nlane--never_texted .nlane__l { color: var(--warn); }

/* :not() rather than source order, so a new card that is ALSO waiting on us
 * keeps the red edge. Red outranks new; it always has on this page. */
.bcard--new:not(.bcard--owed) { border-left: 3px solid var(--navy); }

@media (max-width: 600px) {
  /* The tally stops being a right-hand column and becomes its own line, so the
   * heading and the rule keep the full width they need to stay readable. */
  .nlead__tally { margin-left: 0; width: 100%; padding-top: 4px; }
  .ntally__days { padding-left: 0; border-left: 0; width: 100%; }
}

/* Age pill — how long this person has been waiting, at the head of every card.
 *
 * Fixed width and tabular figures so a column of them can be scanned rather
 * than read. No colour grading by age: red here means "waiting on you" and
 * spending it on mere oldness would blunt it everywhere it is real. The single
 * variant is navy for a lead inside the new-lead window, which restates the
 * split the page already makes rather than adding a second scale. */
.bage {
  flex: none; min-width: 46px; padding: 5px 6px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--field); border: 1px solid var(--rule); color: var(--ink-soft);
}
.bage b { font: 600 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.bage__u { font: 400 9px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
/* Outranks `.bage b` on specificity rather than with !important. */
.bage b.bage__today {
  font: 600 10px/1.35 var(--sans); letter-spacing: .04em; text-transform: uppercase;
}
.bage--new { background: var(--navy); border-color: var(--navy); }
.bage--new b, .bage--new .bage__u { color: #fff; }

/* People who left this list because their agreement is out for signature.
 * Stated, never silent — a card that vanishes without explanation is worse than
 * the double-listing this replaced. */
.nlead__elsewhere {
  margin: 0; padding: 10px var(--pad) 14px;
  font: 400 12.5px/1.5 var(--sans); color: var(--ink-soft);
}
.nlead__elsewhere a { color: var(--royal); font-weight: 600; }

/* The five-minute clock. Red is spent only on a lead still waiting on a person
 * right now, which is what red means everywhere else here. A lead answered
 * late is history rather than a task, so it is stated and left grey. */
.sla { font-weight: 600; }
.sla--breach { color: var(--signal); }
.sla--run    { color: var(--warn); }
.sla--met    { color: var(--go); }
.sla--late   { color: var(--ink-faint); font-weight: 400; }

/* Queued for the next working morning. Neutral on purpose: nothing is wrong,
 * nobody is late, and the office is shut. */
.sla--hold { color: var(--ink-faint); font-weight: 400; }

/* Just arrived. The only lane that is good news: somebody is on the other end
 * right now. Navy rather than red — nothing is wrong yet, that is the point. */
.nlane--just_arrived .nlane__n { background: var(--navy); border-color: var(--navy); color: #fff; }
.nlane--just_arrived .nlane__l { color: var(--navy); }

/* A stat you can click. Snoozed cards leave every other view, so this is the
 * only way back to them and it has to look like a control, not a number. */
.bstat--go { cursor: pointer; border: 1px solid var(--rule); font: inherit; }
.bstat--go:hover { border-color: var(--navy); background: var(--card); }

/* "You are not on the main list, and here is the way back." */
.viewbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 11px var(--pad); background: var(--field);
  border-bottom: 1px solid var(--rule);
}
.viewbar__what { font: 400 13px/1.3 var(--sans); color: var(--ink-soft); }
.viewbar__what b { color: var(--ink); }
.viewbar .bbtn { margin-left: auto; }

/* The count you are currently looking at. */
.bstat--on { background: var(--navy); border-color: var(--navy); color: #fff; }
.bstat--on b { color: #fff; }

/* A card you woke by hand, floated to the top for a day. Navy rather than red:
 * you asked to see it again, nobody is waiting on you. */
.bcard__meta .woken { color: var(--navy); font-weight: 600; }

/* A destructive button waiting for its second click. Amber, and it disarms
 * itself after a few seconds so a stray click cannot leave one primed. */
.bbtn--arm { background: var(--warn) !important; color: #fff !important; border-color: var(--warn) !important; }

/* Snooze: pick a day, the time is 9am unless you say otherwise. */
.snoozer__row { display: flex; align-items: center; gap: 7px; padding: 4px 0 8px; flex-wrap: wrap; }
.snoozer__row input[type="date"],
.snoozer__row select {
  font: 400 13px/1 var(--sans); padding: 7px 8px;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink);
}
.snoozer__at, .snoozer__tz { font: 400 12px/1 var(--sans); color: var(--ink-faint); }
.snoozer__quick { display: flex; gap: 6px; padding-bottom: 9px; }
.snoozer__day {
  font: 400 12px/1 var(--sans); cursor: pointer; padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink-soft);
}
.snoozer__day:hover { border-color: var(--navy); color: var(--navy); }

/* They answered a message we sent. Green: it is good news and an opportunity,
 * not a demand. Red on this page stays reserved for "waiting on you". */
.bcard__meta .replied { color: var(--go); font-weight: 700; }

/* Reconciles this tab against the Bigin New Inquiry count. Lives directly under
   the stat row because that is where the mismatch gets noticed. */
.breconcile {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #667);
}
.breconcile b { color: var(--ink, #222); font-weight: 600; }