/* ===========================================================================
   NOIR CHROMA — tags.php
   Overrides assets/css/tags-page.css (terse .th/.ts/.ix/.tg-*/.tp names).
   =========================================================================== */

/* tags-page.css sets `body { background: #f0f2f5 }` — one of the four
   different "page background" values the old codebase carried. */
body[data-skin="noir"] { background: var(--n-bg); }


/* ---- 1. Header band ----------------------------------------------------- */

body[data-skin="noir"] .th {
  background: var(--n-ink-1);
  border-bottom: 1px solid var(--n-border);
  position: relative;
}
body[data-skin="noir"] .th::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--n-grad-line);
  opacity: .5;
}
body[data-skin="noir"] .th-text {
  color: var(--n-fg);
  font-family: var(--n-font-display);
}
body[data-skin="noir"] .th-nums { color: var(--n-text-muted); }
body[data-skin="noir"] .th-n {
  color: var(--n-fg);
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-bold);
}


/* ---- 2. Filter box ------------------------------------------------------ */

body[data-skin="noir"] .ts {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  transition: border-color var(--n-dur) var(--n-ease), box-shadow var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .ts:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--n-pink), var(--n-glow);
}
body[data-skin="noir"] .ts-i {
  background: transparent;
  color: var(--n-fg);
  -webkit-text-fill-color: var(--n-fg);
  caret-color: var(--n-pink);
  border: 0;
  font-size: max(16px, var(--n-fz-base));
}
body[data-skin="noir"] .ts-i::placeholder {
  color: var(--n-text-dim);
  -webkit-text-fill-color: var(--n-text-dim);
  opacity: 1;
}
body[data-skin="noir"] .ts-x {
  color: var(--n-text-dim);
  background: transparent;
  border: 0;
}
body[data-skin="noir"] .ts-x:hover { color: var(--n-fg); }


/* ---- 3. A–Z index ------------------------------------------------------- */

/* tags-page.css:169 gives the index bar a solid #ffffff background. */
body[data-skin="noir"] .ix {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  box-shadow: none;
}

body[data-skin="noir"] .ix a {
  color: var(--n-text-muted);
  border: 1px solid transparent;
  border-radius: var(--n-r-xs);
  transition: color var(--n-dur-fast) var(--n-ease), border-color var(--n-dur-fast) var(--n-ease);
}
body[data-skin="noir"] .ix a:hover {
  color: var(--n-fg);
  border-color: var(--n-border-strong);
}


/* ---- 4. Letter sections ------------------------------------------------- */

body[data-skin="noir"] .tg-sec {
  background: var(--n-surface);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-md);
  box-shadow: none;
  overflow: hidden;
}
body[data-skin="noir"] .tg-sec.is-open { border-color: var(--n-border-strong); }

body[data-skin="noir"] .tg-h {
  background: transparent;
  border: 0;
  position: relative;
  transition: background var(--n-dur-fast) var(--n-ease);
}
body[data-skin="noir"] .tg-h:hover { background: var(--n-surface-2); }
body[data-skin="noir"] .tg-h::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--n-grad);
  transform: scaleX(0);
  transform-origin: var(--n-grad-origin, left);
  transition: transform var(--n-dur) var(--n-ease-emph);
}
body[data-skin="noir"] .tg-h[aria-expanded="true"]::after { transform: scaleX(1); }
html[dir="rtl"] body[data-skin="noir"] .tg-h::after { transform-origin: right; }

/* The letter is the page's typographic anchor. */
body[data-skin="noir"] .tg-letter {
  font-family: var(--n-font-display);
  font-weight: var(--n-fw-black);
  font-size: var(--n-fz-2xl);
  color: var(--n-fg);
  line-height: 1;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body[data-skin="noir"] .tg-letter {
    background: var(--n-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

body[data-skin="noir"] .tg-preview { color: var(--n-text-dim); }
body[data-skin="noir"] .tg-preview-tag { color: var(--n-text-muted); }
body[data-skin="noir"] .tg-count {
  color: var(--n-text-dim);
  background: var(--n-surface-2);
  border-radius: var(--n-r-pill);
}
body[data-skin="noir"] .tg-arr {
  color: var(--n-text-dim);
  transition: transform var(--n-dur) var(--n-ease), color var(--n-dur) var(--n-ease);
}
body[data-skin="noir"] .tg-h[aria-expanded="true"] .tg-arr { color: var(--n-accent); }

body[data-skin="noir"] .tg-body { border-top: 1px solid var(--n-border); }


/* ---- 5. Tag pills ------------------------------------------------------- */

body[data-skin="noir"] .tp {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  border-radius: var(--n-r-pill);
  color: var(--n-text);
  min-height: 34px;
  transition: color var(--n-dur-fast) var(--n-ease),
              border-color var(--n-dur-fast) var(--n-ease),
              background var(--n-dur-fast) var(--n-ease);
}
body[data-skin="noir"] .tp:hover {
  color: var(--n-fg);
  background: var(--n-surface-hover);
  border-color: var(--n-accent);
}
body[data-skin="noir"] .tp-c { color: var(--n-text-dim); }

body[data-skin="noir"] .tg-empty { color: var(--n-text-dim); }


/* ---- 6. Mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .tg-letter { font-size: var(--n-fz-xl); }
  body[data-skin="noir"] .tp { min-height: 38px; }
  body[data-skin="noir"] .tp:hover {
    color: var(--n-text);
    background: var(--n-surface-2);
    border-color: var(--n-border);
  }
  body[data-skin="noir"] .tp:active { background: var(--n-surface-hover); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .tp,
  body[data-skin="noir"] .tg-h,
  body[data-skin="noir"] .tg-h::after,
  body[data-skin="noir"] .tg-arr { transition: none; }
}