/* ==========================================================================
   SITUATIONSHIP — one visual language, everywhere.

   Replaces the drained Tier 3 skin. Same riso inks, same display type, same
   halftone as the group report: the product should look like one product.

   The rule that survives from tone-tiering is narrowed to the only part that
   was ever load-bearing:

       A SHARE CARD IS ABOUT YOU, NEVER ABOUT THEM.

   Self-deprecating travels ("78% of first texts: me"). Accusation doesn't —
   nobody reposts a callout, and it names someone who never consented.
   ========================================================================== */

.tone1.situationship {
  --chart-1: var(--riso-pink);
  --chart-2: var(--riso-blue);
}

/* ---- The verdict stamp: the screenshot moment ---------------------------- */

.sitch-verdict {
  display: grid;
  justify-items: start;
  gap: var(--s-2);
  padding-block: var(--s-2);
}
.sitch-verdict__type {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 122, 'wght' 900;
  font-size: min(15cqw, 3.25rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--riso-pink);
  text-shadow: 3px 3px 0 var(--ink);
}
.sitch-verdict__sub {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 600;
  font-size: 1.125rem;
  line-height: 1.25;
}

/* ---- Stat lines: big number, flat punchline ----------------------------- */

.sitch-stat { display: grid; gap: 2px; margin-block: var(--s-2); }
.sitch-stat__n {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 900;
  font-size: min(20cqw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.sitch-stat__n em {
  font-style: normal;
  color: var(--riso-pink);
}
.sitch-stat__cap {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* ---- Head-to-head: you vs them, but the joke lands on you --------------- */

.vs { display: grid; gap: var(--s-2); margin-block: var(--s-2); }
.vs__row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s-2); }
.vs__k {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fade);
}
.vs__pair {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 800;
  font-size: 1.25rem;
  white-space: nowrap;
}
.vs__me { color: var(--riso-pink); }
.vs__them { color: var(--ink); opacity: 0.42; }
.vs__bar { height: 10px; background: var(--rule-fine); position: relative; }
.vs__bar i {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w);
  background: var(--riso-pink);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---- Receipt quote: the actual message, as a sticker -------------------- */

.quote {
  position: relative;
  padding: var(--s-3) var(--s-2) var(--s-2);
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--riso-blue);
  transform: rotate(-0.7deg);
  margin-block: var(--s-3);
}
.quote:nth-of-type(even) { transform: rotate(0.6deg); box-shadow: 4px 4px 0 var(--riso-pink); }
.quote__who {
  position: absolute;
  top: 0; left: var(--s-2);
  translate: 0 -50%;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 7px 1px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.quote__text {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 500;
  font-size: 1.0625rem;
  line-height: 1.35;
}

/* ---- Share bar ---------------------------------------------------------- */

.sitch-share { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.sitch-note {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--fade);
  border-top: 1px solid var(--rule-fine);
  padding-top: var(--s-2);
}