/* site-social-sections.css — FedM8 site-wide social rollout, PR B.
   Veterans + Learn + Get Certified, on the PR A BUSY system
   (--ss-* tokens from site-social.css; this file loads after it).
   Additive only: it styles the PR B layer (.ssx-*) and gives the
   three sections busy spacing. It never restyles contract-room-x,
   Talk mechanics, coin faces, or the cert desk's own controls. */

body[data-ss-route="veterans"] #page-content,
body[data-ss-route="va-help"] #page-content,
body[data-ss-route="who-helped"] #page-content,
body[data-ss-route="academy"] #page-content,
body[data-ss-route="certified"] #page-content {
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Right rail: featured + chat, present and visible ----------
   On wide screens the veterans surfaces become context (left) /
   content (center) / chat rail (right). On phones the rail stacks
   right after the first block, where the stock page puts it. */
@media (min-width: 1080px) {
  body[data-ss-route="veterans"] #page-content,
  body[data-ss-route="va-help"] #page-content,
  body[data-ss-route="who-helped"] #page-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 28px;
    align-items: start;
  }
  body[data-ss-route="veterans"] #page-content > *:not(.ssx-rail),
  body[data-ss-route="va-help"] #page-content > *:not(.ssx-rail),
  body[data-ss-route="who-helped"] #page-content > *:not(.ssx-rail) {
    grid-column: 1;
    min-width: 0;
  }
  .ssx-rail {
    grid-column: 2;
    grid-row: 1 / span 40;
    position: sticky;
    top: 16px;
  }
}
.ssx-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 20px;
  min-width: 0;
}

/* ---------- Cards ---------- */
.ssx-card {
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(16, 36, 40, 0.06);
  padding: 18px 20px;
}
/* The chat card is a visible mint-tinted box, not a quiet signpost. */
.ssx-card.ssx-chat {
  background: var(--ss-mint-2);
  border-color: rgba(10, 128, 111, 0.38);
}
.ssx-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-teal-d);
}
.ssx-card-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ss-ink);
}
.ssx-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ss-ink-60);
  max-width: 62ch;
}
.ssx-link {
  color: var(--ss-teal-d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ssx-link:hover { color: var(--ss-teal); }
.ssx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.ssx-btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ss-teal);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.ssx-btn:hover { background: var(--ss-teal); opacity: 0.92; }
.ssx-btn-quiet {
  background: var(--ss-panel);
  color: var(--ss-ink);
  border: 1px solid var(--ss-line);
  font-weight: 700;
}

/* ---------- Chat card tabs: pill tabs (This thing | This topic | Live All) ------ */
.ssx-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ssx-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-live);
  flex: none;
}
.ssx-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
}
.ssx-tab {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-ink-60);
  text-decoration: none;
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 999px;
}
a.ssx-tab:hover { color: var(--ss-teal-d); border-color: var(--ss-teal); }
.ssx-tab-on {
  background: var(--ss-navy);
  color: #fff;
  font-weight: 800;
  border-color: var(--ss-navy);
}

/* ---------- Featured Who Helped ---------- */
.ssx-featured-name {
  margin: 2px 0 0;
  font-family: var(--ss-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ss-ink);
}
.ssx-featured .ssx-link { display: inline-block; margin-top: 10px; }

/* ---------- VA help firm cards ---------- */
.ssx-firm-ask .ssx-link { font-weight: 700; }
.ssx-firm-ask {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ss-line);
  font-size: 13.5px;
}
.ssx-firm-sep { color: var(--ss-ink-60); }

/* ---------- Academy ---------- */
.ssx-learn-extra { margin: 16px 0 24px; }
.ssx-learn-extra .ssx-card { max-width: 760px; }

/* ---------- Get Certified: cohort path ---------- */
body[data-ss-route="certified"] .cd-journey {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body[data-ss-route="certified"] .cd-stage {
  background: var(--ss-panel);
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  padding: 22px 24px;
}
body[data-ss-route="certified"] .cd-stage.ssx-stage-here {
  border-left: 4px solid var(--ss-teal);
  background: var(--ss-mint-2);
}
.ssx-here-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ss-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}
.ssx-done-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ss-mint);
  color: var(--ss-teal-d);
  font-size: 12px;
  font-weight: 800;
  vertical-align: middle;
}
.ssx-stage-talk {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ss-line);
  font-size: 13.5px;
  font-weight: 600;
}
.ssx-cert-extra { margin: 20px 0 28px; }
.ssx-cert-extra .ssx-card { max-width: 760px; }

/* S1: public member lines (Who Helped identity, cohort, celebrations) */
.ssx-member-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ssx-member-btn {
  background: #c9f5e3; border: 1px solid #8fd8bb; color: #065f46;
  font: inherit; font-weight: 800; font-size: 13px; border-radius: 999px;
  padding: 3px 12px; cursor: pointer;
}
.ssx-celeb-line { font-weight: 700; }
/* r13: a stage's door to its certification room (kept by the approved design). */
.ssx-stage-talk.ssx-stage-door { padding-bottom: 12px; }
.ssx-stage-door .ssx-count { font-weight: 500; }
@media (max-width: 760px) { .ssx-stage-door a { display: inline-flex; align-items: center; min-height: 44px; } }