// Subtle striped placeholder with monospace label
function Ph({ label = "image", variant = "navy", style }) {
  const hues = {
    navy:    { a: "#163088", b: "#1F3FA8", fg: "#C8D2F0" },
    navySoft:{ a: "#D6DEF5", b: "#E8EDFA", fg: "#3A4A85" },
    light:   { a: "#E8EDFA", b: "#F1F4FB", fg: "#5567A5" },
    deep:    { a: "#0F2266", b: "#163088", fg: "#A6B3DC" },
  };
  const c = hues[variant] || hues.navy;
  const bg = `repeating-linear-gradient(135deg, ${c.a} 0 2px, ${c.b} 2px 16px)`;
  return (
    <div className="ph" style={{ background: bg, color: c.fg, ...style }} data-label={label} />
  );
}
window.Ph = Ph;