/* ba-li ported */
/* ═══════════════════════════════════════════════════════════
   Blue Arctic · /spread-the-word/
   Page chrome ONLY: badge grid, preview surfaces, code boxes, filter.

   ⚠ The badge's own CSS is deliberately NOT here: it is generated in
   spread-the-word.php from one rule table and repeated inside every
   copyable snippet. A `.ba-badge` rule here would let the live preview
   drift from the code a visitor pastes. Everything below is scoped to
   `.sw-*` and never touches `.ba-badge`.

   Mobile-first: 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 <pre> 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: phones wrap so a long href can never
   push the page wider than the viewport; ≥720px does not wrap, so the
   snippet reads as the lines it really is and scrolls sideways instead.
   Copying reads textContent either way, so real newlines survive. */
.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; }