/* ==========================================================================
   TIER 1 — LOUD.

   docs/08-branding.md defines Tier 1 as "full Hinglish slang, jokes, roasts"
   with emoji as STRUCTURAL elements. The first build applied Tier 3's restraint
   to both tiers, which made the funny half read like a legal notice. This file
   is the correction.

   Direction: RISOGRAPH — flat spot inks, visible misregistration, halftone
   grain. Loud and colourful, but analog rather than the smooth AI gradients
   Gen Z currently reads as cheap (docs/03-genz-deep-dive.md).

   Inks validated with the dataviz validator on cream #fbf6e9:
     #ff2d87 · #0a7cff · #00a95c → ALL CHECKS PASS
     Acid yellow fails the lightness band, so it is a HIGHLIGHTER WASH only,
     never a data mark. Green carries a contrast WARN → always direct-labelled.
   ========================================================================== */

.tone1 {
  --paper:       #fbf6e9;
  --ink:         #14100c;
  --ink-soft:    #5d564a;
  --fade:        #8f8878;
  --rule:        #ddd4bd;
  --rule-fine:   #e8e0cd;

  --riso-pink:   #ff2d87;
  --riso-blue:   #0a7cff;
  --riso-green:  #00a95c;
  --riso-yellow: #ffe800;

  --stamp:       var(--riso-pink);
  --accent:      var(--riso-yellow);
  --chart-1:     var(--riso-pink);
  --chart-2:     var(--riso-blue);
}

/* Halftone dot field — the riso texture, cheap and GPU-friendly. */
.tone1 .receipt-body::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image: radial-gradient(var(--riso-blue) 0.9px, transparent 1px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}
.tone1 .seq { position: relative; z-index: 1; }

/* ---- Display type: big, tight, unapologetic ---------------------------- */

.tone1 .card__stat {
  font-variation-settings: 'wdth' 118, 'wght' 900;
  /* Sized for the WIDEST realistic stat at this weight. Heavier + wider glyphs
     overflow the receipt long before the viewport, so this is cqw, not vw. */
  font-size: min(22cqw, 5rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: var(--ink);
  /* Misregistration: the pink plate printed a hair off the black one. */
  text-shadow: 3px 3px 0 var(--riso-pink);
}

.tone1 .card__kicker {
  display: inline-block;
  background: var(--riso-yellow);
  color: var(--ink);
  padding: 3px 8px 2px;
  font-weight: 700;
  letter-spacing: 0.16em;
  transform: rotate(-1.2deg);
  box-shadow: 2px 2px 0 var(--ink);
}

.tone1 .card__say {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.tone1 .mark {
  background: var(--riso-yellow);
  box-shadow: 0 0 0 3px var(--riso-yellow);
  font-weight: 700;
}

/* ---- Awards as stickers ------------------------------------------------ */

.tone1 .award-hero__label {
  display: inline-block;
  background: var(--riso-blue);
  color: #fff;
  padding: 4px 10px 3px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  transform: rotate(1.4deg);
}

/* The emoji is the graphic — structural, not decoration. */
.tone1 .award__glyph {
  font-size: clamp(4.5rem, 22cqw, 7rem);
  line-height: 0.9;
  filter: drop-shadow(4px 4px 0 var(--riso-yellow));
}

.tone1 .award-hero__title {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 122, 'wght' 900;
  font-size: min(13.5cqw, 3rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--riso-pink);
  text-shadow: 2.5px 2.5px 0 var(--ink);
}

.tone1 .award-hero__line {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 500;
  font-size: 1.125rem;
  line-height: 1.3;
}
.tone1 .award-hero__line b { font-variation-settings: 'wght' 800; }

.tone1 .award-hero__proof {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fade);
}

.tone1 .rarity {
  display: inline-block;
  background: var(--riso-green);
  color: #fff;
  padding: 4px 10px 3px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---- Leaderboard: chunky riso bars ------------------------------------- */

.tone1 .lb__row { gap: var(--s-2); align-items: center; }
.tone1 .lb__rank {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 900;
  font-size: 1.25rem;
  color: var(--riso-blue);
}
.tone1 .lb__name {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 700;
  font-size: 1rem;
}
.tone1 .lb__bar {
  height: 13px;
  margin-top: 3px;
  background: var(--riso-blue);
  box-shadow: 2px 2px 0 var(--ink);
}
.tone1 .lb__row:first-child .lb__bar { background: var(--riso-pink); }
.tone1 .lb__val { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; }

/* ---- Emoji DNA: the emoji ARE the chart -------------------------------- */

.tone1 .dna { display: grid; gap: var(--s-2); }
.tone1 .dna__cell {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: var(--s-2);
}
.tone1 .dna__e { font-size: 1.75rem; line-height: 1; }
.tone1 .dna__track {
  height: 15px;
  width: var(--w);
  background: var(--riso-pink);
  box-shadow: 2px 2px 0 var(--ink);
}
.tone1 .dna__cell:nth-child(even) .dna__track { background: var(--riso-blue); }
.tone1 .dna__n { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 700; }

/* ---- Progress + chrome ------------------------------------------------- */

.tone1 .seq__progress i.is-on   { background: var(--riso-pink); }
.tone1 .seq__progress i.is-done { background: var(--riso-blue); }

.tone1 .seq__counter {
  background: var(--ink);
  color: var(--paper);
  padding: 3px 7px 2px;
  font-weight: 700;
}

.tone1 .btn {
  --btn-bg: var(--riso-pink);
  --btn-fg: #fff;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 800;
}
.tone1 .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tone1 .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Stickers must hug their text. Grid children stretch to the column by
   default, so inline-block alone does nothing here — justify-self does. */
.tone1 .card__kicker,
.tone1 .award-hero__label { justify-self: start; }
.tone1 .rarity { display: inline-block; }
.tone1 .award__glyph { justify-self: start; }

/* The counter chip should hug too, inside the flex footer. */
.tone1 .seq__counter { align-self: center; }

/* Word-set stats need their own step: 7 caps are much wider than 6 digits at
   this weight, so one size cannot serve both. */
.tone1 .card__stat--word { font-size: min(16cqw, 3.5rem); line-height: 0.88; }

/* ---- Per-member tags: everyone in the group, on one card ---------------- */

.tags { display: grid; gap: var(--s-2); }
/*
 * Two rows, not three columns.
 *
 * The old layout was `name | label | value` with the value set to nowrap and
 * its column sized `auto`. A long value therefore claimed all the width it
 * wanted, the label column collapsed to almost nothing, and the label wrapped
 * to three lines UNDERNEATH the value — they overlapped and both became
 * unreadable. It only showed up with a long award name and a long stat
 * together, which is exactly the combination a real export produces.
 *
 * Now the name spans both rows on the left and the label sits above its own
 * value on the right. Nothing competes for horizontal space, so it cannot
 * collide at any width.
 */
.tag {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  column-gap: var(--s-2);
  row-gap: 1px;
  align-items: baseline;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-fine);
}
.tag__who { grid-column: 1; grid-row: 1 / span 2; }
.tag__label { grid-column: 2; grid-row: 1; }
.tag__val { grid-column: 2; grid-row: 2; }
.tag:last-child { border-bottom: 0; padding-bottom: 0; }
.tag__who {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 800;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag__label {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 110, 'wght' 700;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--riso-pink, #ff2d87);
  line-height: 1.1;
}
.tag__val {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--fade);
  /* Wraps rather than forcing the row wider than the receipt. */
  overflow-wrap: anywhere;
}

/* ---- Relational signal card -------------------------------------------- */
/*
 * The observation used to be set in .card__say — display type at 1.5rem. That
 * is right for a six-word verdict and wrong for a paragraph: a 90-word read
 * became a wall of shouting. Long copy gets its own readable style, and the
 * card leads with the one thing the eye can take in instantly — which way the
 * pattern leans.
 */

.tone1 .lean {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin: 0.25rem 0 0.5rem;
}

.tone1 .lean__end {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tone1 .lean__track {
  position: relative;
  display: block;
  height: 10px;
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 7px)
    center / auto 2px no-repeat;
}

.tone1 .lean__dot {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--riso-yellow);
  transform: translate(-50%, -50%);
  transition: left 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The dot's position IS the finding. */
.tone1 .lean--you      .lean__dot { left: 12%; background: var(--riso-blue); }
.tone1 .lean--them     .lean__dot { left: 88%; background: var(--riso-pink); }
.tone1 .lean--balanced .lean__dot { left: 50%; background: var(--riso-yellow); }

.tone1 .lean__verdict {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 0.9rem;
}

.tone1 .card__read {
  font-family: var(--f-display);
  font-variation-settings: 'wght' 450;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 34ch;          /* a readable measure, not the full card width */
  margin: 0 0 1rem;
  color: var(--ink);
}

/* ---- Receipts, shut by default ----------------------------------------- */
/*
 * These are verbatim private messages on a card built to be screenshotted.
 * They open on request and never on arrival.
 */

.tone1 .vault { margin-top: 0.5rem; }

.tone1 .vault__btn {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 0.9rem;
  width: 100%;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
  border: 2px dashed var(--ink);
  transition: background 160ms ease, transform 160ms ease;
}

.tone1 .vault__btn:hover,
.tone1 .vault__btn:focus-visible {
  background: var(--riso-yellow);
  transform: translate(-1px, -1px);
}

.tone1 .vault__body {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
  animation: vault-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vault-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.tone1 .quote--me   { box-shadow: 4px 4px 0 var(--riso-blue); }
.tone1 .quote--them { box-shadow: 4px 4px 0 var(--riso-pink); }

@media (prefers-reduced-motion: reduce) {
  .tone1 .lean__dot { transition: none; }
  .tone1 .vault__body { animation: none; }
}

/* ---- Pattern cards ------------------------------------------------------ */
/*
 * The screenshot report used to be four model sentences with the user's own
 * messages quoted underneath. This is the replacement: a named dynamic, how
 * strongly it matched, whose side it describes, and the behaviour behind it.
 */

.tone1 .pattern__name {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 100, 'wght' 800;
  font-size: clamp(1.9rem, 9cqw, 2.9rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--riso-pink);
  margin: 0 0 0.9rem;
}

.tone1 .pattern__meter {
  height: 14px;
  border: 2px solid var(--ink);
  background: var(--paper-edge);
  overflow: hidden;
}

.tone1 .pattern__meter i {
  display: block;
  height: 100%;
  width: var(--s, 0%);
  background: var(--riso-yellow);
  transform-origin: left center;
  animation: meter-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.tone1 .pattern__meter--them i { background: var(--riso-pink); }
.tone1 .pattern__meter--you  i { background: var(--riso-blue); }

@keyframes meter-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tone1 .pattern__scale {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.45rem 0 1rem;
}

.tone1 .pattern__basis {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--ink);
  background: var(--accent-wash);
  margin: 0;
}

/* ---- Ruled out — absence is information -------------------------------- */

.tone1 .ruled {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.4rem 0 0.9rem;
}

.tone1 .ruled__chip {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.5rem;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* ---- Head-to-head bar under each row ----------------------------------- */

.tone1 .vs__bar {
  height: 6px;
  margin: 0.2rem 0 0.75rem;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(to right,
      var(--riso-blue) 0 var(--p, 50%),
      var(--riso-pink) var(--p, 50%) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .tone1 .pattern__meter i { animation: none; }
}

/* ---- Sentiment, power, notes -------------------------------------------- */
/*
 * Three scores per side is a table, and a table of six numbers is unreadable.
 * Bars let the ASYMMETRY be the thing you see — which is the actual finding.
 */

.tone1 .tone { display: grid; gap: 0.3rem; margin: 0.4rem 0 1.2rem; }

.tone1 .tone__who {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0.7rem 0 0.15rem; font-weight: 600;
}
.tone1 .tone__who--me   { color: var(--riso-blue); }
.tone1 .tone__who--them { color: var(--riso-pink); }

.tone1 .tone__row {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 2rem;
  align-items: center; gap: 0.5rem;
}
.tone1 .tone__k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tone1 .tone__track { height: 12px; border: 2px solid var(--ink); background: var(--paper-edge); }
.tone1 .tone__fill {
  display: block; height: 100%; width: var(--v, 0%);
  transform-origin: left center;
  animation: meter-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tone1 .tone__fill--warm   { background: var(--riso-yellow); }
.tone1 .tone__fill--tense  { background: var(--riso-pink); }
.tone1 .tone__fill--effort { background: var(--riso-blue); }
.tone1 .tone__v {
  font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  text-align: right; font-weight: 600;
}

/* Power is signed, so it gets a two-ended scale, never a fill bar. */
.tone1 .power {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 0.55rem; margin: 0.4rem 0 0.7rem;
}
.tone1 .power__end {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); max-width: 5.5rem; line-height: 1.25;
}
.tone1 .power__track {
  position: relative; display: block; height: 10px;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--riso-blue) 0%, var(--paper-edge) 50%, var(--riso-pink) 100%);
}
.tone1 .power__dot {
  position: absolute; top: 50%; left: var(--p, 50%);
  width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--paper); transform: translate(-50%, -50%);
}

/* ---- Strengths / weaknesses --------------------------------------------- */

.tone1 .notes { display: grid; gap: 0.55rem; margin-top: 0.5rem; }
/* Grid, so the tier caption always lands on its own row rather than trailing
   the sentence and running into it. */
.tone1 .notes .note {
  display: grid; justify-items: start;
  border: 2px solid var(--ink); padding: 0.65rem 0.8rem; background: var(--paper);
}
.tone1 .notes .note b {
  display: block; font-family: var(--f-display); font-variation-settings: 'wght' 800;
  font-size: 0.98rem; letter-spacing: -0.015em; margin-bottom: 0.2rem;
}
.tone1 .notes .note span {
  font-family: var(--f-display); font-variation-settings: 'wght' 450;
  font-size: 0.87rem; line-height: 1.45; color: var(--ink-soft);
}
.tone1 .note--good { box-shadow: 4px 4px 0 var(--riso-green); }
.tone1 .note--weak { box-shadow: 4px 4px 0 var(--riso-pink); }

/* ---- Severity register --------------------------------------------------- */
/*
 * Red is never roasted. It drops the accent entirely and reads plainly — the
 * visual equivalent of lowering your voice.
 */

.tone1 .card__kicker--green { background: var(--riso-green); color: #fff; }
.tone1 .card__kicker--red   { background: var(--ink); color: var(--paper); }

.tone1 .pattern__name--green { text-shadow: 3px 3px 0 var(--riso-green); }
.tone1 .pattern__name--red   { text-shadow: none; border-bottom: 3px solid var(--ink); padding-bottom: 0.3rem; }

.tone1 .pattern__meter--green i { background: var(--riso-green); }
.tone1 .pattern__meter--red   i { background: var(--ink); }

.tone1 .card__read--lead {
  font-variation-settings: 'wght' 600;
  font-size: 1.22rem; line-height: 1.35; max-width: 30ch;
}

/* ---- Intelligence dashboard --------------------------------------------- */
/*
 * The tier chip is the most important element here. Every score and flag says
 * how solid it is, and a "guess, honestly" must LOOK weaker than something
 * stated outright — otherwise the confidence is decorative.
 */

/*
 * The tier is a FOOTNOTE, not a headline.
 *
 * It first shipped as a solid black badge, which fought the card title for
 * attention and — being inline-flex — flowed straight after the sentence and
 * collided with it. It now sits on its own line as a quiet caption, with the
 * dot doing the work: filled, half, or hollow.
 */
.tone1 .tier {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0.15rem 0 0; margin-top: 0.55rem;
  border: none; border-top: 1px solid var(--paper-edge);
  width: 100%;
}

/* The dot carries the confidence; the words just name it. */
.tone1 .tier::before {
  content: ''; flex: none; align-self: center;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.tone1 .tier--direct    { color: var(--ink); }
.tone1 .tier--direct::before    { background: var(--riso-green); border-color: var(--ink); }
.tone1 .tier--inference::before { background: var(--riso-yellow); border-color: var(--ink-soft); }
.tone1 .tier--thin      { font-style: italic; letter-spacing: 0.08em; }
.tone1 .tier--thin::before      { background: transparent; border-style: dotted; }

.tone1 .tierline { margin: 0.3rem 0 0.9rem; }

/* ---- Gauges -------------------------------------------------------------- */

.tone1 .gauges { display: grid; gap: 0.55rem; margin: 0.4rem 0 0.9rem; }

.tone1 .gauge {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center; gap: 0.6rem;
}
.tone1 .gauge__k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tone1 .gauge__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.tone1 .gauge__side { display: grid; grid-template-columns: minmax(0,1fr) 1.8rem; align-items: center; gap: 0.3rem; }
.tone1 .gauge__side b {
  font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  text-align: right;
}
.tone1 .gauge__bar {
  display: block; height: 12px; width: var(--v, 0%);
  border: 2px solid var(--ink);
  transform-origin: left center;
  animation: meter-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tone1 .gauge__bar--me   { background: var(--riso-blue); }
.tone1 .gauge__bar--them { background: var(--riso-pink); }

.tone1 .gauge--solo { grid-template-columns: 7.5rem minmax(0, 1fr) 2rem; }
.tone1 .gauge__track { height: 12px; border: 2px solid var(--ink); background: var(--paper-edge); }
.tone1 .gauge__fill {
  display: block; height: 100%; width: var(--v, 0%); background: var(--riso-yellow);
  transform-origin: left center;
  animation: meter-grow 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tone1 .gauge__n {
  font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; text-align: right;
}

/* ---- Timeline ------------------------------------------------------------ */

.tone1 .beats { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0; }
.tone1 .beat {
  display: grid; gap: 0.15rem; padding: 0.6rem 0 0.6rem 1.15rem;
  border-left: 2px solid var(--ink); position: relative;
}
.tone1 .beat::before {
  content: ''; position: absolute; left: -7px; top: 0.85rem;
  width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--riso-yellow);
}
.tone1 .beat:last-child::before { background: var(--riso-pink); }
.tone1 .beat__stage {
  font-family: var(--f-display); font-variation-settings: 'wght' 800;
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: -0.01em;
}
.tone1 .beat__what {
  font-family: var(--f-display); font-variation-settings: 'wght' 450;
  font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft);
}

/* ---- Outlook bands ------------------------------------------------------- */

.tone1 .odds { display: grid; gap: 0.4rem; margin: 0.5rem 0 0.8rem; }
.tone1 .odds__row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  border: 2px solid var(--ink); padding: 0.55rem 0.7rem;
}
.tone1 .odds__what { font-family: var(--f-display); font-variation-settings: 'wght' 600; font-size: 0.92rem; }
.tone1 .odds__band {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.15rem 0.4rem; white-space: nowrap;
}
.tone1 .odds__row--likely   .odds__band { background: var(--riso-green); color: #fff; }
.tone1 .odds__row--possible .odds__band { background: var(--riso-yellow); color: var(--ink); }
.tone1 .odds__row--unlikely .odds__band { border: 1.5px dashed var(--ink-soft); color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .tone1 .gauge__bar, .tone1 .gauge__fill { animation: none; }
}

/* ---- Social graph -------------------------------------------------------- */

.tone1 .cliques { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.tone1 .clique {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: center; gap: 0.6rem;
  border: 2px solid var(--ink); padding: 0.6rem 0.7rem; background: var(--paper);
}
.tone1 .clique--0 { box-shadow: 4px 4px 0 var(--riso-blue); }
.tone1 .clique--1 { box-shadow: 4px 4px 0 var(--riso-pink); }
.tone1 .clique--2 { box-shadow: 4px 4px 0 var(--riso-green); }
.tone1 .clique__n {
  font-family: var(--f-mono); font-size: 0.68rem; font-weight: 700; color: var(--ink-soft);
}
.tone1 .clique__who {
  font-family: var(--f-display); font-variation-settings: 'wght' 700;
  font-size: 0.95rem; letter-spacing: -0.01em; line-height: 1.3;
}

/* ---- Bonds --------------------------------------------------------------- */

.tone1 .bonds { display: grid; gap: 0.45rem; margin: 0.5rem 0 0.8rem; }
.tone1 .bond {
  display: grid; grid-template-columns: minmax(0, 1fr) 5rem 2rem;
  align-items: center; gap: 0.5rem;
}
.tone1 .bond__who {
  font-family: var(--f-display); font-variation-settings: 'wght' 650;
  font-size: 0.9rem; letter-spacing: -0.01em;
}
.tone1 .bond__track { height: 12px; border: 2px solid var(--ink); background: var(--paper-edge); }
.tone1 .bond__track i {
  display: block; height: 100%; width: var(--v, 0%); background: var(--riso-pink);
  transform-origin: left center;
  animation: meter-grow 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tone1 .bond__n {
  font-family: var(--f-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink-soft);
}

/* ---- The matrix ---------------------------------------------------------- */
/*
 * A LOWER TRIANGLE, not a square.
 *
 * The square version had a solid black diagonal that dominated the card while
 * meaning "you versus yourself", and every value appeared twice because the
 * matrix is symmetric. Half the grid says the same thing with none of the
 * noise, and the colour ramp is scaled to the strongest bond in this group so
 * the full range is actually used.
 */

.tone1 .mx { border-collapse: separate; border-spacing: 2px; margin: 0.7rem 0 0.5rem; }

.tone1 .mx th {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
  padding: 0.2rem 0.4rem 0.2rem 0; text-align: right; white-space: nowrap;
}
.tone1 .mx th.mx--col { text-align: center; padding: 0.3rem 0 0; }

.tone1 .mx td {
  font-family: var(--f-mono); font-size: 0.68rem; font-variant-numeric: tabular-nums;
  text-align: center; width: 2.4rem; height: 2rem; padding: 0;
  border: 1.5px solid var(--ink);
  /* Opacity carries the strength. Floor of 0.15 so the weakest real bond is
     still visibly a bond rather than reading as empty. */
  background: color-mix(in oklab, var(--riso-pink)
              calc((0.15 + 0.85 * var(--v, 0)) * 100%), var(--paper));
  color: var(--ink);
}

/* A pair who barely answer each other: present, but plainly nothing. */
.tone1 .mx td.mx--none {
  background: transparent; border-color: var(--paper-edge); color: var(--ink-soft);
}
/* Above the diagonal — nothing to draw at all. */
.tone1 .mx td.mx--pad { background: none; border: none; }

.tone1 .mx-key {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.6rem;
}
.tone1 .mx-key__label {
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tone1 .mx-key__ramp {
  flex: 1; height: 10px; max-width: 9rem; border: 1.5px solid var(--ink);
  background: linear-gradient(to right,
    color-mix(in oklab, var(--riso-pink) 15%, var(--paper)),
    var(--riso-pink));
}

@media (prefers-reduced-motion: reduce) {
  .tone1 .bond__track i { animation: none; }
}