/* Same quiet mesh at every depth, including mobile. No perpetual fake activity. */
.cs-crossl.relation-web { stroke:#c6c4af; stroke-width:1.15; stroke-opacity:.52; stroke-dasharray:none; }
.cs-crossl.relation-web.suggested { stroke-dasharray:2 6; }
.cs-m-calm .relation-web { opacity:.35; }
.cs-m-live .relation-web { opacity:.7; }
.cs-m-links .relation-web { stroke-opacity:.7; }
.cs-crossl.relation-web.on { stroke:var(--sun); }
.relation-editor { width:min(760px,calc(100vw - 24px)); max-height:88dvh; overflow:auto; }
.relation-heading,.relation-tabs { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.relation-editor p,.relation-row small { color:var(--muted,#b9b5a8); font-size:12px; line-height:1.5; }
.relation-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.relation-form select,.relation-form input { width:100%; min-width:0; padding:9px; background:#20232a; color:#eee7d7; border:1px solid #555149; border-radius:8px; }
.relation-form input,.relation-message { grid-column:1/-1; }
.relation-row { display:flex; gap:8px; align-items:center; border-bottom:1px solid #ffffff15; padding:12px 0; }
.relation-row>div { flex:1; min-width:0; overflow-wrap:anywhere; }
.relation-row small { display:block; }
.relation-tabs { justify-content:flex-start; }
.relation-tabs [aria-pressed=true] { border-color:#d2af76; }
@media(max-width:600px) { .relation-row { flex-wrap:wrap; } .relation-row>div { flex-basis:100%; } .relation-form { grid-template-columns:1fr; } }

.cs-crossl.relation-web.type-primary { stroke:var(--sun); stroke-width:1.8; }
.cs-m-live .relation-recent { animation:relation-receipt 1.8s ease-out 1; }
@keyframes relation-receipt { from {stroke:#fff3c6;stroke-width:3;stroke-opacity:1} to {stroke-width:1.15;stroke-opacity:.52} }
@media(prefers-reduced-motion:reduce) { .cs-m-live .relation-recent {animation:none} }
body.reduced .relation-recent {animation:none}

#links .relation-primary {stroke-width:1.8;stroke:#d7bb85}