/* M14 — Price-History Chart
   Single-homed canonical CSS (one file, one concern).
   Tokens: var(--wgf-*) — never :root here.
   Brand gold: #f0c040 / var(--wgf-gold-primary). */

/* ── chart panel shell ── */
.phc{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  padding:var(--space-3) var(--space-4) var(--space-3);
}

/* ── header row ── */
.phc__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-2);
}
.phc__title-block{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.phc__title{
  font-family:var(--font-display);
  font-size:var(--text-md);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--wgf-gold-primary);
  margin:0;
  line-height:1.2;
}
.phc__scope{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  letter-spacing:.04em;
}
.phc__header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-2);
}

/* ── delta badge (direction only) ── */
.phc__delta{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-variant-numeric:tabular-nums;
  font-weight:500;
  padding:2px var(--space-2);
  border-radius:var(--radius-control);
  background:var(--wgf-panel-3);
  border:1px solid var(--wgf-border-neutral);
}
.phc__delta--up  {color:var(--wgf-up);}
.phc__delta--down{color:var(--wgf-down);}
.phc__delta--neu {color:var(--wgf-muted);}

/* ── range toggle chips ── */
.phc__ranges{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  flex-wrap:wrap;
}
.phc__range-btn{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--wgf-muted);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:3px 10px;
  cursor:pointer;
  transition:color var(--motion-fast) var(--ease-standard),
             background var(--motion-fast) var(--ease-standard),
             border-color var(--motion-fast) var(--ease-standard);
  appearance:none;
  line-height:1.5;
}
.phc__range-btn:hover{
  color:var(--wgf-gold-bright);
  border-color:var(--wgf-border);
}
.phc__range-btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
.phc__range-btn[aria-pressed="true"]{
  color:var(--wgf-on-gold);
  background:var(--wgf-gold-primary);
  border-color:var(--wgf-gold-primary);
  font-weight:600;
}
@media(prefers-reduced-motion:reduce){
  .phc__range-btn{transition:none;}
}

/* ── plot area ── */
.phc__plot{
  position:relative;
  height:320px;
  margin:var(--space-2) 0 0;
}
.phc__plot--compact{
  height:160px;
}
.phc__plot canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

/* ── footer caption ── */
.phc__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid var(--wgf-border-neutral-soft);
}
.phc__caption{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  letter-spacing:.03em;
}
.phc__legend{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.phc__legend-item{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}
.phc__legend-swatch{
  display:inline-block;
  width:20px;
  height:2px;
  border-radius:1px;
  flex:0 0 auto;
}
/* market = solid gold rule; min = dashed gold-muted rule */
.phc__legend-swatch--market{background:var(--wgf-gold-primary);}
.phc__legend-swatch--min{
  background:transparent;
  height:0;
  border-radius:0;
  border-top:2px dashed var(--wgf-gold-muted);
}

/* ── empty state (collecting) ── */
.phc__empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:220px;
  gap:var(--space-2);
  color:var(--wgf-muted);
}
.phc__empty-icon{
  width:40px;
  height:40px;
  opacity:.35;
}
.phc__empty-title{
  font-family:var(--font-display);
  font-size:var(--text-sm);
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--wgf-muted);
  margin:0;
}
.phc__empty-sub{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-muted);
  margin:0;
  text-align:center;
  max-width:32ch;
}

/* ── compact variant ── */
.phc--compact{
  padding:var(--space-2) var(--space-3);
}
.phc--compact .phc__title{font-size:var(--text-sm);}
.phc--compact .phc__scope{font-size:.7rem;}
.phc--compact .phc__footer{margin-top:var(--space-1);padding-top:var(--space-1);}

/* ── sparse data note overlay ── */
.phc__sparse-note{
  position:absolute;
  top:var(--space-2);
  right:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  background:var(--wgf-panel-2);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-control);
  padding:2px 8px;
}