/* ==========================================================================
   Sidebar donation panel, QR code and info tooltips
   ========================================================================== */

/* --------------------------------------------------------------------------
   Donation panel

   Sits in the sidebar between the navigation and the status footer. It reads
   as a distinct card rather than a strip of controls, but stays quieter than
   a dashboard panel — it is a standing offer, not a metric.
   -------------------------------------------------------------------------- */

.donate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius-lg);
  /* A brand-tinted wash from the top-right, the same device the donation
     card used when it lived on the Dashboard. */
  background:
    radial-gradient(
      18rem 12rem at 90% -10%,
      rgba(247, 147, 26, 0.09),
      transparent 70%
    ),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.donate__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.donate__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-dim);
  color: var(--brand-ink);
}

.donate__mark svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.donate__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

.donate__blurb {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   QR presentation

   The surrounding card is dark, to sit in the rail; the symbol itself keeps
   a light plate. Inverting a QR (light modules on dark) is outside what the
   spec assumes and many readers refuse it, so the card is themed and the
   code is left canonical.
   -------------------------------------------------------------------------- */

.donate__qr {
  display: grid;
  place-items: center;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  border: 1px solid var(--brand-border-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* No padding of its own. The SVG already carries the spec's 4-module quiet
   zone as white space inside its own viewBox, so padding here would simply
   double the margin and shrink the symbol. overflow:hidden rounds the
   plate's corners against the square SVG. */
.qr {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: var(--radius-sm);
  background: #ffffff;
  overflow: hidden;
}

/* Fills the plate: this is the primary donation path, and bigger modules
   scan more reliably. */
.qr__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 220px;
}

.qr__error {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  color: var(--text-inverse);
  font-size: var(--fs-2xs);
}

.qr__error-hint {
  color: #52514e;
}

/* --------------------------------------------------------------------------
   Address
   -------------------------------------------------------------------------- */

.donate__address-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
}

.donate__address {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--glass-border);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  text-align: center;
  user-select: all;
}

/* Only the expanded form needs to wrap; the shortened form is one line. */
.donate__address[data-expanded='true'] {
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.donate__toggle {
  padding: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

.donate__toggle:hover {
  color: var(--brand-ink);
}

.donate__toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Copy action
   -------------------------------------------------------------------------- */

.donate__copy {
  width: 100%;
}

.donate__action-icon {
  display: inline-flex;
}

.donate__action-icon svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Copy feedback: the label already changes to "Copied", so colour is
   reinforcement rather than the only signal. */
.donate__copy[data-state='success'] {
  background: var(--status-good);
  color: #04140e;
}

.donate__copy[data-state='error'] {
  background: var(--status-warning);
  color: var(--text-inverse);
}

/* On short viewports the panel gives up a little size, but never enough to
   drop below roughly 3.5 device pixels per module. Beyond this the sidebar
   scrolls instead. */
@media (max-height: 760px) {
  .donate {
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
  }

  .donate__blurb {
    display: none;
  }

  .qr__svg {
    max-width: 168px;
  }
}

/* --------------------------------------------------------------------------
   Info tooltip
   -------------------------------------------------------------------------- */

.infotip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  /* Above the card's own content; the card lifts on hover and forms a
     stacking context, so the bubble stays clear of neighbouring cards. */
  z-index: 21;
}

.infotip__trigger {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  color: var(--text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.infotip__trigger svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.infotip__trigger:hover {
  color: var(--brand-ink);
  background: var(--brand-dim);
}

.infotip__bubble {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  right: -4px;
  width: max-content;
  max-width: min(76vw, 280px);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--surface-overlay);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
}

.infotip__bubble[data-placement='bottom'] {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateY(-4px);
}

/* Reveal on pointer hover, on keyboard focus, and on explicit tap-toggle —
   so the description is reachable by every input method. */
.infotip:hover .infotip__bubble,
.infotip__trigger:focus-visible + .infotip__bubble,
.infotip[data-open='true'] .infotip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}