/*
 * NSC v3.2.0 — Single-post page CSS
 *
 * Standalone page styles (NOT layered on community.css — this page
 * runs outside the community shell, on its own HTML document via
 * NSC_Share's template_redirect). AAA contrast throughout.
 *
 * Layout: sticky top header, two-column main grid (article + sidebar),
 * footer. Mobile collapses to single column, sidebar moves below
 * article.
 */

* { box-sizing: border-box; }

.nsc-sp-body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f8f8f5;
  color: #2C2C2A;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── Header ─────────────────────────────────────────────── */
.nsc-sp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 0.5px solid #D3D1C7;
}
.nsc-sp-header-w {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.nsc-sp-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #173404;
  font-weight: 500;
  font-size: 13px;
}
.nsc-sp-brand-dot {
  width: 10px;
  height: 10px;
  background: #173404;
  border-radius: 50%;
  flex-shrink: 0;
}
.nsc-sp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #173404;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 0.5px solid #173404;
}
.nsc-sp-back:hover {
  background: #173404;
  color: #ffffff;
}

/* v3.3.9 — Header actions group + theme toggle */
.nsc-sp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nsc-sp-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0.5px solid #D3D1C7;
  border-radius: 6px;
  color: #2C2C2A;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.nsc-sp-theme-btn:hover {
  background: #173404;
  color: #ffffff;
  border-color: #173404;
}
/* Show sun icon in dark mode (because clicking goes to light),
   moon icon in light mode (because clicking goes to dark). */
.nsc-sp-theme-sun { display: none; }
.nsc-sp-theme-moon { display: inline-block; }
[data-theme="dark"] .nsc-sp-theme-sun { display: inline-block; }
[data-theme="dark"] .nsc-sp-theme-moon { display: none; }

/* ─── Main grid ──────────────────────────────────────────── */
.nsc-sp-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px 36px;
}
.nsc-sp-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

/* ─── Post block ─────────────────────────────────────────── */
.nsc-sp-article {
  min-width: 0;
}
.nsc-sp-post {
  display: grid;
  grid-template-columns: 48px 1fr;
  background: #ffffff;
  border: 0.5px solid #D3D1C7;
  border-radius: 10px;
  overflow: hidden;
}
.nsc-sp-votes {
  background: #fafaf7;
  border-right: 0.5px solid #ececec;
  padding: 14px 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nsc-vote-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #3F3E3C;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  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-down.nsc-vote-active {
  background: #fbe9e9;
  color: #7f1d1d;
}
.nsc-vote-sm { width: 24px; height: 24px; }
.nsc-vote-score {
  font-size: 13px;
  font-weight: 500;
  color: #2C2C2A;
  padding: 2px 0;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nsc-vote-score-sm {
  font-size: 11px;
  min-width: 24px;
}
.nsc-vote-score-up { color: #2E5810; }
.nsc-vote-score-down { color: #A32D2D; }

.nsc-sp-content {
  padding: 16px 22px 14px;
  min-width: 0;
}
.nsc-sp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #3F3E3C;
  margin: 0 0 8px;
}
.nsc-sp-meta-group {
  color: #173404;
  font-weight: 500;
  text-decoration: none;
}
.nsc-sp-meta-group:hover { text-decoration: underline; }
.nsc-sp-meta-by { color: #3F3E3C; }
.nsc-sp-meta-author {
  color: #3F3E3C;
  text-decoration: none;
}
.nsc-sp-meta-author:hover { color: #173404; text-decoration: underline; }
.nsc-sp-meta-time { color: #3F3E3C; }
.nsc-sp-meta-sep { color: #B4B2A9; }

.nsc-sp-title {
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #2C2C2A;
}

.nsc-sp-body {
  font-size: 17px;
  line-height: 1.65;
  color: #2C2C2A;
  margin: 0 0 16px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* v3.4.38 — Defensive reset: the standalone post page loads the active
   theme's CSS (via wp_head), and some themes give article paragraphs /
   blockquotes a grey card background. That made post bodies look like
   ugly grey boxes. Force transparent + no border/padding on prose
   elements inside the post body so content sits flat on the card. */
.nsc-sp-article .nsc-sp-body,
.nsc-sp-article .nsc-sp-body p,
.nsc-sp-article .nsc-sp-body blockquote,
.nsc-sp-article .nsc-sp-body pre,
.nsc-sp-article .nsc-sp-body div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.nsc-sp-article .nsc-sp-body blockquote,
.nsc-sp-article .nsc-sp-body pre {
  padding: 0 !important;
  margin: 0 0 12px !important;
  font-family: inherit !important;
  white-space: pre-wrap !important;
}
.nsc-sp-body p { margin: 0 0 12px; }
.nsc-sp-body p:last-child { margin-bottom: 0; }
/* v3.3.6 — Scope the body link colour rule to actual prose content.
   Previously `.nsc-sp-body a` matched EVERY anchor on the page
   (because `.nsc-sp-body` is the <body> tag class), overriding UI
   element colours — the green "Open community" CTA became
   dark-green-on-dark-green, invisible. Now it only targets links
   inside the post-article body and comment content. */
.nsc-sp-article .nsc-sp-body a,
.nsc-sp-comment-content a { color: #173404; text-decoration: underline; }
.nsc-sp-article .nsc-sp-body a:hover,
.nsc-sp-comment-content a:hover { color: #27500A; }

.nsc-sp-image {
  margin: 0 0 14px;
  border-radius: 8px;
  overflow: hidden;
  background: #f4f7f1;
}
.nsc-sp-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 600px;
  object-fit: contain;
}

.nsc-sp-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 0;
  border-top: 0.5px solid #f0efeb;
  margin-top: 6px;
}
.nsc-sp-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;
  text-decoration: none;
}
.nsc-sp-action:hover { background: #f4f7f1; color: #173404; }
.nsc-sp-action:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 2px;
}
.nsc-sp-action svg { flex-shrink: 0; }
.nsc-sp-action-open { color: #173404; }

/* ─── Ad slots ───────────────────────────────────────────── */
.nsc-sp-ad {
  margin: 18px 0;
  padding: 0;
  background: transparent;
}
.nsc-sp-ad:empty { display: none; }
.nsc-sp-side-ad { margin-top: 16px; }

/* ─── Comments ───────────────────────────────────────────── */
.nsc-sp-comments {
  background: #ffffff;
  border: 0.5px solid #D3D1C7;
  border-radius: 10px;
  padding: 18px 22px;
  margin-top: 18px;
}
.nsc-sp-comments-h2 {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #173404;
  margin: 0 0 16px;
}

.nsc-sp-compose {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
  align-items: flex-start;
}
/* v3.4.38 — Rich composer layout: avatar + growing textarea + footer */
.nsc-sp-compose-avatar {
  flex-shrink: 0;
  line-height: 0;
  padding-top: 2px;
}
.nsc-sp-compose-main {
  flex: 1;
  min-width: 0;
  border: 1px solid #8A8A85;
  border-radius: 14px;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.nsc-sp-compose-main:focus-within {
  border-color: #173404;
  box-shadow: 0 0 0 2px rgba(23, 52, 4, 0.15);
}
.nsc-sp-compose-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #2C2C2A;
  background: transparent;
  outline: none;
  resize: none;
  min-height: 22px;
  max-height: 240px;
  display: block;
}
.nsc-sp-compose-input::placeholder { color: #3F3E3C; }
/* Footer hidden until the field is engaged, then revealed */
.nsc-sp-compose-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px;
  gap: 10px;
}
.nsc-sp-compose-active .nsc-sp-compose-foot,
.nsc-sp-compose-main:focus-within .nsc-sp-compose-foot {
  display: flex;
}
.nsc-sp-compose-count {
  font-size: 12px;
  color: #525558;
}
.nsc-sp-compose-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.nsc-sp-compose-cancel {
  padding: 7px 14px;
  background: transparent;
  color: #525558;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.nsc-sp-compose-cancel:hover { color: #2C2C2A; background: #f1f1ee; }
.nsc-sp-compose-btn {
  padding: 7px 18px;
  background: #173404;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.nsc-sp-compose-btn:hover { background: #27500A; }
.nsc-sp-compose-btn:disabled {
  background: #9BA89B;
  cursor: not-allowed;
}
.nsc-sp-compose-btn:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 2px;
}

.nsc-sp-compose-anon {
  background: #f4f7f1;
  border: 0.5px solid #D3D1C7;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.nsc-sp-compose-anon p {
  margin: 0;
  font-size: 13px;
  color: #444441;
}
.nsc-sp-compose-anon-btn {
  display: inline-flex;
  padding: 7px 14px;
  background: #173404;
  color: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.nsc-sp-compose-anon-btn:hover { background: #27500A; }

.nsc-sp-comments-empty {
  text-align: center;
  font-size: 13px;
  color: #3F3E3C;
  padding: 18px 0;
  margin: 0;
}

/* v3.3.4 — Removed the v3.2 flat-comment CSS block that was here.
   It set .nsc-sp-comment to a 2-column grid (28px + 1fr) expecting
   votes + body as direct children. With the new threaded markup the
   only direct child is .nsc-sp-comment-main, which got placed in
   the 28px column and squeezed every letter onto its own line.
   Threaded styles are defined below in the v3.3.0 section. */

/* ─── Sidebar ────────────────────────────────────────────── */
.nsc-sp-side { min-width: 0; }
.nsc-sp-side-block {
  background: #ffffff;
  border: 0.5px solid #D3D1C7;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.nsc-sp-side-h3 {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #173404;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.nsc-sp-side-group-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #173404;
  text-decoration: none;
  margin: 0 0 6px;
}
.nsc-sp-side-group-name:hover { text-decoration: underline; }
.nsc-sp-side-group-desc {
  font-size: 12px;
  color: #444441;
  margin: 0 0 12px;
  line-height: 1.5;
}
.nsc-sp-side-text {
  font-size: 12px;
  color: #444441;
  margin: 0 0 12px;
  line-height: 1.5;
}
.nsc-sp-side-cta {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #173404;
  text-decoration: none;
  padding: 7px 14px;
  border: 0.5px solid #173404;
  border-radius: 999px;
}
.nsc-sp-side-cta:hover { background: #173404; color: #ffffff; }
.nsc-sp-side-cta-primary {
  background: #173404;
  color: #ffffff;
}
.nsc-sp-side-cta-primary:hover { background: #27500A; }
.nsc-sp-side-related {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nsc-sp-side-related li {
  border-top: 0.5px solid #f0efeb;
}
.nsc-sp-side-related li:first-child { border-top: none; }
.nsc-sp-side-related-link {
  display: block;
  padding: 9px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #2C2C2A;
  text-decoration: none;
}
.nsc-sp-side-related-link:hover { color: #173404; }

/* ─── Footer ─────────────────────────────────────────────── */
.nsc-sp-footer {
  border-top: 0.5px solid #D3D1C7;
  padding: 18px 18px 24px;
  margin-top: 24px;
}
.nsc-sp-footer-w {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  color: #3F3E3C;
}
.nsc-sp-footer a { color: #173404; text-decoration: none; }
.nsc-sp-footer a:hover { text-decoration: underline; }

/* ─── Desktop ────────────────────────────────────────────── */
@media (min-width: 900px) {
  .nsc-sp-grid {
    grid-template-columns: 1fr 300px;
  }
  .nsc-sp-side {
    position: sticky;
    top: 60px;
    align-self: start;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ─── Mobile ─────────────────────────────────────────────── */
@media (max-width: 599px) {
  .nsc-sp-main { padding: 12px 12px 28px; }
  .nsc-sp-header-w { padding: 9px 12px; }
  .nsc-sp-post { grid-template-columns: 40px 1fr; }
  .nsc-sp-votes { padding: 10px 2px 8px; }
  .nsc-sp-content { padding: 14px 16px 12px; }
  .nsc-sp-title { font-size: 19px; }
  .nsc-sp-body { font-size: 14px; }
  .nsc-sp-comments { padding: 14px 16px; }
  .nsc-sp-action span { display: none; }
  .nsc-sp-action-comments span,
  .nsc-sp-action-open span { display: inline; }
}

/* ─── Dark mode (auto via prefers-color-scheme) ──────────── */
@media (prefers-color-scheme: dark) {
  .nsc-sp-body:not([data-theme-override]) { background: #161616; color: #e8e6dd; }
}
[data-theme="dark"] {
  /* When the user explicitly sets dark mode via the community app,
     the body tag inherits the choice — but the single-post page is
     a standalone document, so this branch is for future use. */
}

/* ═════════════════════════════════════════════════════════════════
 * v3.3.0 — Threaded comments
 *
 * Each comment is an <article.nsc-sp-comment> with an optional
 * .nsc-sp-comment-children container holding nested replies. CSS uses
 * the natural HTML nesting to indent — no per-depth class needed for
 * the indent itself (we just have an indicator class for the JS in
 * case it needs to know the visible depth).
 *
 * At depth 6, the renderer stops descending and emits a
 * .nsc-sp-comment-continue link to a permalinked subtree view
 * (?cmt={id}). Reddit's pattern.
 *
 * AAA contrast against the page background (#f8f8f5).
 * ═════════════════════════════════════════════════════════════════ */

.nsc-sp-comments-list {
  margin-top: 8px;
}

.nsc-sp-comments-focus {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: #f0f3ec;
  border: 0.5px solid #D3D1C7;
  border-radius: 6px;
  font-size: 13px;
}
.nsc-sp-comments-focus-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #173404;
  text-decoration: none;
  font-weight: 500;
}
.nsc-sp-comments-focus-back:hover { text-decoration: underline; }
.nsc-sp-comments-focus-label {
  color: #3F3E3C;
}

/* Comment article */
.nsc-sp-comment {
  position: relative;
  margin-top: 12px;
}
.nsc-sp-comments-list > .nsc-sp-comment:first-child { margin-top: 4px; }

.nsc-sp-comment-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Vote rail (compact size for comments) */
.nsc-sp-comment-votes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 1px;
  flex-shrink: 0;
}
.nsc-vote-sm {
  width: 22px;
  height: 22px;
}
.nsc-vote-score-sm {
  font-size: 11px;
  min-width: 22px;
  padding: 1px 0;
}

/* Body */
.nsc-sp-comment-body {
  flex: 1;
  min-width: 0;
}
.nsc-sp-comment-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #3F3E3C;
  margin-bottom: 4px;
}
.nsc-sp-comment-author {
  color: #173404;
  font-weight: 500;
  text-decoration: none;
}
.nsc-sp-comment-author:hover { text-decoration: underline; }
.nsc-sp-meta-sep {
  color: #B4B2A9;
}
.nsc-sp-comment-time { color: #3F3E3C; }
.nsc-sp-comment-content {
  font-size: 16px;
  line-height: 1.55;
  color: #2C2C2A;
  margin: 0 0 6px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.nsc-sp-comment-content p { margin: 0 0 8px; }
.nsc-sp-comment-content p:last-child { margin-bottom: 0; }

.nsc-sp-comment-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.nsc-sp-comment-reply-btn,
.nsc-sp-comment-permalink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #3F3E3C;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.nsc-sp-comment-reply-btn:hover,
.nsc-sp-comment-permalink:hover {
  background: #f0f3ec;
  color: #173404;
}
.nsc-sp-comment-reply-btn:focus-visible,
.nsc-sp-comment-permalink:focus-visible {
  outline: 2px solid #173404;
  outline-offset: 1px;
}

/* Inline reply form */
.nsc-sp-reply-form {
  margin: 8px 0 4px;
  background: #ffffff;
  border: 0.5px solid #D3D1C7;
  border-radius: 6px;
  padding: 8px;
}
.nsc-sp-reply-input {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: #2C2C2A;
  background: transparent;
  border: none;
  border-radius: 4px;
  resize: vertical;
  outline: none;
}
.nsc-sp-reply-input:focus { background: #fafdf7; }
.nsc-sp-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.nsc-sp-reply-cancel,
.nsc-sp-reply-submit {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 999px;
  cursor: pointer;
  border: 0.5px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.nsc-sp-reply-cancel {
  background: transparent;
  color: #3F3E3C;
  border-color: #D3D1C7;
}
.nsc-sp-reply-cancel:hover {
  background: #f0f3ec;
  color: #173404;
}
.nsc-sp-reply-submit {
  background: #173404;
  color: #ffffff;
  border-color: #173404;
}
.nsc-sp-reply-submit:hover {
  background: #2E5810;
  border-color: #2E5810;
}
.nsc-sp-reply-submit:disabled,
.nsc-sp-reply-cancel:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Nested children container — drives the visual indent + threading line.
   Each level adds 14px of left padding and a thin 2px vertical line on
   the left edge that hovers to the NOUN green for affordance. */
.nsc-sp-comment-children {
  margin-top: 8px;
  margin-left: 11px;
  padding-left: 14px;
  border-left: 2px solid #ececec;
  transition: border-color 0.15s ease;
}
.nsc-sp-comment-children:hover {
  border-left-color: #c0dd97;
}

/* "Continue this thread" link at depth 6 */
.nsc-sp-comment-continue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  margin-left: 11px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #173404;
  background: #f0f3ec;
  border: 0.5px solid #D3D1C7;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.nsc-sp-comment-continue:hover {
  background: #e8efe5;
  border-color: #173404;
}

/* Just-added comment briefly highlights so the user sees where it landed */
.nsc-sp-comment-just-added > .nsc-sp-comment-main {
  background: #fafdf7;
  outline: 2px solid #c0dd97;
  outline-offset: 2px;
  border-radius: 4px;
  transition: background 1.2s ease, outline-color 1.2s ease;
}
.nsc-sp-comment-just-added > .nsc-sp-comment-main {
  /* Faded by JS after ~1.8s by removing the class */
}

/* Mobile compression — tighten indent so deep threads still fit */
@media (max-width: 600px) {
  .nsc-sp-comment-children {
    margin-left: 6px;
    padding-left: 9px;
  }
  .nsc-sp-comment-main { gap: 6px; }
  .nsc-sp-comment-content { font-size: 13px; }
  .nsc-sp-comment-continue { margin-left: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   v3.3.7 — Dark mode (manual toggle + OS preference)
   Previously only `@media (prefers-color-scheme: dark)` was wired
   up, so NSC's theme toggle (which sets `data-theme="dark"` on
   <html>) had no effect. Now we cover both: the manual toggle via
   [data-theme="dark"], and the OS preference when the user hasn't
   chosen a theme explicitly.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .nsc-sp-body {
  background: #131313;
  color: #f1efe8;
}

/* Header */
[data-theme="dark"] .nsc-sp-header {
  background: #1a1a18;
  border-bottom-color: #2c2c2a;
}
[data-theme="dark"] .nsc-sp-brand-text { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-back,
[data-theme="dark"] .nsc-sp-back-link {
  color: #c0dd97;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-back:hover,
[data-theme="dark"] .nsc-sp-back-link:hover {
  background: #2E5810;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-theme-btn {
  color: #c0dd97;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-theme-btn:hover {
  background: #2E5810;
  color: #f1efe8;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-header-cta {
  color: #c0dd97;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-header-cta:hover {
  background: #2E5810;
  color: #f1efe8;
}

/* Article card */
[data-theme="dark"] .nsc-sp-article {
  background: #1f1f1d;
  border-color: #2c2c2a;
}
[data-theme="dark"] .nsc-sp-title { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-body-content,
[data-theme="dark"] article.nsc-sp-article .nsc-sp-body { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-article .nsc-sp-body a { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-article .nsc-sp-body a:hover { color: #97C459; }

/* Meta line (by, time, separator) */
[data-theme="dark"] .nsc-sp-meta { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-meta-by { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-meta-author { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-meta-author:hover { color: #97C459; }
[data-theme="dark"] .nsc-sp-meta-time { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-meta-sep { color: #6b6e73; }
[data-theme="dark"] .nsc-sp-group-pill {
  background: #2c2c2a;
  color: #c0dd97;
}

/* Vote rail */
[data-theme="dark"] .nsc-vote-btn { color: #C4C2BA; }
[data-theme="dark"] .nsc-vote-btn:hover { background: #2c2c2a; color: #f1efe8; }
[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; }

/* Action buttons row (comments / share / open in app) */
[data-theme="dark"] .nsc-sp-action {
  color: #C4C2BA;
}
[data-theme="dark"] .nsc-sp-action:hover {
  background: #2c2c2a;
  color: #c0dd97;
}
[data-theme="dark"] .nsc-sp-action-open { color: #c0dd97; }

/* Compose box (logged-in comment form) */
[data-theme="dark"] .nsc-sp-compose {
  background: transparent;
  border-color: transparent;
}
[data-theme="dark"] .nsc-sp-compose h2 { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-compose-main {
  background: #131313;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-sp-compose-main:focus-within {
  border-color: #c0dd97;
  box-shadow: 0 0 0 2px rgba(192, 221, 151, 0.18);
}
[data-theme="dark"] .nsc-sp-compose-input {
  background: transparent;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-compose-input::placeholder { color: #b0b3b8; }
[data-theme="dark"] .nsc-sp-compose-count { color: #b0b3b8; }
[data-theme="dark"] .nsc-sp-compose-cancel { color: #b0b3b8; }
[data-theme="dark"] .nsc-sp-compose-cancel:hover { color: #f1efe8; background: #2a2a27; }
[data-theme="dark"] .nsc-sp-compose-btn {
  background: #2E5810;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-compose-btn:hover { background: #27500A; }
[data-theme="dark"] .nsc-sp-compose-btn:disabled { background: #3a3a37; color: #6b6b66; }

/* Anonymous-user CTA in comment area */
[data-theme="dark"] .nsc-sp-compose-anon {
  background: #1f1f1d;
  border-color: #2c2c2a;
  color: #C4C2BA;
}
[data-theme="dark"] .nsc-sp-compose-anon-btn {
  background: #2E5810;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-compose-anon-btn:hover { background: #27500A; }

/* Comments section heading + empty state */
[data-theme="dark"] .nsc-sp-comments h2 { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-comments-empty { color: #C4C2BA; }

/* Comment threads */
[data-theme="dark"] .nsc-sp-comment-author { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-comment-meta,
[data-theme="dark"] .nsc-sp-comment-time { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-comment-content { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-comment-content a { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-comment-content a:hover { color: #97C459; }
[data-theme="dark"] .nsc-sp-comment-reply-btn,
[data-theme="dark"] .nsc-sp-comment-permalink { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-comment-reply-btn:hover,
[data-theme="dark"] .nsc-sp-comment-permalink:hover {
  background: #2c2c2a;
  color: #c0dd97;
}

/* Threaded indent guides */
[data-theme="dark"] .nsc-sp-comment-children { border-left-color: #2c2c2a; }
[data-theme="dark"] .nsc-sp-comment-children:hover { border-left-color: #2E5810; }

/* Reply form */
[data-theme="dark"] .nsc-sp-reply-form {
  background: #1f1f1d;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-sp-reply-input {
  color: #f1efe8;
  background: #131313;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-sp-reply-input:focus { background: #1f1f1d; border-color: #c0dd97; }
[data-theme="dark"] .nsc-sp-reply-input::placeholder { color: #b0b3b8; }
[data-theme="dark"] .nsc-sp-reply-cancel {
  color: #C4C2BA;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-sp-reply-cancel:hover {
  background: #2c2c2a;
  color: #c0dd97;
}
[data-theme="dark"] .nsc-sp-reply-submit {
  background: #2E5810;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-reply-submit:hover { background: #27500A; }

/* Focus-mode banner (?cmt=N subtree view) */
[data-theme="dark"] .nsc-sp-comments-focus {
  background: #1f2a18;
  border-color: #3a3a37;
}
[data-theme="dark"] .nsc-sp-comments-focus-back { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-comments-focus-label { color: #C4C2BA; }

/* "Continue this thread" depth-cap link */
[data-theme="dark"] .nsc-sp-comment-continue {
  background: #1f2a18;
  border-color: #3a3a37;
  color: #c0dd97;
}
[data-theme="dark"] .nsc-sp-comment-continue:hover {
  background: #2a3a20;
  border-color: #c0dd97;
}

/* Just-added flash highlight on AJAX inserts */
[data-theme="dark"] .nsc-sp-comment-just-added > .nsc-sp-comment-main {
  background: #1a2a14;
  outline-color: #2E5810;
}

/* Sidebar cards (Join, Related) */
[data-theme="dark"] .nsc-sp-side-block {
  background: #1f1f1d;
  border-color: #2c2c2a;
}
[data-theme="dark"] .nsc-sp-side-h3 { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-side-text { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-side-cta {
  color: #c0dd97;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-side-cta:hover {
  background: #2E5810;
  color: #f1efe8;
}
[data-theme="dark"] .nsc-sp-side-cta-primary {
  background: #2E5810;
  color: #f1efe8;
  border-color: #2E5810;
}
[data-theme="dark"] .nsc-sp-side-cta-primary:hover { background: #27500A; }
[data-theme="dark"] .nsc-sp-side-related-link { color: #f1efe8; }
[data-theme="dark"] .nsc-sp-side-related-link:hover { color: #c0dd97; }
/* v3.4.108 — Dark-mode fixes for sidebar group card + byline that had
   no dark override (dark-green text was near-invisible on dark cards). */
[data-theme="dark"] .nsc-sp-side-group-name { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-side-group-desc { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-meta-group { color: #c0dd97; }
[data-theme="dark"] .nsc-sp-crumb-sep { color: #b0b3b8; }
[data-theme="dark"] .nsc-sp-compose-image-btn-pro { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-compose-image-btn-pro:hover { background: #1f2d12; color: #c0dd97; }
[data-theme="dark"] .nsc-sp-footer-w { color: #C4C2BA; }
[data-theme="dark"] .nsc-sp-image { background: #15140f; }

/* Fallback to OS preference when the user hasn't set an override.
   The toggle JS writes "light" or "dark" to localStorage on first
   interaction; until then, follow the system. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .nsc-sp-body {
    background: #131313;
    color: #f1efe8;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v3.3.10 — HIGH-SPECIFICITY DARK MODE OVERRIDES
   The previous dark-mode rules at line 805+ rely on the cascade
   alone, and were losing to legacy hardcoded colours in odd corner
   cases (post card background staying white, title looking ghostly,
   comment containers showing white instead of dark, input fields
   transparent). This block uses `html[data-theme="dark"]` as the
   prefix to bump specificity, and applies !important to colour and
   background-color on the structural surfaces so cached browser
   styles, third-party CSS, and AdSense iframe parents cannot bleed
   light-mode values through.
   ═══════════════════════════════════════════════════════════════ */

/* Page surface */
html[data-theme="dark"] body.nsc-sp-body {
  background-color: #131313 !important;
  color: #f1efe8 !important;
}

/* Header surfaces */
html[data-theme="dark"] .nsc-sp-header {
  background-color: #1a1a18 !important;
  border-bottom-color: #2c2c2a !important;
}
html[data-theme="dark"] .nsc-sp-brand,
html[data-theme="dark"] .nsc-sp-brand-text {
  color: #f1efe8 !important;
}

/* POST CARD — the white-card-in-dark-mode bug */
html[data-theme="dark"] .nsc-sp-article {
  background-color: #1f1f1d !important;
  border-color: #2c2c2a !important;
}
html[data-theme="dark"] .nsc-sp-post {
  background-color: #1f1f1d !important;
  border-color: #2c2c2a !important;
}

/* Post text content — must be cream against the dark card */
html[data-theme="dark"] .nsc-sp-title,
html[data-theme="dark"] h1.nsc-sp-title {
  color: #f1efe8 !important;
}
html[data-theme="dark"] .nsc-sp-article .nsc-sp-body,
html[data-theme="dark"] .nsc-sp-article div.nsc-sp-body,
html[data-theme="dark"] .nsc-sp-article .nsc-sp-body p,
html[data-theme="dark"] .nsc-sp-content .nsc-sp-body p {
  color: #f1efe8 !important;
}

/* Meta line */
html[data-theme="dark"] .nsc-sp-meta,
html[data-theme="dark"] .nsc-sp-meta-by,
html[data-theme="dark"] .nsc-sp-meta-time {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-sp-meta-author {
  color: #c0dd97 !important;
}

/* Vote rail */
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-btn,
html[data-theme="dark"] .nsc-sp-comment-votes .nsc-vote-btn {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-vote-score {
  color: #f1efe8 !important;
}

/* Action row */
html[data-theme="dark"] .nsc-sp-actions .nsc-sp-action,
html[data-theme="dark"] .nsc-sp-action {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-sp-action-open {
  color: #c0dd97 !important;
}

/* COMMENTS CONTAINER */
html[data-theme="dark"] .nsc-sp-comments {
  background-color: #1f1f1d !important;
  border-color: #2c2c2a !important;
}
html[data-theme="dark"] .nsc-sp-comments-h2,
html[data-theme="dark"] h2.nsc-sp-comments-h2 {
  color: #f1efe8 !important;
}

/* Compose input */
html[data-theme="dark"] .nsc-sp-compose-input,
html[data-theme="dark"] input.nsc-sp-compose-input {
  background-color: #131313 !important;
  color: #f1efe8 !important;
  border-color: #3a3a37 !important;
}
html[data-theme="dark"] .nsc-sp-compose-input::placeholder {
  color: #b0b3b8 !important;
}

/* Each comment */
html[data-theme="dark"] .nsc-sp-comment {
  background-color: transparent !important;
}
html[data-theme="dark"] .nsc-sp-comment-author {
  color: #c0dd97 !important;
}
html[data-theme="dark"] .nsc-sp-comment-meta,
html[data-theme="dark"] .nsc-sp-comment-time {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-sp-comment-content,
html[data-theme="dark"] .nsc-sp-comment-content p {
  color: #f1efe8 !important;
}
html[data-theme="dark"] .nsc-sp-comment-reply-btn,
html[data-theme="dark"] .nsc-sp-comment-permalink {
  color: #C4C2BA !important;
}

/* Reply form */
html[data-theme="dark"] .nsc-sp-reply-form {
  background-color: #1a1a18 !important;
  border-color: #3a3a37 !important;
}
html[data-theme="dark"] .nsc-sp-reply-input,
html[data-theme="dark"] textarea.nsc-sp-reply-input {
  background-color: #131313 !important;
  color: #f1efe8 !important;
  border-color: #3a3a37 !important;
}
html[data-theme="dark"] .nsc-sp-reply-input::placeholder {
  color: #b0b3b8 !important;
}
html[data-theme="dark"] .nsc-sp-reply-cancel {
  color: #C4C2BA !important;
}

/* Threaded indent guides */
html[data-theme="dark"] .nsc-sp-comment-children {
  border-left-color: #3a3a37 !important;
}

/* "Continue thread" link */
html[data-theme="dark"] .nsc-sp-comment-continue {
  background-color: #1f2a18 !important;
  color: #c0dd97 !important;
  border-color: #3a3a37 !important;
}

/* SIDEBAR */
html[data-theme="dark"] .nsc-sp-side-block {
  background-color: #1f1f1d !important;
  border-color: #2c2c2a !important;
}
html[data-theme="dark"] .nsc-sp-side-h3 {
  color: #f1efe8 !important;
}
html[data-theme="dark"] .nsc-sp-side-text {
  color: #C4C2BA !important;
}

/* FOOTER */
html[data-theme="dark"] .nsc-sp-footer {
  background-color: #1a1a18 !important;
  border-top-color: #2c2c2a !important;
}
html[data-theme="dark"] .nsc-sp-footer p,
html[data-theme="dark"] .nsc-sp-footer {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-sp-footer a {
  color: #c0dd97 !important;
}

/* v3.3.11 — missing vote-rail dark override (was a bright stripe) */
html[data-theme="dark"] .nsc-sp-votes {
  background-color: #1a1a18 !important;
  border-right-color: #2c2c2a !important;
}
/* Vote button icons on the rail need cream color */
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-btn,
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-btn svg {
  color: #C4C2BA !important;
}
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-up.nsc-vote-active,
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-up.nsc-vote-active svg {
  color: #97C459 !important;
  background-color: #1a2a14 !important;
}
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-down.nsc-vote-active,
html[data-theme="dark"] .nsc-sp-votes .nsc-vote-down.nsc-vote-active svg {
  color: #F09595 !important;
  background-color: #2a1414 !important;
}

/* v3.4.52 — Visible breadcrumb (matches BreadcrumbList JSON-LD). */
.nsc-sp-breadcrumb{display:flex;align-items:center;gap:8px;font-size:.82rem;margin:0 0 14px;color:#525558}
.nsc-sp-breadcrumb a{color:#27500A;text-decoration:none;font-weight:600}
.nsc-sp-breadcrumb a:hover{text-decoration:underline}
.nsc-sp-crumb-sep{color:#9aa0a6}
.nsc-sp-crumb-current{color:#525558}
@media (prefers-color-scheme: dark){
  .nsc-sp-breadcrumb{color:#b0b3b8}
  .nsc-sp-breadcrumb a{color:#c0dd97}
  .nsc-sp-crumb-current{color:#b0b3b8}
}
html[data-theme="dark"] .nsc-sp-breadcrumb{color:#b0b3b8}
html[data-theme="dark"] .nsc-sp-breadcrumb a{color:#c0dd97}
html[data-theme="dark"] .nsc-sp-crumb-current{color:#b0b3b8}

/* v3.4.56 — "See new comments" pill. */
.nsc-sp-newcomments{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 18px;background:#173404;color:#fff;border:none;border-radius:22px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(23,52,4,.25);animation:nscSpPillIn .2s ease-out}
.nsc-sp-newcomments[hidden]{display:none}
.nsc-sp-newcomments:hover{background:#0f2503}
@keyframes nscSpPillIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-color-scheme: dark){
  .nsc-sp-newcomments{background:#2E5810;color:#f1efe8}
  .nsc-sp-newcomments:hover{background:#27500A}
}
html[data-theme="dark"] .nsc-sp-newcomments{background:#2E5810;color:#f1efe8}
html[data-theme="dark"] .nsc-sp-newcomments:hover{background:#27500A}

/* ─── v3.4.88 — Comment notice + report UI (single-post page) ─────── */
.nsc-comments-notice{display:flex;gap:10px;align-items:flex-start;background:#f0f7ff;border:1px solid #cfe3fb;border-radius:10px;padding:11px 14px;margin:0 0 16px}
.nsc-comments-notice svg{flex-shrink:0;color:#1e40af;margin-top:2px}
.nsc-comments-notice p{margin:0;font-size:.82rem;line-height:1.5;color:#2C2C2A}
.nsc-comments-notice a{color:#1e40af;font-weight:600;text-decoration:underline}
[data-theme="dark"] .nsc-comments-notice{background:#16263d;border-color:#274868}
[data-theme="dark"] .nsc-comments-notice p{color:#e4e6eb}
[data-theme="dark"] .nsc-comments-notice svg{color:#93c5fd}
[data-theme="dark"] .nsc-comments-notice a{color:#93c5fd}

/* Comment report link — sits inline with Reply / Permalink */
.nsc-sp-comment-report{background:none;border:none;color:#3F3E3C;font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:0}
.nsc-sp-comment-report:hover{color:#9F0712;text-decoration:underline}
[data-theme="dark"] .nsc-sp-comment-report{color:#C4C2BA}
[data-theme="dark"] .nsc-sp-comment-report:hover{color:#fca5a5}

/* Report modal */
.nsc-report-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.nsc-report-card{position:relative;background:#fff;border-radius:14px;max-width:420px;width:100%;padding:22px;box-shadow:0 16px 48px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto}
.nsc-report-card h3{margin:0 0 4px;font-size:1.15rem;font-weight:800;color:#0f0f0f}
.nsc-report-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.5rem;line-height:1;color:#3F3E3C;cursor:pointer}
.nsc-report-sub{margin:0 0 14px;font-size:.82rem;color:#525558}
.nsc-report-reasons{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.nsc-report-reason{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.88rem;color:#2C2C2A}
.nsc-report-reason:hover{background:#f2f3f5}
.nsc-report-reason input{accent-color:#9F0712;flex-shrink:0}
.nsc-report-details{width:100%;padding:10px 12px;border:1px solid #dce0e5;border-radius:8px;font-size:.86rem;font-family:inherit;resize:vertical;box-sizing:border-box;background:#fff;color:#2C2C2A}
.nsc-report-details:focus{outline:none;border-color:#9F0712;box-shadow:0 0 0 3px rgba(159,7,18,.12)}
.nsc-report-submit{width:100%;margin-top:12px;background:#9F0712;border:none;color:#fff;border-radius:22px;padding:11px;font-weight:700;font-size:.9rem;cursor:pointer}
.nsc-report-submit:hover{background:#820610}
.nsc-report-submit:disabled{opacity:.6;cursor:default}
[data-theme="dark"] .nsc-report-card{background:#242526}
[data-theme="dark"] .nsc-report-card h3{color:#e4e6eb}
[data-theme="dark"] .nsc-report-reason{color:#e4e6eb}
[data-theme="dark"] .nsc-report-reason:hover{background:#3a3b3c}
[data-theme="dark"] .nsc-report-details{background:#18191a;border-color:#3a3b3c;color:#e4e6eb}
[data-theme="dark"] .nsc-report-sub,[data-theme="dark"] .nsc-report-close{color:#b0b3b8}

/* Post report — entry in the post actions row */
.nsc-sp-post-report{background:none;border:none;color:#3F3E3C;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;padding:6px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px}
.nsc-sp-post-report:hover{color:#9F0712;background:#fef0f0}
[data-theme="dark"] .nsc-sp-post-report{color:#b0b3b8}
[data-theme="dark"] .nsc-sp-post-report:hover{color:#fca5a5;background:#2a1a1a}

/* ─── v3.4.91 — Pro image comments ───────────────────────────────── */
.nsc-sp-compose-image-btn{background:none;border:none;cursor:pointer;color:#3F3E3C;padding:6px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;position:relative}
.nsc-sp-compose-image-btn:hover{background:#f0f3ec;color:#173404}
.nsc-sp-compose-image-loading{opacity:.5;pointer-events:none}
.nsc-sp-compose-pro-pill{font-size:.58rem;font-weight:800;letter-spacing:.04em;background:#173404;color:#fff;border-radius:4px;padding:1px 4px;line-height:1.4}
.nsc-sp-compose-image-btn-pro{color:#525558}
.nsc-sp-compose-image-btn-pro:hover{background:#f6f4ee;color:#3F3E3C}
[data-theme="dark"] .nsc-sp-compose-image-btn{color:#C4C2BA}
[data-theme="dark"] .nsc-sp-compose-image-btn:hover{background:#1f2d12;color:#c0dd97}
[data-theme="dark"] .nsc-sp-compose-pro-pill{background:#2E5810;color:#fff}

.nsc-sp-compose-image-preview{position:relative;display:inline-block;margin:8px 0 4px;max-width:200px}
.nsc-sp-compose-image-thumb{max-width:200px;max-height:160px;border-radius:10px;display:block;border:1px solid #e3e0d8}
.nsc-sp-compose-image-remove{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:#1a1a1a;color:#fff;border:2px solid #fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Rendered comment image (both feed + single page) */
.nsc-sp-comment-image{display:block;margin:8px 0 2px;max-width:340px}
.nsc-sp-comment-image img{max-width:100%;max-height:380px;border-radius:10px;border:1px solid #e3e0d8;display:block}
[data-theme="dark"] .nsc-sp-comment-image img,[data-theme="dark"] .nsc-sp-compose-image-thumb{border-color:#33312c}

/* ─── v3.4.94 — Toast notices (mirrors community.css .nsc-gtoast) ──── */
.nsc-gtoast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);display:flex;align-items:center;gap:10px;padding:12px 18px;background:#2C2C2A;color:#fff;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,0.25);font-size:.88rem;font-weight:500;z-index:100001;max-width:calc(100vw - 32px);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none}
.nsc-gtoast-show{opacity:1;transform:translateX(-50%) translateY(0)}
.nsc-gtoast-icon{display:inline-flex;align-items:center;flex-shrink:0}
.nsc-gtoast-msg{display:inline-block;line-height:1.4}
.nsc-gtoast-success{background:#173404;color:#fff}
.nsc-gtoast-error{background:#9F0712;color:#fff}
@media (max-width:640px){.nsc-gtoast{bottom:80px;left:12px;right:12px;transform:translateY(20px);max-width:none;border-radius:12px;padding:14px 16px}.nsc-gtoast-show{transform:translateY(0)}}

/* ─── v3.4.104 — Shared community footer on the single-post page ──────
   The single-post page loads only this stylesheet, so it needs the
   footer's design tokens + rules (mirrored from community.css) for the
   canonical NSC_Footer::render() markup to look identical everywhere. */
.nsc-footer{
  --nsc-card:#fff;--nsc-bg:#f0f2f5;--nsc-border:#dce0e5;
  --nsc-text:#0f0f0f;--nsc-text2:#4a4d51;--nsc-text3:#595c60;
  --nsc-green:#173404;--nsc-green2:#059669;--nsc-hover:#f0f2f5;
}
[data-theme="dark"] .nsc-footer{
  --nsc-card:#0f172a;--nsc-bg:#18191a;--nsc-border:#3a3b3c;
  --nsc-text:#e4e6eb;--nsc-text2:#c4c7cc;--nsc-text3:#b0b3b8;
  --nsc-green:#34d399;--nsc-green2:#34d399;--nsc-hover:#1e293b;
}
.nsc-footer{position:relative;background:var(--nsc-card);border-top:1px solid var(--nsc-border);margin-top:40px;padding:40px 16px 22px;color:var(--nsc-text2);font-size:.86rem;text-align:left}
.nsc-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#173404,#059669,#0d9488)}
[data-theme="dark"] .nsc-footer{background:#0f172a}
.nsc-footer-inner{max-width:1240px;margin:0 auto}
.nsc-footer-grid{display:grid;grid-template-columns:1fr;gap:30px 32px;margin:0 0 28px}
.nsc-footer-col h4,.nsc-footer-col-head{margin:0 0 14px;font-size:.78rem;font-weight:800;color:var(--nsc-text);text-transform:uppercase;letter-spacing:.07em;position:relative;padding-bottom:8px;text-align:left}
.nsc-footer-col h4::after,.nsc-footer-col-head::after{content:"";position:absolute;bottom:0;left:0;width:26px;height:2px;background:var(--nsc-green2)}
.nsc-footer-col ul{list-style:none;margin:0;padding:0}
.nsc-footer-col li{margin:0 0 9px}
.nsc-footer-col a{color:var(--nsc-text2);text-decoration:none;font-size:.86rem;transition:color .12s}
.nsc-footer-col a:hover{color:var(--nsc-green)}
.nsc-footer-chev{display:none}
.nsc-footer-brand .nsc-footer-logo{display:flex;align-items:center;gap:8px;font-size:1.05rem;color:var(--nsc-text);margin:0 0 12px}
.nsc-footer-brand .nsc-footer-logo strong{font-weight:800}
.nsc-footer-brand .nsc-footer-logo span{font-weight:400;color:var(--nsc-text2)}
.nsc-footer-tag{margin:0 0 16px;font-size:.86rem;line-height:1.65;color:var(--nsc-text2);max-width:320px}
.nsc-footer-social{display:flex;gap:10px}
.nsc-footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--nsc-hover);color:var(--nsc-text2);transition:background .15s,color .15s,transform .15s}
.nsc-footer-social a:hover{background:#064E3B;color:#fff;transform:translateY(-2px)}
[data-theme="dark"] .nsc-footer-social a{background:#1e293b}
.nsc-footer-pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--nsc-border);margin:0 0 18px}
.nsc-footer-pay-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nsc-text3)}
.nsc-footer-pay-note{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--nsc-text3);margin-left:auto}
.nsc-footer-pay-note svg{color:var(--nsc-green2)}
.nsc-footer-pay-note strong{color:var(--nsc-text2);font-weight:700}
.nsc-pay-logos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nsc-pay-logo{display:inline-flex;line-height:0;box-shadow:0 1px 3px rgba(0,0,0,.08);border-radius:4px;overflow:hidden}
.nsc-pay-logo svg{display:block;height:28px;width:auto}
.nsc-footer-disclaimer{padding:18px 0;border-top:1px solid var(--nsc-border);margin:0;text-align:center}
.nsc-footer-disclaimer-pill{display:inline-block;background:#9F0712;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 11px;border-radius:99px;margin:0 0 8px}
.nsc-footer-disclaimer p{margin:0 auto;font-size:.78rem;line-height:1.55;color:var(--nsc-text3);max-width:680px}
.nsc-footer-help{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:14px 0 4px;font-size:.8rem}
.nsc-footer-help a,.nsc-footer-help button{background:none;border:none;color:var(--nsc-text2);font-family:inherit;font-size:.8rem;text-decoration:none;cursor:pointer;padding:0;transition:color .12s}
.nsc-footer-help a:hover,.nsc-footer-help button:hover{color:var(--nsc-green);text-decoration:underline}
[data-theme="dark"] .nsc-footer-help a:hover,[data-theme="dark"] .nsc-footer-help button:hover{color:#34d399}
.nsc-footer-bottom{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;color:var(--nsc-text3);padding-top:14px;border-top:1px solid var(--nsc-border);text-align:center}
@media(min-width:700px){
    .nsc-footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
    .nsc-footer{padding:48px 24px 24px}
}

/* v3.4.115 — PWA-style connectivity banner */
.nsc-netbar{position:fixed;top:0;left:0;right:0;z-index:99999;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;font-size:.85rem;font-weight:600;transform:translateY(-100%);transition:transform .28s ease;text-align:center}
.nsc-netbar-vis{transform:translateY(0)}
.nsc-netbar-ic{font-size:.95rem;line-height:1}
.nsc-netbar-off{background:#820610;color:#fff}
.nsc-netbar-on{background:#173404;color:#fff}
.nsc-netbar-msg{max-width:90%}

/* v3.4.120 — Poll "View votes" modal (was only in community.css, so it
   rendered unstyled on the single-post page which loads this file instead). */
.nsc-pv-votes-overlay{position:fixed;inset:0;z-index:100001;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .18s ease}
.nsc-pv-votes-overlay.show{opacity:1;pointer-events:auto}
.nsc-pv-votes-modal{background:#fff;border-radius:16px;width:100%;max-width:460px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.nsc-pv-votes-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ECEAE2}
.nsc-pv-votes-head strong{font-size:1.05rem;font-weight:800;color:#2C2C2A}
.nsc-pv-votes-close{background:none;border:none;font-size:1.6rem;line-height:1;color:#525558;cursor:pointer;padding:0 4px}
.nsc-pv-votes-close:hover{color:#2C2C2A}
.nsc-pv-votes-body{overflow-y:auto;padding:16px 20px 20px}
.nsc-pv-votes-total{font-size:.82rem;font-weight:700;color:#525558;margin-bottom:14px}
.nsc-pv-votes-opt{margin-bottom:18px}
.nsc-pv-votes-opt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.nsc-pv-votes-opt-label{font-size:.9rem;font-weight:700;color:#2C2C2A}
.nsc-pv-votes-opt-pct{font-size:.8rem;font-weight:800;color:#525558;white-space:nowrap}
.nsc-pv-votes-bar{height:6px;border-radius:4px;background:#f1f1ee;overflow:hidden;margin-bottom:10px}
.nsc-pv-votes-bar-fill{height:100%;background:#173404;border-radius:4px;transition:width .4s}
.nsc-pv-votes-voters{display:flex;flex-direction:column;gap:8px;padding-left:2px}
.nsc-pv-votes-voter{display:flex;align-items:center;gap:9px}
.nsc-pv-votes-voter-name{font-size:.85rem;font-weight:600;color:#2C2C2A}
.nsc-pv-votes-voter-handle{font-size:.78rem;font-weight:500;color:#525558}
.nsc-pv-votes-anon{font-size:.8rem;color:#525558;font-style:italic;padding-left:2px}
.nsc-pv-votes-empty{text-align:center;color:#525558;padding:30px 10px;font-size:.9rem}
.nsc-pv-votes-spinner{width:28px;height:28px;border:3px solid #ECEAE2;border-top-color:#173404;border-radius:50%;margin:30px auto;animation:nscPvVotesSpin .8s linear infinite}
@keyframes nscPvVotesSpin{to{transform:rotate(360deg)}}
[data-theme="dark"] .nsc-pv-votes-modal{background:#1f1f1d}
[data-theme="dark"] .nsc-pv-votes-head{border-bottom-color:#34342f}
[data-theme="dark"] .nsc-pv-votes-head strong{color:#f1efe8}
[data-theme="dark"] .nsc-pv-votes-close{color:#b0b3b8}
[data-theme="dark"] .nsc-pv-votes-close:hover{color:#f1efe8}
[data-theme="dark"] .nsc-pv-votes-total,[data-theme="dark"] .nsc-pv-votes-opt-pct{color:#b0b3b8}
[data-theme="dark"] .nsc-pv-votes-opt-label,[data-theme="dark"] .nsc-pv-votes-voter-name{color:#f1efe8}
[data-theme="dark"] .nsc-pv-votes-voter-handle,[data-theme="dark"] .nsc-pv-votes-anon,[data-theme="dark"] .nsc-pv-votes-empty{color:#b0b3b8}
[data-theme="dark"] .nsc-pv-votes-bar{background:#2a2a27}
[data-theme="dark"] .nsc-pv-votes-bar-fill{background:#c0dd97}
[data-theme="dark"] .nsc-pv-votes-spinner{border-color:#34342f;border-top-color:#c0dd97}
@media(max-width:480px){.nsc-pv-votes-modal{max-width:100%;border-radius:14px 14px 0 0;align-self:flex-end;max-height:88vh}.nsc-pv-votes-overlay{align-items:flex-end;padding:0}}

/* v3.4.120 — "Your vote" badge in the poll votes modal */
.nsc-pv-votes-mine{display:inline-block;font-size:.68rem;font-weight:700;background:#173404;color:#fff;padding:1px 8px;border-radius:99px;margin-left:6px;vertical-align:middle}
[data-theme="dark"] .nsc-pv-votes-mine{background:#c0dd97;color:#173404}

/* v3.4.135 — Q&A single-post: distinct "Question" badge + outlined cards.
   v3.4.137 — Outline-only (no background tint). The question card and its
   responses card share ONE colour so they read as a linked pair; different
   questions cycle through 6 colours (.nsc-sp-qc-1..6) derived from post ID. */
.nsc-sp-article-q{background:none;border:none}
.nsc-sp-qbadge{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px 0;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:99px;border:1px solid currentColor}
.nsc-sp-article-q .nsc-sp-post{border:1.5px solid;border-radius:14px;padding:16px 18px;background:none}
.nsc-sp-article-q .nsc-sp-comments{margin-top:18px;border:1.5px solid;border-radius:14px;padding:18px;background:none}

/* Colour variants — outline + badge + responses heading all share the hue.
   Light-mode uses the 800 stop (AAA on white); dark uses the 200 stop. */
.nsc-sp-qc-1 .nsc-sp-post,.nsc-sp-qc-1 .nsc-sp-comments{border-color:#7F77DD}
.nsc-sp-qc-1 .nsc-sp-qbadge,.nsc-sp-qc-1 .nsc-sp-comments-h2{color:#3C3489}
.nsc-sp-qc-2 .nsc-sp-post,.nsc-sp-qc-2 .nsc-sp-comments{border-color:#378ADD}
.nsc-sp-qc-2 .nsc-sp-qbadge,.nsc-sp-qc-2 .nsc-sp-comments-h2{color:#0C447C}
.nsc-sp-qc-3 .nsc-sp-post,.nsc-sp-qc-3 .nsc-sp-comments{border-color:#1D9E75}
.nsc-sp-qc-3 .nsc-sp-qbadge,.nsc-sp-qc-3 .nsc-sp-comments-h2{color:#085041}
.nsc-sp-qc-4 .nsc-sp-post,.nsc-sp-qc-4 .nsc-sp-comments{border-color:#D85A30}
.nsc-sp-qc-4 .nsc-sp-qbadge,.nsc-sp-qc-4 .nsc-sp-comments-h2{color:#712B13}
.nsc-sp-qc-5 .nsc-sp-post,.nsc-sp-qc-5 .nsc-sp-comments{border-color:#D4537E}
.nsc-sp-qc-5 .nsc-sp-qbadge,.nsc-sp-qc-5 .nsc-sp-comments-h2{color:#72243E}
.nsc-sp-qc-6 .nsc-sp-post,.nsc-sp-qc-6 .nsc-sp-comments{border-color:#BA7517}
.nsc-sp-qc-6 .nsc-sp-qbadge,.nsc-sp-qc-6 .nsc-sp-comments-h2{color:#633806}

[data-theme="dark"] .nsc-sp-qc-1 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-1 .nsc-sp-comments-h2{color:#CECBF6}
[data-theme="dark"] .nsc-sp-qc-2 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-2 .nsc-sp-comments-h2{color:#B5D4F4}
[data-theme="dark"] .nsc-sp-qc-3 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-3 .nsc-sp-comments-h2{color:#9FE1CB}
[data-theme="dark"] .nsc-sp-qc-4 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-4 .nsc-sp-comments-h2{color:#F5C4B3}
[data-theme="dark"] .nsc-sp-qc-5 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-5 .nsc-sp-comments-h2{color:#F4C0D1}
[data-theme="dark"] .nsc-sp-qc-6 .nsc-sp-qbadge,[data-theme="dark"] .nsc-sp-qc-6 .nsc-sp-comments-h2{color:#FAC775}

/* v3.4.138 — "Create another …" CTA below the post on single-post pages. */
.nsc-sp-askanother{display:flex;justify-content:center;margin:16px 0 4px}
.nsc-sp-askanother-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border:1.5px solid var(--nsc-border,#dce0e5);border-radius:99px;background:none;color:var(--nsc-text,#0f0f0f);font-family:inherit;font-size:.86rem;font-weight:700;text-decoration:none;transition:border-color .12s,color .12s}
.nsc-sp-askanother-btn:hover{border-color:#173404;color:#173404}
[data-theme="dark"] .nsc-sp-askanother-btn:hover{border-color:#97C459;color:#97C459}
/* When it's a question, the CTA inherits the question's colour from the
   .nsc-sp-qc-N class on the article (border + text). */
.nsc-sp-qc-1 .nsc-sp-askanother-btn{border-color:#7F77DD;color:#3C3489}
.nsc-sp-qc-2 .nsc-sp-askanother-btn{border-color:#378ADD;color:#0C447C}
.nsc-sp-qc-3 .nsc-sp-askanother-btn{border-color:#1D9E75;color:#085041}
.nsc-sp-qc-4 .nsc-sp-askanother-btn{border-color:#D85A30;color:#712B13}
.nsc-sp-qc-5 .nsc-sp-askanother-btn{border-color:#D4537E;color:#72243E}
.nsc-sp-qc-6 .nsc-sp-askanother-btn{border-color:#BA7517;color:#633806}
[data-theme="dark"] .nsc-sp-qc-1 .nsc-sp-askanother-btn{color:#CECBF6}
[data-theme="dark"] .nsc-sp-qc-2 .nsc-sp-askanother-btn{color:#B5D4F4}
[data-theme="dark"] .nsc-sp-qc-3 .nsc-sp-askanother-btn{color:#9FE1CB}
[data-theme="dark"] .nsc-sp-qc-4 .nsc-sp-askanother-btn{color:#F5C4B3}
[data-theme="dark"] .nsc-sp-qc-5 .nsc-sp-askanother-btn{color:#F4C0D1}
[data-theme="dark"] .nsc-sp-qc-6 .nsc-sp-askanother-btn{color:#FAC775}