/* Donate key in the top bar and its panel. The heart is the only warm
   colour on the bar, so the key reads as an invitation, not a control. */

.donate-slot { margin-left: auto; display: flex; align-items: center; }

.donate-key {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 6px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.donate-key svg { color: var(--bad); transition: color 0.15s, filter 0.15s; }
.donate-key:hover, .donate-key.on { border-color: rgba(226, 98, 91, 0.6); background: rgba(226, 98, 91, 0.1); }
.donate-key:hover svg, .donate-key.on svg { color: #ff7a70; filter: drop-shadow(0 0 4px rgba(255, 106, 88, 0.6)); }
.donate-key:focus-visible { outline: 2px solid var(--readout); outline-offset: 2px; }

.donate-meter {
  display: none;
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: #0a0d10;
  overflow: hidden;
  pointer-events: none;
}
.donate-key.has-meter .donate-meter { display: block; }
.donate-meter i { display: block; height: 100%; width: 0; background: var(--bad); transition: width 0.6s ease; }
.donate-key.goal-done .donate-meter i { background: var(--ok); }

/* panel */
.donate-pop {
  position: fixed;
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  font-size: 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.donate-pop a { color: inherit; }

.d-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.d-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.d-title svg { color: var(--bad); }
.d-close { margin-left: auto; padding: 0 7px; font: inherit; font-size: 1.1rem; line-height: 1.3; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; }
.d-close:hover { color: var(--text); border-color: var(--line); }
.d-note { margin-bottom: 8px; color: var(--muted); line-height: 1.4; }

.d-goal, .d-rows {
  padding: 8px 10px;
  background: #0a0d10;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.d-goal { margin-bottom: 8px; }
.d-ghead { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.d-gtag { padding: 0 5px; border-radius: 2px; background: var(--bad); color: #0a0d10;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.6; }
.d-gtitle { font-weight: 600; line-height: 1.3; }
.d-prog { height: 8px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.d-prog i { display: block; height: 100%; width: 0; transition: width 0.6s ease;
  background: repeating-linear-gradient(90deg, var(--bad) 0 5px, #a8382b 5px 6px); }
.d-prog.done i { background: repeating-linear-gradient(90deg, var(--ok) 0 5px, #3f9a5a 5px 6px); }
.d-gsum { display: flex; align-items: baseline; gap: 4px; margin-top: 5px; color: var(--muted); font-size: 0.8rem; }
.d-graised, .d-gpct { color: var(--readout); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.d-graised { font-size: 0.95rem; }
.d-gpct { margin-left: auto; }
.d-prog.done + .d-gsum .d-gpct { color: var(--ok); font-size: 0.7rem; letter-spacing: 0.05em; }
.d-gtext { margin-top: 6px; color: var(--muted); line-height: 1.45; }
.d-items { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); }
.d-it { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 0.8rem; }
.d-tick { flex: 0 0 12px; text-align: center; color: var(--muted); }
.d-it.done .d-tick { color: var(--ok); }
.d-itname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
a.d-itname:hover { text-decoration: underline; color: #fff; }
.d-it.done .d-itname { color: var(--muted); text-decoration: line-through; }
.d-itprice { color: var(--readout); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.75rem; }
.d-it.done .d-itprice { color: var(--muted); }

.d-links { display: flex; flex-direction: column; gap: 5px; }
.d-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.d-link span:first-child { flex: 1; }
.d-link:hover { background: #26313d; color: #fff; }
.d-link.svc-paypal { border-left-color: #0070ba; }
.d-link.svc-revolut { border-left-color: #6a5cff; }
.d-link.svc-kofi { border-left-color: #29abe0; }
.d-go { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.d-link:hover .d-go { color: var(--bad); }

.d-donors { margin-top: 10px; }
.d-tabs { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.d-dtitle { margin-right: auto; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; }
.d-tab { padding: 1px 8px; font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.d-tab:hover { color: var(--text); }
.d-tab.on { color: var(--readout); background: #0a0d10; }
.d-rows { padding: 2px 10px; }
.d-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.d-row:last-child { border-bottom: 0; }
.d-rank { flex: 0 0 20px; color: var(--muted); font-size: 0.75rem; }
.d-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-call { color: var(--readout); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem; text-decoration: none; }
a.d-call:hover { color: #fff; text-decoration: underline; }
.d-anon { color: var(--muted); font-style: italic; }
.d-amt { color: var(--ok); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8rem; }
.d-amt.hidden { color: var(--bad); font-family: inherit; }
.d-meta { flex: 1 0 100%; color: var(--muted); font-size: 0.7rem; }
.d-msg { flex: 1 0 100%; color: var(--muted); font-size: 0.78rem; font-style: italic; line-height: 1.35; overflow-wrap: anywhere; }
.d-empty { padding: 8px 0; color: var(--muted); text-align: center; }

@media (max-width: 700px) {
  .donate-key .donate-label { display: none; }
  .donate-key { padding: 5px 8px 7px; }
}