/* bsvsearch_tipping 1.3.5 (28 Oct 2026, Marquez) - where the tip ask sits on a
   free Creations article.
   1. Wide screens (1150px+): a card at the top of the side panel, QR as wide
      as the panel.
   2. Every screen: the box at the end, now straight after the last paragraph
      and drawn as a card.
   3. Narrow screens: "Free to read · Tip the writer ↓" under the writer's
      name, jumping to the box at the end.
   A tip card is a money surface: white ground and BSVSearch's own ink in every
   reader theme (Light, Sepia, Dark, Night), like the subscription card. */

.reader .bsvtip-card,
.reader .tipping-block.bsvtip-end {
  color-scheme: light;
  background: #ffffff;
  border: 1px solid #DCE3EC;
  border-radius: 12px;
  color: #1E2C3D;
  font-family: var(--r-sans);
  box-shadow: 0 1px 2px rgba(20, 38, 62, .05);
}

/* 1. The side-panel card --------------------------------------------------- */
.reader-rail .bsvtip-aside,
.reader-rail > div > div:has(> .bsvtip-aside) { display: none; }
@media (min-width: 1150px) {
  .reader-rail > div > div:has(> .bsvtip-aside) { display: block; }
  .reader-rail .bsvtip-aside { display: block; margin: 0 0 16px; }
}
.reader .bsvtip-card { padding: 16px; }
.reader .bsvtip-card .bsvtip-title {
  font-family: var(--r-sans);
  font-size: 1rem; line-height: 1.3; font-weight: 700;
  color: #274B79;
  margin: 0 0 6px; padding: 0; border: 0;
  text-transform: none; letter-spacing: 0;
}
.reader .bsvtip-card .bsvtip-lead {
  font-family: var(--r-sans);
  font-size: .8125rem; line-height: 1.45;
  color: #52627A;
  margin: 0 0 12px;
}
.reader .bsvtip-card .ordinal-qr {
  display: block;
  width: 100%; max-width: none;
  height: auto; max-height: none;
  margin: 0; padding: 10px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #DCE3EC; border-radius: 8px;
}
.reader .bsvtip-card .ordinal-qr :is(svg, img) {
  display: block;
  width: 100%; height: auto;
  max-width: none; max-height: none;
  aspect-ratio: 1 / 1;
}
.reader .bsvtip-card .bsvtip-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px; line-height: 1.4; letter-spacing: -.2px;
  word-break: break-all; text-align: center;
  color: #1E2C3D; background: #F5F7FA;
  border-radius: 6px;
  margin: 12px 0 8px; padding: 8px 4px;
}
.reader .bsvtip-card .bsvtip-copy {
  display: block; width: 100%; box-sizing: border-box;
  font: 600 .8125rem/1.2 var(--r-sans);
  color: #ffffff; background: #14263E;
  border: 0; border-radius: 8px;
  padding: 10px; cursor: pointer;
}
.reader .bsvtip-card .bsvtip-copy[hidden] { display: none; }
.reader .bsvtip-card .bsvtip-copy:hover { background: #274B79; }
.reader .bsvtip-card .bsvtip-copy:focus-visible { outline: 2px solid #175CB8; outline-offset: 2px; }

/* 2. The box at the end ----------------------------------------------------- */
.reader .tipping-block.bsvtip-end {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 22px 24px;
  margin: 28px 0 32px;
  scroll-margin-top: 80px;
}
.reader .tipping-block.bsvtip-end > * { grid-column: 2; }
.reader .tipping-block.bsvtip-end > .ordinal-qr {
  grid-column: 1; grid-row: 1 / span 5;
  width: 150px; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0;
}
.reader .tipping-block.bsvtip-end > .ordinal-qr :is(svg, img) {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  max-width: none; max-height: none;
}
.reader .tipping-block.bsvtip-end .tipping-title {
  color: #274B79; margin: 0 0 8px; padding: 0; border: 0;
}
.reader .tipping-block.bsvtip-end .ordinal-address-text {
  font-size: 13px; word-break: break-all; color: #1E2C3D;
}
.reader .tipping-block.bsvtip-end .tipping-stats {
  font: 600 14px/1.45 var(--r-sans); color: #1E2C3D; margin: 10px 0 0;
}
.reader .tipping-block.bsvtip-end .tipping-updated {
  font: 14px/1.45 var(--r-sans); color: #52627A; margin: 4px 0 0;
}
.reader .tipping-block.bsvtip-end .ordinal-payment-note { color: #7A889B; margin-top: 10px; }

/* On a phone the QR goes full width (capped) above the text, centred. */
@media (max-width: 640px) {
  .reader .tipping-block.bsvtip-end { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .reader .tipping-block.bsvtip-end > *,
  .reader .tipping-block.bsvtip-end > .ordinal-qr { grid-column: 1; grid-row: auto; }
  .reader .tipping-block.bsvtip-end > .ordinal-qr { width: 100%; max-width: 300px; margin: 4px auto 14px; }
}

/* 3. The nudge under the writer's name -------------------------------------- */
.reader .bsvtip-nudge {
  font-family: var(--r-sans);
  font-size: .9375rem; line-height: 1.4;
  color: var(--r-soft);
  margin: 10px 0 0;
}
.reader .bsvtip-nudge a {
  color: var(--r-link); font-weight: 700;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
@media (min-width: 1150px) {
  .reader .bsvtip-nudge,
  .reader-highlighted div:has(> .bsvtip-nudge) { display: none; }
}