/* Toffee wallet balance chip.
   Its own stylesheet because the chip appears on three unrelated pages — the
   paywall, My Courses and the Library — and each loads a different bundle.
   Positioning stays with the host page; only the chip itself lives here. */

/* The chip's Turbo Frame must not become a box of its own, or it breaks the
   host page's layout — a flex row on the course pages, a float on the paywall. */
turbo-frame#toffee_balance {
  display: contents;
}

.toffee-balance {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--sl-teal-light);
  border-radius: var(--radius-full);
}

/* Nothing to show until the bridge controller links the wallet. Hidden rather
   than removed so the chip's space is reserved and the header does not jump
   when the balance arrives. */
.toffee-balance--empty {
  visibility: hidden;
}

.toffee-balance__mark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sl-teal-dark);
}

.toffee-balance__amount {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sl-charcoal);
}

/* "What is this?" affordance — the wallet is unfamiliar and the balance
   arrives unprompted, so the chip has to be able to explain itself. */
.toffee-balance__info {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1;
  font-size: 0.85rem;
  color: var(--sl-teal-dark);
  opacity: 0.65;
}

.toffee-balance__info:hover,
.toffee-balance__info:focus-visible {
  opacity: 1;
}

/* Header row on the course pages: page label left, chip hard right. */
.pc-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* The row owns the spacing now, so the label must not add its own. */
.pc-hero-top .pc-eyebrow {
  margin-bottom: 0;
}