/* ===========================================================================
   NOIR CHROMA — stories.php
   Overrides assets/css/stories-page.css. The story cards themselves are
   .behind-* and live in index-page.css, which stories.php also loads
   (stories.php:117) — both skin files are therefore linked on this page.
   =========================================================================== */

body[data-skin="noir"] .stories-wrap { background: var(--n-bg); }

body[data-skin="noir"] .stories-breadcrumb,
body[data-skin="noir"] .stories-breadcrumb a { color: var(--n-text-dim); }
body[data-skin="noir"] .stories-breadcrumb a:hover { color: var(--n-text-muted); }

body[data-skin="noir"] .stories-header {
  border-bottom: 1px solid var(--n-border);
  position: relative;
}
body[data-skin="noir"] .stories-header h1 {
  font-family: var(--n-font-display);
  font-size: var(--n-fz-3xl);
  color: var(--n-fg);
  letter-spacing: -.02em;
}
body[data-skin="noir"] .stories-header p { color: var(--n-text-muted); }
body[data-skin="noir"] .stories-count { color: var(--n-text-dim); }


/* ---- Filter chips ------------------------------------------------------- */

body[data-skin="noir"] .stories-filters { gap: var(--n-s2); }

body[data-skin="noir"] .stories-chip {
  background: var(--n-surface-2);
  border: 1px solid var(--n-border);
  color: var(--n-text-muted);
  border-radius: var(--n-r-pill);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  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"] .stories-chip:hover {
  color: var(--n-fg);
  border-color: var(--n-border-strong);
  background: var(--n-surface-hover);
}
body[data-skin="noir"] .stories-chip.active {
  background: var(--n-grad);
  color: var(--n-on-accent);
  -webkit-text-fill-color: var(--n-on-accent);
  border-color: transparent;
  font-weight: var(--n-fw-semi);
}
body[data-skin="noir"] .chip-count {
  color: var(--n-text-dim);
  opacity: .85;
}
body[data-skin="noir"] .stories-chip.active .chip-count {
  color: var(--n-on-accent);
  opacity: .7;
}

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

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


/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 900px) {
  body[data-skin="noir"] .stories-header h1 { font-size: var(--n-fz-2xl); }
  body[data-skin="noir"] .stories-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: var(--n-s2);
    margin-inline: calc(var(--n-gutter) * -1);
    padding-inline: var(--n-gutter);
  }
  body[data-skin="noir"] .stories-filters::-webkit-scrollbar { display: none; }
  body[data-skin="noir"] .stories-chip { flex: 0 0 auto; min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="noir"] .stories-chip { transition: none; }
}