/* §8.1 supersets. Tokens only.
   The requirement is that a pairing is unmistakable at a glance mid-session, so
   the accent rail belongs to the GROUP element rather than to either card —
   that is what makes it continuous rather than two adjacent stripes. */

/* ---- the letter pair, in the same style as the tier badge ---- */

.ss-badge {
  flex: 0 0 auto;
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.ss-title {
  color: var(--accent);
  font-size: var(--fs-label);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.ss-reason,
.ss-hint {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

/* ---- plan editor block ---- */

.ss {
  padding-top: var(--s-3);
  padding-left: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
  /* The rail spans every member, because the members live inside it. */
  border-left: var(--edge-active) solid var(--accent);
}

/* Members keep their own reserved (transparent) edge from .slot, so grouping
   and ungrouping shift no layout — only the rail above appears. */
.ss .slot:first-of-type {
  padding-top: 0;
  border-top: none;
}

.ss-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}

.ss-head .btn-sm {
  margin-left: auto;
}

.ss-reason--warn {
  color: var(--warn);
}

.ss-warn {
  margin: 0 0 var(--s-2);
  color: var(--warn);
  font-size: var(--fs-label);
}

/* ---- logging screen block ---- */

.ss-live {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-left: var(--edge-active) solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.ss-live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--card-pad) 0;
}

/* The group is the card. Members drop their own frame so the block reads as
   one object rather than two stacked ones. */
.ss-live .ex-card--log {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ss-live .ex-card--log + .ex-card--log {
  border-top: var(--hair) solid var(--line-soft);
}

/* Within a pair, currency is carried by brightness rather than by a second
   rail — §12.3's "exactly one obvious thing to touch", extended across both. */
.ss-live .ex-card--ss:not(.ex-card--current) .ex-nm {
  color: var(--text-dim);
}

/* ---- the partner's next set: shown, but dim ---- */

.pending-set {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.pending-n {
  color: var(--text-dim);
  font-weight: 650;
}

.pending-val {
  color: var(--text-dim);
  font-size: var(--fs-name);
}

/* ---- pre-start preview ---- */

.preview-row--ss {
  gap: var(--s-2);
}

.preview-row--ss .preview-nm {
  margin-right: auto;
}