/*
 * NSC v3.0.0 — Reddit-shape feed CSS
 *
 * Loaded only when the v3 feed flag is on (admin Settings →
 * Posting → Feed card design). Layered ON TOP of community.css —
 * adds new selectors, doesn't override v2 styles, so toggling
 * back to v2 is instant.
 *
 * AAA contrast throughout (verified against #173404 NOUN green
 * palette).
 *
 * Mobile-first. Vote arrows reflow to a horizontal row on
 * < 600px viewports, matching the Reddit app pattern.
 */

/* ─── Sort tabs ──────────────────────────────────────────── */
.nsc-sort-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 0.5px solid #D3D1C7;
  margin: 0 0 12px;
}
.nsc-sort-tabs-row {
  display: flex;
  gap: 2px;
  padding: 6px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.nsc-sort-tabs-row::-webkit-scrollbar { display: none; }

.nsc-sort-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #444441;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.nsc-sort-tab:hover {
  background: #f4f7f1;
  color: #173404;
}
.nsc-sort-tab:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 2px;
}
.nsc-sort-tab-active {
  background: #e8efe5;
  color: #173404;
}
.nsc-sort-tab-active:hover {
  background: #d8e3d2;
}
.nsc-sort-caret {
  opacity: 0.6;
  margin-left: -2px;
}

.nsc-sort-window {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 10px;
  border-top: 0.5px solid #D3D1C7;
  background: #f4f7f1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nsc-sort-window::-webkit-scrollbar { display: none; }
.nsc-sort-window-label {
  font-size: 11px;
  color: #444441;
  margin-right: 4px;
  flex-shrink: 0;
}
.nsc-sort-window-opt {
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  color: #444441;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 0.5px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nsc-sort-window-opt:hover {
  background: #ffffff;
  border-color: #D3D1C7;
}
.nsc-sort-window-opt-active {
  background: #173404;
  color: #ffffff;
  border-color: #173404;
}

/* ─── Card root ──────────────────────────────────────────── */
.nsc-card-v3 {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0;
  background: #ffffff;
  border: 0.5px solid #D3D1C7;
  border-radius: 8px;
  margin: 0 0 8px;
  overflow: hidden;
  transition: border-color 0.12s ease;
}
.nsc-card-v3:hover {
  border-color: #8A8A85;
}
.nsc-card-v3-pinned {
  border-color: #2E5810;
  background: #fafdf7;
}

/* ─── Vote rail (left, desktop) ──────────────────────────── */
.nsc-card-v3-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 4px;
  background: #fafaf7;
  border-right: 0.5px solid #ececec;
  gap: 2px;
}

.nsc-vote-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #3F3E3C;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.nsc-vote-btn:hover {
  background: #ffffff;
}
.nsc-vote-btn:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 1px;
}
.nsc-vote-up.nsc-vote-active {
  background: #e8efe5;
  color: #2E5810;
}
.nsc-vote-up:hover {
  color: #2E5810;
}
.nsc-vote-down.nsc-vote-active {
  background: #fbe9e9;
  color: #A32D2D;
}
.nsc-vote-down:hover {
  color: #A32D2D;
}

.nsc-vote-score {
  font-size: 12px;
  font-weight: 500;
  color: #2C2C2A;
  padding: 2px 0;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.nsc-vote-score-up { color: #2E5810; }
.nsc-vote-score-down { color: #A32D2D; }

/* ─── Card body ──────────────────────────────────────────── */
.nsc-card-v3-body {
  padding: 10px 14px 6px;
  min-width: 0;
  cursor: pointer; /* v3.3.0 — Reddit-style: whole body navigates to post */
}

.nsc-card-v3-pin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: #2E5810;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.nsc-card-v3-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #3F3E3C;
  margin: 0 0 6px;
  line-height: 1.4;
}
.nsc-card-v3-group {
  color: #173404;
  font-weight: 500;
  text-decoration: none;
}
.nsc-card-v3-group:hover { text-decoration: underline; }
.nsc-card-v3-author { color: #3F3E3C; }
.nsc-card-v3-author-link {
  color: #3F3E3C;
  text-decoration: none;
}
.nsc-card-v3-author-link:hover {
  color: #173404;
  text-decoration: underline;
}
.nsc-card-v3-time {
  color: #3F3E3C;
  text-decoration: none;
}
.nsc-card-v3-time:hover { color: #173404; }
.nsc-card-v3-meta-sep { color: #B4B2A9; }

.nsc-card-v3-title {
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #2C2C2A;
}
.nsc-card-v3-title-link {
  color: #2C2C2A;
  text-decoration: none;
}
.nsc-card-v3-title-link:hover { color: #173404; }

.nsc-card-v3-excerpt {
  font-size: 15px;
  line-height: 1.5;
  color: #2C2C2A;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nsc-card-v3-thumb {
  display: block; /* v3.3.0 — was div, now <a>; force block layout */
  margin: 0 0 10px;
  border-radius: 6px;
  overflow: hidden;
  max-height: 360px;
  background: #f4f7f1;
}
.nsc-card-v3-thumb img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 360px;
  object-fit: cover;
  cursor: pointer;
}

.nsc-card-v3-poll-wrap {
  margin: 0 0 10px;
}

/* ─── Actions row ────────────────────────────────────────── */
.nsc-card-v3-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0 0;
  border-top: 0.5px solid #f0efeb;
  margin-top: 6px;
}
.nsc-card-v3-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #444441;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.nsc-card-v3-action:hover {
  background: #f4f7f1;
  color: #173404;
}
.nsc-card-v3-action:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 2px;
}
.nsc-card-v3-action svg { flex-shrink: 0; }

/* ─── Mobile reflow: arrows go horizontal at bottom ──────── */
@media (max-width: 599px) {
  .nsc-card-v3 {
    grid-template-columns: 1fr;
  }
  .nsc-card-v3-votes {
    flex-direction: row;
    justify-content: flex-start;
    background: transparent;
    border-right: none;
    border-top: 0.5px solid #f0efeb;
    padding: 4px 8px;
    order: 2;
  }
  .nsc-card-v3-body {
    order: 1;
    padding: 12px 14px 4px;
  }
  .nsc-card-v3-actions {
    order: 3;
    padding: 4px 8px;
    border-top: none;
    margin-top: 0;
  }
  .nsc-vote-score {
    min-width: 28px;
    padding: 0 4px;
  }
  .nsc-card-v3-title { font-size: 16px; }
  .nsc-card-v3-action span { display: none; }
  .nsc-card-v3-action-comments span { display: inline; }
}

/* ─── Dark mode (matches existing community.css dark mode) ── */
[data-theme="dark"] .nsc-card-v3 {
  background: #1f1f1d;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-card-v3-pinned {
  background: #1a2a14;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-card-v3-votes {
  background: #18181a;
  border-right-color: #2c2c2a;
}
[data-theme="dark"] .nsc-vote-btn { color: #C4C2BA; }
[data-theme="dark"] .nsc-vote-btn:hover { background: #2c2c2a; }
[data-theme="dark"] .nsc-vote-up.nsc-vote-active { background: #1a2a14; color: #97C459; }
[data-theme="dark"] .nsc-vote-down.nsc-vote-active { background: #2a1414; color: #F09595; }
[data-theme="dark"] .nsc-vote-score { color: #f1efe8; }
[data-theme="dark"] .nsc-vote-score-up { color: #97C459; }
[data-theme="dark"] .nsc-vote-score-down { color: #F09595; }
[data-theme="dark"] .nsc-card-v3-title-link { color: #f1efe8; }
[data-theme="dark"] .nsc-card-v3-title-link:hover { color: #c0dd97; }
[data-theme="dark"] .nsc-card-v3-meta,
[data-theme="dark"] .nsc-card-v3-author,
[data-theme="dark"] .nsc-card-v3-author-link,
[data-theme="dark"] .nsc-card-v3-time { color: #C4C2BA; }
[data-theme="dark"] .nsc-card-v3-group { color: #c0dd97; }
[data-theme="dark"] .nsc-card-v3-excerpt { color: #C4C2BA; }
[data-theme="dark"] .nsc-card-v3-action { color: #C4C2BA; }
[data-theme="dark"] .nsc-card-v3-action:hover { background: #2c2c2a; color: #c0dd97; }
[data-theme="dark"] .nsc-card-v3-actions { border-top-color: #2c2c2a; }
[data-theme="dark"] .nsc-sort-tabs {
  background: #1a1a1a;
  border-bottom-color: #2c2c2a;
}
[data-theme="dark"] .nsc-sort-tab { color: #C4C2BA; }
[data-theme="dark"] .nsc-sort-tab:hover { background: #2c2c2a; color: #c0dd97; }
[data-theme="dark"] .nsc-sort-tab-active { background: #1a2a14; color: #c0dd97; }
[data-theme="dark"] .nsc-sort-window {
  background: #18181a;
  border-top-color: #2c2c2a;
}
[data-theme="dark"] .nsc-sort-window-label { color: #C4C2BA; }
[data-theme="dark"] .nsc-sort-window-opt { color: #C4C2BA; }
[data-theme="dark"] .nsc-sort-window-opt:hover { background: #2c2c2a; border-color: #3a3a37; }
[data-theme="dark"] .nsc-sort-window-opt-active { background: #c0dd97; color: #173404; border-color: #c0dd97; }

/* ─── v3.4.141 Urgent question (paid pin) ─────────────────── */
.nsc-card-v3-urgent {
  border-color: #9F0712;
  background: #fff5f5;
}
.nsc-card-v3-urgent-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  background: #9F0712;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  margin: 0 0 8px;
}
[data-theme="dark"] .nsc-card-v3-urgent {
  border-color: #f87171;
  background: #2a1414;
}
[data-theme="dark"] .nsc-card-v3-urgent-tag {
  color: #2a1414;
  background: #ffb3b3;
}