/* The buyback instrument, in FAM's language rather than the public site's.
   Hard 2px frames, no radius, offset shadows, warm palette, JetBrains Mono for the data.
   It reuses the slab tilt that app.js already arms, so the depth here is layered translateZ
   on top of a convention that exists rather than a second parallax fighting it.
   Theme aware by construction: every colour is a FAM variable, so light and dark both work. */

.bbi {
  transform-style: preserve-3d;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 12px 0 10px;
}

/* ---- charge chamber ---- */

.bbi-well {
  position: relative;
  border: 2px solid var(--frame);
  background: var(--well);
  overflow: hidden;
  min-height: 150px;
  transform: translateZ(6px);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.bbi-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--bbi-fill, 0%);
  min-height: 4px;
  background: var(--orange);
  transition: height 1s cubic-bezier(.2, .7, .2, 1);
}

/* The charge is accumulating, so its surface moves. Slow, and it stops on request. */
.bbi-fill::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--ink);
  opacity: .85;
  animation: bbiBreathe 3.4s ease-in-out infinite;
}

@keyframes bbiBreathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* Graduations, hard lines rather than a soft gradient, to match the house edges. */
.bbi-well::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 15px);
  pointer-events: none;
}

.bbi-pct {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%) translateZ(10px);
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 8px var(--well), 0 0 4px var(--well);
}

/* ---- readout ---- */

.bbi-read { transform: translateZ(14px); }

.bbi-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--faint);
  margin: 0 0 5px;
}

.bbi-clock {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.bbi-seg { display: flex; align-items: baseline; gap: 3px; }

.bbi-seg b {
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1;
  color: var(--ink);
  display: inline-block;
  transform: translateZ(10px);
}

.bbi-seg i {
  font-style: normal;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: .08em;
}

.bbi-sep { font-size: clamp(18px, 5vw, 26px); color: var(--hair2); line-height: 1; }

/* The seconds place is the only thing that moves unprompted, and only on a change. */
.bbi-seg.tick b { animation: bbiTick .45s cubic-bezier(.2, .7, .2, 1); }

@keyframes bbiTick {
  0%   { transform: translateZ(10px); color: var(--ink); }
  30%  { transform: translateZ(22px); color: var(--orange); }
  100% { transform: translateZ(10px); color: var(--ink); }
}

.bbi-state {
  font-family: var(--mono);
  font-size: clamp(17px, 5vw, 24px);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.15;
}

.bbi-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 2px solid var(--hairline);
}

.bbi-fig b {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bbi-fig span {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--faint);
}

.bbi-links {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.bbi-warn {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--orange);
}

@media (max-width: 560px) {
  .bbi { grid-template-columns: 62px 1fr; gap: 12px; }
  .bbi-well { min-height: 120px; }
  .bbi-fig b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bbi-fill { transition: none; }
  .bbi-fill::after { animation: none; opacity: .8; }
  .bbi-seg.tick b { animation: none; }
}