/* ============================================================
   Pep Club — the demo controls
   Tiny Byte chrome, deliberately NOT in styles.css.

   The palette switch and the contrast panel are things the studio
   is showing you; they are not part of Pep Club's design language.
   Keeping them in their own file (and their own dark palette) means
   a visitor never has to work out which parts are "the brand" — the
   same separation concept-frame.css makes on a concept page.

   Namespaced --pcs-* so nothing here can collide with the brand's
   token set, which is swapped wholesale on every flip.
   ============================================================ */

.pcs-bar, .pcs-ev, .pcs-notice {
  --pcs-ink:       #0c0c0d;
  --pcs-ink-soft:  #141416;
  --pcs-ink-line:  #26262a;
  --pcs-cream:     #f4f1ea;
  --pcs-cream-dim: #9a978f;
  --pcs-ember:     #ff5c35;
  --pcs-pass:      #3ddc97;
  --pcs-fail:      #ff5c5c;
  --pcs-display:   'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --pcs-body:      'Inter', ui-sans-serif, system-ui, sans-serif;
  font-family: var(--pcs-body);
}

.pcs-wrap {
  width: 100%; max-width: 1080px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- disclosure notice ---------------------------------- */

.pcs-notice {
  background: var(--pcs-ink); color: var(--pcs-cream-dim);
  border-bottom: 1px solid var(--pcs-ink-line);
  font-size: .8rem; line-height: 1.4;
}
.pcs-notice__in {
  display: flex; align-items: center; gap: .9rem;
  padding-block: .6rem; flex-wrap: wrap;
}
.pcs-notice b { color: var(--pcs-ember); font-weight: 600; }
.pcs-notice .tbp-barlink { margin-left: auto; }

/* ---------- sticky switch bar ----------------------------------- */

.pcs-bar {
  position: sticky; top: 0; z-index: 300;
  background: var(--pcs-ink); color: var(--pcs-cream);
  border-bottom: 1px solid var(--pcs-ink-line);
}
.pcs-bar__in {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  padding-block: .7rem; flex-wrap: wrap;
}

.pcs-label {
  font-family: var(--pcs-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pcs-cream-dim);
  flex: none;
}

.pcs-seg {
  display: inline-flex; flex: none;
  border: 1px solid var(--pcs-ink-line); border-radius: 100px;
  padding: 3px; background: var(--pcs-ink-soft);
}
.pcs-seg button {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--pcs-cream-dim);
  font-family: var(--pcs-display); font-weight: 700; font-size: .8rem;
  padding: .45rem 1rem; border-radius: 100px;
  transition: background-color .2s ease, color .2s ease;
}
.pcs-seg button:hover { color: var(--pcs-cream); }
.pcs-seg button[aria-pressed="true"] { background: var(--pcs-ember); color: var(--pcs-ink); }
.pcs-seg button:focus-visible { outline: 2px solid var(--pcs-ember); outline-offset: 2px; }

/* the live assertion — "nothing moved" */
.pcs-assert {
  margin-left: auto; flex: none;
  font-family: var(--pcs-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .04em; color: var(--pcs-cream-dim);
}
.pcs-assert b { color: var(--pcs-pass); font-weight: 700; }
.pcs-assert.is-bad b { color: var(--pcs-fail); }

@media (max-width: 720px) {
  .pcs-assert { margin-left: 0; flex: 1 1 100%; order: 3; }
}

/* ---------- contrast evidence ------------------------------------ */

.pcs-ev {
  background: var(--pcs-ink); color: var(--pcs-cream);
  border-top: 1px solid var(--pcs-ink-line);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.pcs-ev__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-family: var(--pcs-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pcs-ember);
}
.pcs-ev__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--pcs-ember); }
.pcs-ev h2 {
  font-family: var(--pcs-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); letter-spacing: -.03em;
  line-height: 1.05; margin: 0 0 1rem; max-width: 22ch; color: var(--pcs-cream);
}
.pcs-ev__lede { margin: 0; max-width: 60ch; color: var(--pcs-cream-dim); font-size: 1.02rem; line-height: 1.6; }

.pcs-score {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  font-family: var(--pcs-display); font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500; color: var(--pcs-cream-dim);
}
.pcs-score b { font-weight: 700; }
.pcs-score.is-pass b { color: var(--pcs-pass); }
.pcs-score.is-fail b { color: var(--pcs-fail); }

.pcs-pairs {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  /* Explicit counts, not auto-fit: there are four pairs, and auto-fit lands
     on three at tablet width, orphaning the fourth against dead background.
     4 / 2 / 1 all divide evenly. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--pcs-ink-line);
  border: 1px solid var(--pcs-ink-line); border-radius: 16px; overflow: hidden;
}
@media (max-width: 1000px) { .pcs-pairs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .pcs-pairs { grid-template-columns: 1fr; } }
.pcs-pair { background: var(--pcs-ink-soft); padding: 0; }
.pcs-pair__swatch {
  padding: 1.1rem 1.25rem; font-family: var(--pcs-display);
  font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  transition: background-color .45s ease, color .45s ease;
}
.pcs-pair__meta { padding: .9rem 1.25rem 1.1rem; }
.pcs-pair__name {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pcs-cream-dim); margin-bottom: .45rem;
}
.pcs-pair__ratio {
  font-family: var(--pcs-display); font-weight: 700; font-size: 1.35rem;
  color: var(--pcs-cream); font-variant-numeric: tabular-nums;
}
.pcs-pair__verdict {
  margin-left: .5rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.pcs-pair.is-pass .pcs-pair__verdict { color: var(--pcs-pass); }
.pcs-pair.is-fail .pcs-pair__verdict { color: var(--pcs-fail); }

/* the trap / fix pair — the actual argument */
.pcs-trap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--pcs-ink-line); border: 1px solid var(--pcs-ink-line);
  border-radius: 16px; overflow: hidden;
}
.pcs-trap__half { background: var(--pcs-ink-soft); padding: 0; }
.pcs-trap__demo {
  background: #FF2E7E; padding: clamp(1.5rem, 4vw, 2.25rem);
  font-family: var(--pcs-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.3;
}
.pcs-trap__demo--bad  { color: #FFF8E7; }
.pcs-trap__demo--good { color: #12123A; }
.pcs-trap__note { padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem; }
.pcs-trap__note strong {
  display: block; font-family: var(--pcs-display); font-size: 1.3rem;
  font-variant-numeric: tabular-nums; margin-bottom: .35rem;
}
.pcs-trap__half--bad  strong { color: var(--pcs-fail); }
.pcs-trap__half--good strong { color: var(--pcs-pass); }
.pcs-trap__note span { font-size: .9rem; color: var(--pcs-cream-dim); line-height: 1.55; }

@media (max-width: 620px) { .pcs-trap { grid-template-columns: 1fr; } }