/* Tag pills site-wide: a bright neon tint in dark mode instead of the theme's murky green. */
[data-theme="dark"] {
  --tag-gradient: linear-gradient(135deg, rgba(11, 224, 82, .10) 0%, rgba(255, 53, 255, .10) 100%);
  --tag-text: #8dffb5;
}
[data-theme="dark"] .post-tag-vaporwave { border-color: rgba(11, 224, 82, .4); }
[data-theme="light"] .tags-title { background: linear-gradient(90deg, #ff006b, #ff7f50); -webkit-background-clip: text; background-clip: text; }

/* Tags index and single-tag pages. */
.tags-index { max-width: 1100px; }
.tags-hero { text-align: center; padding: 3rem 0 2.5rem; }
.tags-kicker { margin: 0 0 .5rem; font-family: 'JetBrains Mono', monospace; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-tertiary); }
.tags-kicker a { color: inherit; text-decoration: none; }
.tags-kicker a:hover { color: var(--accent-primary); }
/* A cyan midpoint keeps the green-to-pink blend vivid; inline-block fits the gradient to the word. */
.tags-title { display: inline-block; margin: 0; padding: 0 .05em .08em; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -.03em; background: linear-gradient(90deg, #0be052, #00e5ff 50%, #ff35ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tags-title .tag-hash { -webkit-text-fill-color: var(--text-muted); opacity: .6; margin-right: .1em; }
.tags-sub { margin: .9rem 0 0; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: .9rem; }

/* Tags index: a single readable list, one row per tag. */
.tag-list { max-width: 720px; margin: 0 auto 3.5rem; padding: 0; list-style: none; border-top: 1px solid var(--border-color); }
.tag-list li { border-bottom: 1px solid var(--border-color); }
.tag-row { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 2.5rem; align-items: center; gap: 1.25rem; padding: .95rem .9rem; border-radius: 10px; color: var(--text-primary); text-decoration: none; transition: background .2s ease, color .2s ease; }
.tag-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600; }
.tag-hash { color: var(--accent-tertiary); }
.tag-row-bar { height: 4px; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.tag-row-bar span { display: block; height: 100%; border-radius: inherit; background: var(--btn-gradient); opacity: .75; transition: opacity .2s ease, box-shadow .2s ease; }
.tag-row-count { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--accent-primary); }
.tag-row:hover { background: rgba(128, 128, 128, .08); }
.tag-row:hover .tag-row-name { color: var(--accent-primary); }
.tag-row:hover .tag-row-bar span { opacity: 1; box-shadow: 0 0 10px var(--glow-color); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Related tags and the back link on single-tag pages. */
.tag-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: 0 auto 2.5rem; }
.tag-related-label { margin-right: .4rem; font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.tag-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border: 1px solid var(--border-color); border-radius: 999px; background: var(--tag-gradient); color: var(--tag-text); font-size: .85rem; text-decoration: none; transition: all .25s ease; }
.tag-chip span { font-size: .72rem; color: var(--text-muted); }
.tag-chip:hover { border-color: var(--accent-primary); color: var(--accent-primary); box-shadow: 0 0 14px var(--glow-color); }
.tags-back { display: flex; justify-content: center; margin: 2.5rem 0 1rem; }

@media (max-width: 600px) {
  .tags-hero { padding: 2rem 0 1.75rem; }
  .tag-row { grid-template-columns: minmax(0, 1fr) 3.5rem 2rem; gap: .9rem; padding: .85rem .5rem; }
  .tag-row-name { white-space: normal; }
}
