/* css/tip.css — the QR-only tip card. No fields, no checkout, no PII. */

.tip-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-fluid-sm);
  padding: var(--space-fluid-md);
}

.tip-copy {
  font-family: var(--font-serif);
  font-size: var(--text-title);
  max-width: 28ch;
  margin-bottom: var(--space-xs);
}

.qr-frame {
  display: inline-block;
  width: clamp(9rem, 26dvh, 16.25rem);
  padding: clamp(0.75rem, 2.5dvh, var(--space-md));
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-card);
  background: var(--color-surface-raised);
}

.qr-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 6px;
}

.tip-hint {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  max-width: 32ch;
}

.tip-footnote {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  opacity: 0.75;
}

/* ---- Tip self-report chip (js/cards/tip-card.js) -------------------------
 * Ambient and easy to ignore — never a payment field, never blocking the QR
 * itself. Same [hidden] + .is-visible + fade-in convention as the rest of
 * the app's overlays/toasts, just inline in the card's own flow rather than
 * fixed-positioned, since it lives inside the already-centered tip layout.
 */
.tip-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  opacity: 0;
  transition: opacity 320ms var(--ease-standard);
}

.tip-feedback[hidden] {
  display: none;
}

.tip-feedback.is-visible {
  opacity: 1;
}

.tip-feedback__question {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* .pill-toggle (components.css) already supplies the chip background,
 * border, and layout — this just re-centers it and drops its normal
 * margin-bottom, since here it's the last thing in a centered column
 * rather than sitting above a panel's main content. */
.tip-feedback__actions {
  align-self: center;
  justify-content: center;
  margin-bottom: 0;
}