/* PREMIUM — two Mercor offers on one scale, and a measured bracket over the
   difference. Hue is constant (violet = Mercor); treatment carries the
   condition. --lo / --hi are the two bar heights, set on .prm by the module. */
.prm{--v:var(--violet);display:grid;gap:1.25rem}

.prm__who{font-size:.86rem;line-height:1.6;color:var(--text-3);max-width:52rem}
.prm__who b{color:var(--v);font-family:var(--mono);font-weight:600;font-size:.8rem;letter-spacing:.04em}
.prm__dot{
  display:inline-block;width:.5rem;height:.5rem;border-radius:100px;background:var(--v);
  margin-right:.5rem;vertical-align:middle;box-shadow:0 0 12px var(--v);
}

.prm__chart{display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:.7rem;padding-bottom:4.4rem}

/* ------------------------------------------------------------------ axis */
.prm__axis{position:relative;height:16.5rem}
.prm__tick{
  position:absolute;right:0;transform:translateY(50%);
  font-size:.6rem;font-weight:500;letter-spacing:.06em;color:var(--text-4);white-space:nowrap;
}

/* ------------------------------------------------------------------ plot */
.prm__plot{
  position:relative;height:16.5rem;
  --gapw:clamp(1rem,3.4vw,2.6rem);
  display:grid;grid-template-columns:minmax(4rem,10rem) minmax(4rem,10rem) minmax(9rem,15rem);
  justify-content:start;column-gap:var(--gapw);
  border-bottom:1px solid var(--line-2);
}
/* the level the cleaned version reached, carried across the raw bar and on to
   the foot of the bracket — and no further, because it measures nothing past it */
.prm__lvl{grid-area:1 / 1 / 2 / 3;position:relative;pointer-events:none}
.prm__lvl::before{
  content:"";position:absolute;left:0;right:calc(-1 * var(--gapw));bottom:var(--lo);
  border-top:1px dashed var(--yellow);opacity:.45;
}

.prm__col{position:relative;grid-row:1}
.prm__col.is-scrubbed{grid-column:1}
.prm__col.is-raw{grid-column:2}
.prm__gap{grid-area:1 / 3 / 2 / 4}
.prm__hit{position:absolute;inset:0;display:block;padding:0;text-align:center;border-radius:var(--radius)}
.prm__plot.is-sel .prm__col{opacity:.5;transition:opacity var(--dur-2) var(--ease)}
.prm__plot.is-sel .prm__col.is-on{opacity:1}

.prm__bar{
  position:absolute;left:0;right:0;bottom:0;height:var(--p,0%);
  --st:var(--v);
  background:linear-gradient(180deg,var(--v),var(--violet-deep));
  box-shadow:inset 0 0 0 1px var(--v);border-radius:2px 2px 0 0;
  transition:height var(--dur-4) var(--ease),width var(--dur-4) var(--ease),
             box-shadow var(--dur-1) var(--ease);
}
.prm__col.is-raw .prm__bar{
  background-color:var(--violet-deep);background-image:none;
  background-image:repeating-linear-gradient(45deg,var(--v) 0 2px,transparent 2px 6px);
}
.prm__col.is-on .prm__bar{box-shadow:inset 0 0 0 2px var(--v),0 0 30px -8px var(--v)}

.prm__val{
  position:absolute;left:0;right:0;bottom:var(--p,0%);padding-bottom:.45rem;
  transition:bottom var(--dur-4) var(--ease);
}
.prm__val b{font-size:.88rem;font-weight:500;color:var(--text);letter-spacing:-.03em}
.prm__col.is-on .prm__val b{color:var(--violet)}

.prm__cond{
  position:absolute;top:100%;left:0;right:0;padding-top:.85rem;
  display:grid;gap:.22rem;text-align:center;
}
.prm__cond b{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--v)}
.prm__cond span{font-size:.78rem;line-height:1.35;color:var(--text-3)}
.prm__col.is-raw .prm__cond span{color:var(--text-2)}

/* --------------------------------------------------------- the bracket */
.prm__gap{position:relative}
.prm__brk{
  position:absolute;left:0;bottom:var(--lo);height:calc(var(--hi) - var(--lo));width:.9rem;
  border-left:1.5px solid var(--yellow);border-top:1.5px solid var(--yellow);border-bottom:1.5px solid var(--yellow);
}
/* the callout sits on its own ground so the level line cannot read through it */
.prm__delta{
  position:absolute;left:1.5rem;right:0;bottom:calc((var(--lo) + var(--hi)) / 2);
  transform:translateY(50%);display:grid;gap:.18rem;
  background:var(--surface-2);border-left:2px solid var(--yellow);
  padding:.6rem .7rem .65rem;border-radius:0 var(--radius) var(--radius) 0;
}
.prm__dv{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:500;color:var(--yellow);letter-spacing:-.035em;line-height:1}
.prm__dp{font-size:.66rem;letter-spacing:.06em;color:var(--yellow-2);line-height:1.35}
.prm__dn{font-size:.68rem;line-height:1.5;color:var(--text-4);margin-top:.25rem}

.prm__gap,.prm__lvl{transition:opacity var(--dur-2) var(--ease)}
.prm.is-nogap .prm__gap,.prm.is-nogap .prm__lvl{opacity:0;visibility:hidden}

/* -------------------------------------------------------------- chrome */
.prm__ctrl{
  display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center;
  border-top:1px solid var(--line);padding-top:1rem;
}
.prm__read{font-size:.8rem;line-height:1.5;color:var(--text-3);flex:1;min-width:14rem}

/* ------------- narrow: horizontal bars stacked, bracket beneath ---------- */
@media (max-width:680px){
  .prm__chart{grid-template-columns:1fr;padding-bottom:0}
  .prm__axis{display:none}
  .prm__lvl{display:none}
  .prm__plot{
    height:auto;grid-template-columns:1fr;row-gap:1.35rem;border-bottom:0;
  }
  /* undo the desktop three-column placement */
  .prm__col{min-height:5.6rem}
  .prm__col.is-scrubbed{grid-column:1;grid-row:1}
  .prm__col.is-raw{grid-column:1;grid-row:2}
  .prm__gap{grid-area:3 / 1 / 4 / 2}
  .prm__ctrl{flex-direction:column;align-items:flex-start;gap:.9rem}
  .prm__hit{
    position:relative;inset:auto;width:100%;      /* a button is fit-content by default */
    display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem;text-align:left;
  }
  /* the empty rail behind a horizontal bar is the only scale cue left once
     the vertical axis is gone */
  .prm__hit::before{
    content:"";grid-row:2;grid-column:1;height:1.5rem;border-radius:2px;
    background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);
  }
  .prm__val{position:static;padding:0;text-align:left;grid-row:1;grid-column:1}
  .prm__val b{font-size:.95rem}
  .prm__bar{
    position:relative;left:auto;right:auto;bottom:auto;grid-row:2;grid-column:1;z-index:1;
    height:1.5rem;width:var(--p,0%);border-radius:0 2px 2px 0;min-width:2px;
  }
  .prm__cond{position:static;padding-top:.1rem;text-align:left;grid-row:3;grid-column:1}
  .prm__cond b{font-size:.62rem}

  .prm__gap{height:auto;padding-top:.2rem}
  .prm__brk{
    left:var(--lo);bottom:auto;top:0;width:calc(var(--hi) - var(--lo));height:.8rem;
    border-left:1px solid var(--yellow);border-right:1px solid var(--yellow);
    border-top:0;border-bottom:1px solid var(--yellow);
  }
  .prm__delta{
    position:static;transform:none;margin-top:1.15rem;
  }
}
@media (max-width:420px){
  .prm__dn{font-size:.66rem}
  .prm__read{min-width:0}
}