/* squeez.in link preview card (assets/preview.js). The card keeps its own dark palette, so it reads
   the same on the home page, the preview page and in either theme. */
.pv {
  --pv-bg: #17164A; --pv-line: #2B2766; --pv-ink: #F4EEE2; --pv-muted: #B9C3F2; --pv-dim: #8E93C4;
  --pv-ok: #7FE0BC; --pv-warn: #FFB3C6; --pv-bad: #FF9C9C; --pv-violet: #8C7CFF; --pv-blue: #BCD2FF;
  position: relative; width: 100%; max-width: 560px; box-sizing: border-box;
  background: var(--pv-bg); color: var(--pv-ink); border: 1px solid var(--pv-line); border-radius: 14px;
  padding: 18px 18px 16px; font: 15px/1.5 'Instrument Sans', system-ui, sans-serif; text-align: left;
}
.pv * { box-sizing: border-box; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pv-label { font: 600 11px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-muted); }
.pv-chip { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.3 'JetBrains Mono', ui-monospace, monospace; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--pv-line); color: var(--pv-muted); background: rgba(43, 39, 102, 0.45); white-space: nowrap; }
.pv-chip.pv-ok { color: var(--pv-ok); border-color: rgba(127, 224, 188, 0.4); }
.pv-chip.pv-warn { color: var(--pv-warn); border-color: rgba(255, 179, 198, 0.45); }
.pv-chip.pv-bad { color: var(--pv-bad); border-color: rgba(255, 156, 156, 0.45); }

/* The route: short link, redirects, destination. A dot runs each leg. */
.pv-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 14px; }
.pv-node { font: 500 12px/1.3 'JetBrains Mono', ui-monospace, monospace; padding: 5px 9px; border-radius: 8px; background: #22205A; color: var(--pv-ink); max-width: 100%; overflow-wrap: anywhere; }
.pv-node.pv-short { background: var(--pv-violet); color: #0E0C27; font-weight: 600; }
.pv-node.pv-dest { background: #22205A; border: 1px solid var(--pv-blue); }
.pv-node.pv-hop { color: var(--pv-muted); }
.pv-leg { position: relative; flex: 1 1 14px; min-width: 14px; max-width: 46px; height: 2px; margin: 0 4px; background: linear-gradient(90deg, var(--pv-violet), var(--pv-blue)); opacity: 0.6; }
.pv-leg::after { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-blue); box-shadow: 0 0 8px var(--pv-violet); animation: pv-run 1.8s cubic-bezier(.4,0,.2,1) infinite; animation-delay: var(--d, 0s); }
@keyframes pv-run { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

.pv-domain { margin: 0; font: 800 clamp(26px, 6vw, 36px)/1.1 'Funnel Display', system-ui, sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--pv-ink); }
.pv-puny { margin: 4px 0 0; font: 13px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--pv-dim); overflow-wrap: anywhere; }
.pv-url { margin: 8px 0 0; font: 13px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--pv-muted); overflow-wrap: anywhere; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.pv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 14px; }
.pv-facts dt { color: var(--pv-dim); }
.pv-facts dd { margin: 0; color: var(--pv-ink); overflow-wrap: anywhere; }
.pv-warn, .pv-danger, .pv-note { margin: 12px 0 0; font-size: 14px; border-radius: 8px; padding: 8px 10px; }
.pv-warn { background: rgba(255, 179, 198, 0.12); color: var(--pv-warn); }
.pv-danger { background: rgba(255, 156, 156, 0.14); color: var(--pv-bad); font-weight: 600; }
.pv-note { color: var(--pv-muted); background: rgba(43, 39, 102, 0.4); }
.pv-note.pv-err { color: var(--pv-warn); }

.pv-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border-radius: 12px; font: 700 17px/1 'Funnel Display', system-ui, sans-serif; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.pv-open { background: var(--pv-violet); color: #0E0C27; }
.pv-open:hover, .pv-open:focus-visible { background: var(--pv-blue); }
.pv-open.is-off { background: #22205A; color: var(--pv-dim); cursor: not-allowed; }
.pv-copy { background: transparent; color: var(--pv-ink); border-color: var(--pv-line); }
.pv-copy:hover, .pv-copy:focus-visible { border-color: var(--pv-blue); }
.pv-btn:focus-visible { outline: 2px solid var(--pv-blue); outline-offset: 3px; }
.pv-live { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; color: var(--pv-muted); }
.pv-foot { margin: 10px 0 0; font: 12px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--pv-dim); }
.pv[aria-busy="true"] { opacity: 0.8; }

@media (max-width: 420px) { .pv { padding: 16px 14px 14px; } .pv-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pv-leg::after { animation: none; left: 50%; opacity: 1; transform: translateX(-50%); } }

/* The preview page (/p/<code>): spacing around the card. */
.pv-code { margin: 14px 0 0; font-size: 15px; }
.pv-slot { margin: 16px 0 22px; max-width: 560px; }
.pv-back { margin-top: 18px; }

/* How this link looks when shared: the destination's social card (preview.js, shareNode). */
.pv-share { margin: 18px 0 0; }
.pv-share-kicker { margin: 0 0 8px; font: 600 11px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pv-muted); }
.pv-share-kicker-2 { margin-top: 18px; }
.pv-card-frame { position: relative; border: 1px solid var(--pv-line); border-radius: 12px; overflow: hidden; background: #1E1C57; }
.pv-card-frame::before, .pv-card-frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--pv-blue); pointer-events: none; z-index: 1; }
.pv-card-frame::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.pv-card-frame::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-color: var(--pv-violet); }
.pv-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #22205A; }
.pv-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-card-media.is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(188, 210, 255, 0.16) 50%, transparent 70%); background-size: 200% 100%; animation: pv-shimmer 1.4s ease-in-out infinite; }
@keyframes pv-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.pv-card-fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: radial-gradient(circle at 30% 20%, rgba(140, 124, 255, 0.35), transparent 60%), #22205A; }
.pv-card-mono { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--pv-violet); color: #0E0C27; font: 800 22px/1 'Funnel Display', system-ui, sans-serif; }
.pv-card-fallback-domain { max-width: 90%; font: 13px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--pv-muted); text-align: center; overflow-wrap: anywhere; }
.pv-card-body { padding: 12px 14px 14px; }
.pv-card-title { margin: 0; font: 700 17px/1.3 'Funnel Display', system-ui, sans-serif; color: var(--pv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pv-card-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--pv-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pv-card-site { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font: 12px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--pv-dim); min-width: 0; }
.pv-card-fav { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; }
.pv-card-site .pv-card-mono { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.pv-card-sitename { font-weight: 600; color: var(--pv-muted); }
.pv-card-domain { overflow-wrap: anywhere; }
.pv-share-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.pv-share-facts dt { color: var(--pv-dim); }
.pv-share-facts dd { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--pv-ink); overflow-wrap: anywhere; min-width: 0; }
.pv-swatch { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--pv-line); }
@media (prefers-reduced-motion: reduce) { .pv-card-media.is-loading::after { animation: none; background: none; } }
@media (max-width: 420px) { .pv-share-facts { grid-template-columns: 1fr; gap: 0 0 10px; } .pv-share-facts dt { margin-top: 2px; } }

.pv-card-note { margin: 10px 2px 0; font-size: 14px; line-height: 1.5; color: var(--muted, #B9C3F2); }