/* Release 9 — community market panel.
   Uses the site's own brand tokens rather than the dark dashboard look
   of the reference: this sits inside existing community pages and has to
   belong to them. Semantic up/down colours are separate from the brand
   accent so a rising figure never reads as a button. */

.hp-market{
  padding:56px 0;
  background:var(--cream,#F0E9E0);
}

.hp-market__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:28px;
}
.hp-market__head h2{margin:6px 0 0;letter-spacing:-.02em}

.hp-market__asof{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;color:#5b6478;
  background:#fff;border:1px solid rgba(8,19,60,.1);
  border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.hp-market__asof em{font-style:normal;color:#9a6206}
.hp-market__pulse{
  width:7px;height:7px;border-radius:50%;background:#1d7a4c;
  box-shadow:0 0 0 3px rgba(29,122,76,.16);flex-shrink:0;
}

/* ── headline tiles ── */
.hp-market__kpis{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px;
}
.hp-kpi{
  background:#fff;border:1px solid rgba(8,19,60,.1);border-radius:14px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:7px;
}
.hp-kpi__label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:#5b6478;font-weight:600;
}
.hp-kpi__value{
  font-size:1.62rem;font-weight:600;line-height:1;color:#08133C;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.hp-kpi__value small{font-size:.62em;font-weight:500;opacity:.6;margin-left:1px}
.hp-kpi__delta{
  font-size:.78rem;font-weight:600;display:flex;flex-direction:column;gap:1px;margin-top:auto;
}
.hp-kpi__delta span{font-weight:400;font-size:.72rem;color:#7c849b}
.hp-kpi__delta.up{color:#1d7a4c}
.hp-kpi__delta.down{color:#a5341a}
.hp-kpi__delta.flat{color:#5b6478}

/* ── two-up ── */
.hp-market__split{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.hp-market__card{
  background:#fff;border:1px solid rgba(8,19,60,.1);border-radius:14px;padding:22px 24px;
}
.hp-market__card h3{
  font-size:.95rem;margin:0 0 18px;color:#08133C;letter-spacing:-.01em;
}

/* ── trend bars ── */
.hp-trend{
  display:flex;align-items:flex-end;gap:5px;height:170px;
  padding-bottom:2px;overflow-x:auto;
}
.hp-trend__col{
  flex:1 1 0;min-width:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;
}
.hp-trend__bar{
  width:100%;border-radius:5px 5px 2px 2px;position:relative;
  background:linear-gradient(180deg,#0E2885,#2a49b5);
  transition:filter .15s ease;
}
.hp-trend__col:hover .hp-trend__bar{filter:brightness(1.25)}
.hp-trend__tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#08133C;color:#fff;font-size:.72rem;line-height:1.4;
  padding:7px 10px;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:5;
}
.hp-trend__col:hover .hp-trend__tip,
.hp-trend__col:focus-within .hp-trend__tip{opacity:1}
.hp-trend__x{
  font-size:.64rem;color:#7c849b;margin-top:7px;
  white-space:nowrap;overflow:hidden;
}

/* ── investor rows ── */
.hp-metric{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(8,19,60,.08);
}
.hp-metric:last-of-type{border-bottom:0}
.hp-metric strong{display:block;font-size:.9rem;font-weight:600;color:#08133C}
.hp-metric span{display:block;font-size:.75rem;color:#7c849b;margin-top:2px;max-width:34ch}
.hp-metric b{
  font-size:1.14rem;font-weight:600;color:#08133C;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ── notes ── */
.hp-market__note{
  font-size:.76rem;color:#7c849b;line-height:1.55;margin:14px 0 0;
}
.hp-market__source{
  font-size:.78rem;color:#5b6478;line-height:1.6;margin:20px 0 0;max-width:88ch;
}
.hp-market__source a{color:#0E2885}
.hp-market__cold{
  background:#fff;border:1px solid rgba(8,19,60,.1);border-radius:14px;
  padding:22px 24px;font-size:.92rem;color:#5b6478;margin:0;
}

@media (max-width:1080px){
  .hp-market__kpis{grid-template-columns:repeat(3,1fr)}
  .hp-market__split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hp-market{padding:42px 0}
  .hp-market__kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .hp-kpi{padding:15px}
  .hp-kpi__value{font-size:1.35rem}
  .hp-trend{height:140px}
  .hp-trend__x{font-size:.58rem}
}