/* P2-76: the Library's third list, Stories, beside Games and Quizzes. Linked after css/library.css. */

/* ---------- The switch: Games · Quizzes · Stories ---------- */
/* Three equal tabs; the highlight sits under the chosen one (js/library.js sets one position class per view). */
.nx-view { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(480px, 100%); }
.nx-view-pill { width: calc((100% - 8px) / 3); }
.nx-view.is-at-quizzes .nx-view-pill { transform: translateX(100%); }
.nx-view.is-at-stories .nx-view-pill { transform: translateX(200%); }
/* Labels may wrap (the count goes under the word) so Georgian and Russian fit on a small phone */
.nx-view-tab { min-width: 0; flex-wrap: wrap; gap: 2px 6px; padding: 4px 6px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .nx-view-tab { font-size: 0.9em; padding: 4px 3px; gap: 2px 4px; }
  .nx-view-n { min-width: 0; padding: 2px 5px; }
}

/* The quiet hint under the switch: small, plain, faded in and out (opacity only) */
.nx-view-row { flex-direction: column; align-items: center; }
.nx-view-hint { margin: 8px 0 0; max-width: 100%; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--muted); text-align: center; opacity: 0; transition: opacity 0.3s ease; }
.nx-view-hint.is-on { opacity: 1; }

/* In the Stories list a single track doesn't apply: only "From the book" and "This week" stay */
.nx-lib.is-stories .nx-track-chips .nx-chip:not(.nx-chip-book):not(.nx-chip-week) { display: none; }

/* ---------- Story cards: the quiz cards' look ---------- */
.nx-stories { border-top: 0; }
.nx-story-tonight:empty { display: none; }
.nx-story-grid.is-one { grid-template-columns: minmax(0, 560px); }
.nx-story .nx-quiz-icon { color: #fff; }
.nx-story-week { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--muted); }
.nx-story-tag { display: inline-flex; align-items: center; margin: 8px 6px 0 0; padding: 3px 9px; border-radius: 999px; background: var(--navy); border: 1.5px solid var(--navy); font-size: 12px; font-weight: 700; color: var(--yellow); }
.nx-story.is-tonight { background: var(--yellow); box-shadow: 6px 6px 0 var(--navy); }
.nx-story.is-tonight .nx-story-week, .nx-story.is-tonight .nx-quiz-meta { color: var(--navy); }

/* ---------- Reduce Motion: no transforms anywhere; the highlight stands under its tab, colours still ease ---------- */
@media (prefers-reduced-motion: reduce) {
  .nx-view .nx-view-pill { transform: none !important; }
  .nx-view.is-at-quizzes .nx-view-pill { left: calc(4px + (100% - 8px) / 3); }
  .nx-view.is-at-stories .nx-view-pill { left: calc(4px + (100% - 8px) * 2 / 3); }
  .nx-lib .nx-story:hover, .nx-lib .nx-story:focus-visible, .nx-lib .nx-story:active { transform: none; }
}