/* Pin push and the "Läuft bald aus" section (2026-11-12). Loaded after pin-comments.css, uses theme.css tokens. */
.pin-push {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 33px; padding: 6px 11px; border: 0; border-radius: 10px;
  background: var(--accent-soft, rgba(255, 158, 87, .14)); color: var(--accent); font: 700 12px/1 var(--font); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.pin-push:hover { background: rgba(255, 158, 87, .24); transform: translateY(-1px); }
.pin-push:disabled { opacity: .6; cursor: progress; }
.pin-push b { font-weight: 800; padding-left: 6px; border-left: 1px solid currentColor; opacity: .8; }
.pin-push.is-done { background: var(--surface-2); color: var(--muted); cursor: default; }
.pin-push.is-done:hover { transform: none; background: var(--surface-2); }
.pin-push.is-own { background: transparent; color: var(--muted); cursor: default; padding-left: 4px; }
.push-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pin-push:not(.is-done):not(.is-own):hover .push-icon { animation: push-lift .5s var(--ease); }
@keyframes push-lift { 50% { transform: translateY(-2px); } }

.pin-section { margin-bottom: 22px; }
.pin-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 10px; }
.pin-section-head h2 { font: 700 15px/1.2 var(--font); margin: 0; letter-spacing: -.2px; color: var(--ink); }
.pin-section-head h2 span { color: var(--subtle); font-weight: 600; margin-left: 4px; }
.pin-section-head p { margin: 0; font-size: 12px; color: var(--muted); }
.pin-section.is-ending { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 158, 87, .07), rgba(255, 158, 87, 0) 70%); }
.pin-section.is-ending .pin-section-head { margin-top: 0; }
.pin-section.is-ending h2 { color: var(--accent); }

@media (max-width: 730px) {
  .pin-actions .pin-push { flex: 1; justify-content: center; }
  .pin-actions:has(.pin-push) .comment-toggle { flex: 1; width: auto; }
  .pin-section.is-ending { padding: 10px; margin-left: -4px; margin-right: -4px; }
}
@media (prefers-reduced-motion: reduce) { .pin-push, .push-icon { transition: none; animation: none !important; } }