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

/* ── chart panel shell ── */
/* Owner re-cut 2026-07-04 ("the whole chart is slop"): the shell wears the in-game
   window body - a dark warm-black plate inside a thin metal frame hairline, squared
   corners (radius 0). Darker, no soft glow (owner tone law). */
.phc{
  background:#120d07;
  border:1px solid #3a3a3a;
  border-radius:0;
  box-shadow:var(--shadow-2), inset 0 0 0 1px rgba(0,0,0,0.65);
  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{
  /* game face on the data surface (Friz), small-caps, gold */
  font-family:var(--font-game);
  font-size:var(--text-md);
  font-variant:small-caps;
  letter-spacing:.04em;
  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:var(--space-1) var(--space-2);
  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 ── */
/* The carved chart WELL (owner re-cut 2026-07-04): a near-black recess sunk INTO the
   window body, framed by a thin metal hairline, hard inner shadow for depth, squared
   corners. Same recessed language as .wgf-well (wgf-chrome.css) - not a floating panel. */
.phc__plot{
  position:relative;
  height:320px;
  margin:var(--space-2) 0 0;
  background:#07070a;
  border:1px solid #3a3a3a;
  border-radius:0;
  box-shadow:inset 0 2px 7px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(0,0,0,0.7);
  padding:var(--space-2);
}
.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:var(--space-1);
  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;
}
/* Owner re-cut 2026-07-04: all solid rules, no dashes. min (buyout) = the gold headline;
   market (typical) = muted grey-white reference; qty = faint supply. Mirrors the canvas. */
.phc__legend-swatch--min{background:var(--wgf-gold-primary);border-radius:0;}
.phc__legend-swatch--market{background:rgba(190,186,172,0.72);border-radius:0;}
.phc__legend-swatch--qty{background:rgba(150,140,120,0.6);border-radius:0;}

/* ── hero variant (item page: the chart leads the page) ── */
.phc--hero .phc__plot{height:400px;}
@media(max-width:720px){
  .phc--hero .phc__plot{height:300px;}
  /* On narrow screens the space-between footer crams the caption against the
     legend (they visually overlap). Stack them: caption on its own line, the
     swatch legend below it wrapping cleanly. */
  .phc__footer{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-1);
  }
  .phc__legend{flex-wrap:wrap;row-gap:var(--space-1);}
}

/* ── 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{
  /* quiet Friz gold (owner re-cut): game face on the data surface, no spinners */
  font-family:var(--font-game);
  font-size:var(--text-sm);
  font-variant:small-caps;
  letter-spacing:.05em;
  color:var(--wgf-gold-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;
}

/* ── external HTML tooltip (replaces canvas tooltip — renders coin icons) ── */
.wgf-ct{
  position:absolute;
  pointer-events:none;
  /* near-black in-game tooltip plate, gold hairline, squared corners (the client's
     own tooltip language) - owner re-cut 2026-07-04 */
  background:rgba(6,6,10,0.98);
  border:1px solid rgba(240,192,64,0.4);
  border-radius:0;
  padding:var(--space-2) 12px;
  color:var(--wgf-text);
  opacity:0;
  transition:opacity .1s;
  z-index:10;
  transform:translate(-50%,-115%);
  white-space:nowrap;
}
.wgf-ct--flip-x{transform:translate(-100%,-115%);}
.wgf-ct__title{
  font-family:var(--font-game);
  font-size:var(--text-xs);
  color:var(--wgf-gold-primary);
  font-weight:600;
  font-variant:small-caps;
  letter-spacing:.04em;
  margin-bottom:var(--space-1);
}
.wgf-ct__row{
  display:flex;
  align-items:center;
  gap:var(--space-1);
  padding:2px 0;
}
.wgf-ct__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.4);
  flex:0 0 auto;
}
.wgf-ct__lbl{
  font-family:var(--font-ui);
  font-size:var(--text-xs);
  color:var(--wgf-muted);
  flex:1;
  margin-right:var(--space-1);
}
.wgf-ct__qty{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-sm);
  color:var(--wgf-muted);
}
.wgf-ct .wgf-price{font-size:var(--text-sm);}
.wgf-ct .wgf-price .wgf-num{color:var(--wgf-text);}

/* ── 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 var(--space-2);
}