/* Heights blog interactive widgets. Aesthetic borrowed from
   worker/premium_viz_examples/001-baby-names: cream paper, dashed
   grid, muted editorial palette, direct labeling. */

.hw-card{
  background:#F8F7F4;
  border:1px solid #EFEDE6;
  border-radius:10px;
  padding:32px 36px 28px;
  font-family:inherit;
  color:#1A1A2E;
  /* Break out of the 720px blog column on wide viewports. */
  width:min(95vw, 1100px);
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin:48px 0;
}
@media (max-width:900px){
  .hw-card{
    width:auto;left:auto;transform:none;margin:36px 0;
    padding:24px 20px 20px;
  }
}
.hw-eyebrow{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#999;font-weight:600;margin:0 0 8px;
}
.hw-title{
  margin:0 0 6px;font-size:1.35rem;font-weight:700;color:#1A1A2E;
  letter-spacing:-.01em;line-height:1.25;
}
.hw-sub{
  margin:0 0 22px;font-size:.92rem;color:#777;
  font-style:italic;line-height:1.4;
}
.hw-attr{
  margin-top:22px;font-size:.72rem;color:#BBB;
  font-style:italic;text-align:right;
}

/* ── Widget 1: Reshuffle (year scrubber) ─────────────────────────── */
.hw-reshuffle .hw-year{
  font-size:3.6rem;font-weight:700;color:#1A1A2E;
  letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;text-align:center;margin:8px 0 4px;
}
.hw-reshuffle .hw-year-sub{
  text-align:center;font-size:.7rem;color:#999;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;margin-bottom:24px;
}
.hw-track{position:relative;height:38px;margin:0 18px 32px;}
.hw-track-line{
  position:absolute;top:18px;left:0;right:0;
  height:0;border-top:1px dashed #C9C5BA;
}
.hw-tick{position:absolute;top:14px;width:1px;height:8px;background:#C9C5BA;}
.hw-tick-label{
  position:absolute;top:26px;font-size:.68rem;color:#999;
  transform:translateX(-50%);font-variant-numeric:tabular-nums;
}
.hw-handle{
  position:absolute;top:6px;width:24px;height:24px;
  margin-left:-12px;background:#1A1A2E;
  border:3px solid #F8F7F4;border-radius:50%;
  box-shadow:0 0 0 1px #1A1A2E;
  cursor:grab;touch-action:none;transition:transform .15s;
}
.hw-handle:hover{transform:scale(1.08);}
.hw-handle:active{cursor:grabbing;transform:scale(1.14);}
.hw-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
@media (max-width:640px){.hw-cols{grid-template-columns:1fr;gap:28px;}}
.hw-col-title{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 14px;
}
.hw-col-tall .hw-col-title{color:#3A72A8;}
.hw-col-short .hw-col-title{color:#C85A3A;}
/* Four-column row: rank | name | bar | value (no overlap). */
.hw-row{
  display:grid;grid-template-columns:18px 110px 1fr 60px;
  align-items:center;gap:10px;height:26px;margin-bottom:6px;
}
.hw-row-rank{
  font-size:.72rem;color:#BBB;font-variant-numeric:tabular-nums;
  text-align:right;font-weight:600;
}
.hw-row-name{
  font-size:.85rem;color:#1A1A2E;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hw-row-bar{position:relative;height:14px;background:transparent;}
.hw-row-fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:1px;
  transition:width .55s cubic-bezier(.65,0,.35,1);
}
.hw-col-tall .hw-row-fill{background:rgba(58,114,168,.22);border-left:2px solid #3A72A8;}
.hw-col-short .hw-row-fill{background:rgba(200,90,58,.22);border-left:2px solid #C85A3A;}
.hw-row-val{
  font-size:.78rem;color:#1A1A2E;font-variant-numeric:tabular-nums;
  text-align:right;font-weight:600;
}
@media (max-width:640px){
  .hw-row{grid-template-columns:16px 84px 1fr 52px;gap:8px;}
  .hw-row-name{font-size:.78rem;}
}
.hw-gap-readout{
  text-align:center;margin:24px 0 0;font-size:.84rem;color:#777;
}
.hw-gap-readout strong{
  font-size:1rem;color:#1A1A2E;font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ── Widget 2: Trajectories ──────────────────────────────────────── */
.hw-trajectories .hw-svg-wrap{position:relative;}
.hw-trajectories svg{display:block;width:100%;height:auto;}
.hw-ghost{stroke:#C9C5BA;stroke-width:.6;fill:none;opacity:.28;}
.hw-line{
  fill:none;stroke-width:2.2;stroke-linejoin:round;
  stroke-linecap:round;transition:opacity .25s, stroke-width .25s;
}
.hw-end-label{font-size:.78rem;font-weight:600;}
.hw-end-connector{stroke-width:.6;fill:none;opacity:.5;}
.hw-axis{stroke:#CCC;stroke-width:.6;}
.hw-grid{stroke:#E8E6E0;stroke-dasharray:3 4;stroke-width:.6;}
.hw-axis-label{font-size:.68rem;fill:#888;}
.hw-annot{font-size:.72rem;fill:#999;font-style:italic;font-weight:600;}
.hw-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
  justify-content:center;
}
.hw-chip{
  font-size:.78rem;padding:5px 12px;border-radius:14px;
  border:1px solid currentColor;cursor:pointer;
  background:transparent;font-family:inherit;font-weight:600;
  transition:background .15s, color .15s;user-select:none;
}
.hw-chip[aria-pressed="true"]{background:currentColor;}
.hw-chip[aria-pressed="true"] .hw-chip-text{color:#F8F7F4;}
.hw-chip-text{color:currentColor;}

/* ── Widget 3: Slope chart ───────────────────────────────────────── */
.hw-slope svg{display:block;width:100%;height:auto;}
.hw-slope-line{
  fill:none;stroke-width:1.4;stroke-linecap:round;
  transition:opacity .2s, stroke-width .2s;
}
.hw-slope-dot{transition:r .2s;}
.hw-slope-line-faded{opacity:.14;}
.hw-slope-line-hover{stroke-width:3;}
.hw-slope-hit{
  fill:none;stroke:transparent;stroke-width:10;
  cursor:pointer;
}
.hw-slope-tooltip{
  position:absolute;pointer-events:none;
  background:#1A1A2E;color:#F8F7F4;
  padding:8px 12px;border-radius:6px;
  font-size:.74rem;line-height:1.5;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  display:flex;flex-direction:column;gap:1px;
  white-space:nowrap;z-index:10;
}
.hw-slope-tooltip strong{font-weight:700;font-size:.82rem;margin-bottom:3px;}
.hw-slope-tooltip span{font-variant-numeric:tabular-nums;color:#C9C5BA;}
.hw-slope-tooltip-delta{font-weight:700;}
.hw-slope-label{
  font-size:.74rem;fill:#1A1A2E;font-weight:600;pointer-events:none;
}
.hw-slope-connector{stroke-width:.6;fill:none;opacity:.5;}
.hw-slope-tabs{
  display:flex;justify-content:center;gap:0;margin-top:16px;
  border-top:1px dashed #DDD;padding-top:14px;
}
.hw-slope-tab{
  font-size:.78rem;padding:6px 16px;cursor:pointer;
  background:transparent;border:none;font-family:inherit;
  color:#999;font-weight:600;border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.hw-slope-tab[aria-pressed="true"]{
  color:#1A1A2E;border-bottom-color:#1A1A2E;
}
.hw-slope-legend{
  display:flex;justify-content:center;gap:18px;
  font-size:.74rem;color:#888;margin-top:10px;
}
.hw-slope-legend-swatch{
  display:inline-block;width:18px;height:2px;vertical-align:middle;
  margin-right:6px;border-radius:1px;
}