/* ═══════════════════════════════════════════════════════════ Blue Arctic V6 · /spread-the-word/ ────────────────────────────────── Page chrome ONLY: the badge grid, the preview surfaces, the code boxes and the colour filter. ⚠ The badge's own CSS is NOT in this file, deliberately. It is generated in spread-the-word.php from one rule table, emitted once into , and repeated inside every copyable snippet. Duplicating a `.ba-badge` rule here would let the live preview drift away from the code a visitor pastes, which is the one failure this page cannot have. Everything below is scoped to `.sw-*` and never touches `.ba-badge`. Mobile-first, per the project layout rules: base rules are the phone composition, wider steps live in min-width queries. ═══════════════════════════════════════════════════════════ */ /* ── Colour filter ───────────────────────────────────────── A progressive enhancement. Without JS the control is hidden and every badge stays visible, because filtering is done by one data attribute on the wrapper rather than by markup that only exists after a script runs. */ .sw-filterbar { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin-bottom: var(--space-band); } html:not(.js) .sw-filterbar { display: none; } .sw-filter { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .3rem; background: var(--frost); border: 1px solid var(--line); border-radius: var(--r-pill); } .sw-filter-btn { border: 0; background: transparent; padding: .5rem 1.1rem; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .sw-filter-btn:hover { color: var(--ink); } .sw-filter-btn[aria-pressed="true"] { background: var(--paper); color: var(--blue-600); box-shadow: var(--shadow-soft); } .sw-filter-note { color: var(--ink-3); min-height: 1.3em; } /* Filtering itself: pure CSS, driven by one attribute. Every group contains all three tones, so no group can ever filter down to an empty heading. */ .sw-scope[data-sw-tone="black"] .sw-card:not([data-sw-tone="black"]), .sw-scope[data-sw-tone="white"] .sw-card:not([data-sw-tone="white"]), .sw-scope[data-sw-tone="color"] .sw-card:not([data-sw-tone="color"]) { display: none; } /* ── Groups ────────────────────────────────────────────────── */ .sw-group + .sw-group { margin-top: var(--space-section-md); } .sw-group-head { max-width: 44rem; margin-bottom: 1.25rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); } .sw-group-head h3 { font-size: var(--fs-h3); margin-bottom: .35rem; } .sw-group-head p { color: var(--ink-2); font-size: var(--fs-small); } /* ── Card grid ─────────────────────────────────────────────── */ .sw-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-card-gap); } @media (min-width: 720px) { .sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sw-card { display: flex; flex-direction: column; min-width: 0; /* lets 
 shrink instead of widening the page */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

/* ── Preview surface ───────────────────────────────────────── */
.sw-preview {
  display: grid;
  place-items: center;
  min-height: 6.5rem;
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.sw-preview--light { background: var(--mist); }
.sw-preview--dark  { background: var(--carbon-900); border-bottom-color: var(--carbon-700); }
/* blue-500 is invisible on carbon: match the site-wide dark-surface ring */
.sw-preview--dark :focus-visible { outline-color: var(--sky-400); }

/* ── Card body ─────────────────────────────────────────────── */
.sw-card-body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  padding: 1.15rem 1.15rem 1.25rem;
}
.sw-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.sw-card-meta {
  font-size: var(--fs-tiny);
  line-height: 1.5;
  color: var(--ink-3);
}

/* ── Code box ──────────────────────────────────────────────── */
/* Two behaviours, chosen by width, because one rule cannot serve
   both ends:
     phones   wrap, so a 120-character href can never push the page
              wider than the viewport, whatever else is on screen
     ≥720px   do not wrap, so the snippet reads as the fourteen lines
              it actually is instead of breaking `utm_campaign` in
              half; the box scrolls sideways in the rare long line
   Copying reads textContent either way, so the real newlines and the
   real characters survive whatever the box did visually. */
.sw-code {
  margin-top: .15rem;
  min-width: 0;
  max-height: 10.5rem;
  overflow: auto;
  padding: .8rem .9rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
@media (min-width: 720px) {
  .sw-code { white-space: pre; overflow-wrap: normal; }
}
.sw-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .75rem;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ── Actions ───────────────────────────────────────────────── */
.sw-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: .3rem;
}
.sw-copy { flex: none; }
.sw-copy.is-copied {
  border-color: var(--ok-600);
  color: var(--ok-600);
  background: var(--paper);
}
.sw-copy.is-failed { border-color: var(--line-2); color: var(--ink-2); }

/* The button does nothing without JS, so it is not offered without
   JS. The code stays selectable either way. */
html:not(.js) .sw-copy { display: none; }
html.js .sw-nojs      { display: none; }
.sw-nojs { color: var(--ink-3); }

/* ── Affiliate aside ───────────────────────────────────────── */
.sw-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem;
}
.sw-aside-copy { max-width: 46rem; }
.sw-aside-copy h2 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.sw-aside-copy p  { color: var(--ink-2); }
.sw-aside-cta { flex: none; }
@media (min-width: 900px) {
  .sw-aside {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2rem 2.25rem;
  }
}

/* ── Inline link rows in the "other ways" cards ────────────── */
.sw-links {
  margin-top: .5rem;
  font-size: var(--fs-small);
  font-weight: 500;
}
.sw-links span { color: var(--line-2); margin-inline: .2rem; }