/* ============================================================
   CABLEOLOGY — live pricing dashboard
   Loaded after styles.css; reuses its tokens (--flame, --cream…).
   ============================================================ */

.pricing-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:22px;padding:14px 18px;background:var(--cream);border:1px solid var(--rule)}
.pricing-bar .lbl{font-family:"Archivo",sans-serif;font-stretch:110%;font-weight:700;
  font-size:.82rem;color:var(--ink);letter-spacing:.02em}
.pricing-bar .spacer{margin-left:auto}
.btn-ghost{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);
  background:#fff;padding:8px 14px;font:inherit;font-size:.84rem;color:#403B36;cursor:pointer}
.btn-ghost:hover{border-color:var(--flame);color:#B8320C}

/* ---------- the grid ---------- */
/* 2x2 at desktop — four cards balance better than 3+1 */
.dash{display:grid;gap:16px;margin-top:18px;grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.dash{grid-template-columns:1fr}}

/* ---------- card ---------- */
.pcard{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--flame);
  display:flex;flex-direction:column;min-width:0}
.pcard:nth-child(2){border-top-color:var(--ember)}
.pcard:nth-child(3){border-top-color:var(--amber)}
.pcard:nth-child(4){border-top-color:var(--sun)}

.pcard-head{display:flex;align-items:flex-start;gap:10px;padding:16px 18px 10px}
.pcard-head h3{font-size:1.02rem;margin:0;flex:1;min-width:0}
.pcard-head .sub{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;
  font-size:.76rem;color:#6E655D;margin-top:3px;letter-spacing:0}

/* status dot */
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px;background:#C9C2BA}
.dot.live{background:#128C4B;box-shadow:0 0 0 3px rgba(18,140,75,.16)}
.dot.stale{background:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.18)}
.dot.down{background:#C4360F;box-shadow:0 0 0 3px rgba(196,54,15,.16)}
@media (prefers-reduced-motion:no-preference){
  .dot.live{animation:pulse 2.6s ease-in-out infinite}
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(18,140,75,.16)}
  50%{box-shadow:0 0 0 6px rgba(18,140,75,.05)}}

/* the number */
.pcard-figure{padding:2px 18px 12px}
.pcard-figure .big{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;
  font-size:1.85rem;color:var(--ink);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.pcard-figure .unit{font-size:.8rem;color:#6E655D;margin-left:5px;font-weight:400;
  font-family:"IBM Plex Sans",sans-serif;font-stretch:normal}
.pcard-figure .alt{font-size:.85rem;color:#5C554E;margin-top:4px;font-variant-numeric:tabular-nums}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;
  margin-top:6px;font-variant-numeric:tabular-nums}
.delta.up{color:#B8320C}
.delta.down{color:#128C4B}
.delta.flat{color:#6E655D}
.delta .arrow{font-size:.72rem}

/* embedded widget area */
.pcard-embed{border-top:1px solid var(--rule);background:#FBF9F7;min-height:150px;
  position:relative;overflow:hidden}
/* a panel holding markup rather than a chart: no fixed height, white ground */
.pcard-embed--plain{min-height:0;background:#fff;padding:14px 18px}
.pcard-embed--plain .embed-fallback{position:static;padding:0;background:none;text-align:left}
.pcard-embed iframe{display:block;width:100%;border:0}
.pcard-embed .tradingview-widget-container{width:100%}
.embed-fallback{position:absolute;inset:0;z-index:2;display:none;place-items:center;
  text-align:center;margin:0;padding:18px;background:#FBF9F7;font-size:.8rem;
  color:#6E655D;line-height:1.5;overflow:auto}
.embed-fallback.show{display:grid}

.pcard-foot{border-top:1px solid var(--rule);padding:9px 18px;font-size:.74rem;
  color:#8C847C;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:auto}
.pcard-foot a{color:#8C847C}
.pcard-foot .src{margin-left:auto}

/* ---------- PVC card ---------- */
.pvc-meta{list-style:none;padding:0;margin:0;font-size:.82rem}
.pvc-meta li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid #F2EBE4}
.pvc-meta li:last-child{border-bottom:0}
.pvc-meta span{color:#6E655D}
.pvc-meta b{color:var(--ink);font-weight:600;text-align:right}

/* editor */
.pvc-editor{border-top:1px solid var(--rule);background:var(--cream);padding:16px 18px;display:none}
.pvc-editor.open{display:block}
.pvc-editor h4{font-size:.88rem;margin:0 0 4px}
.pvc-editor .warn{font-size:.76rem;color:#8A4A18;background:#FFF6EC;border:1px solid var(--sun);
  padding:8px 10px;margin:8px 0 12px;line-height:1.45}
.pvc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.pvc-grid{grid-template-columns:1fr}}
.pvc-grid label{display:flex;flex-direction:column;gap:4px;font-size:.76rem;
  font-weight:600;color:#403B36}
.pvc-grid input{font:inherit;font-size:.86rem;padding:8px 10px;border:1px solid #C9C4BC;background:#fff}
.pvc-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.pvc-out{margin-top:12px;display:none}
.pvc-out.show{display:block}
.pvc-out textarea{width:100%;min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;padding:10px;border:1px solid #C9C4BC;background:#fff;resize:vertical}
.pvc-out p{font-size:.76rem;color:#6E655D;margin:8px 0 0}

.preview-flag{display:none;align-items:center;gap:8px;font-size:.76rem;color:#8A4A18;
  background:#FFF6EC;border-top:1px solid var(--sun);padding:8px 18px}
.preview-flag.show{display:flex}
.preview-flag button{margin-left:auto;background:none;border:1px solid var(--sun);
  padding:4px 9px;font:inherit;font-size:.74rem;color:#8A4A18;cursor:pointer}

/* ---------- copper calculator ---------- */
.calc{margin-top:26px;border:1px solid var(--rule);background:#fff}
.calc-head{background:var(--ink);color:#fff;padding:14px 18px}
.calc-head h3{color:#fff;margin:0;font-size:1.02rem}
.calc-head p{margin:3px 0 0;font-size:.78rem;color:#A79E96;max-width:none}
.calc-body{padding:16px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;align-items:end}
.calc-body label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:600;color:#403B36}
.calc-body input,.calc-body select{font:inherit;font-size:.9rem;padding:9px 11px;
  border:1px solid #C9C4BC;background:#fff}
.calc-result{border-top:1px solid var(--rule);background:var(--cream);padding:14px 18px;
  display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
.calc-result .n{font-family:"Archivo",sans-serif;font-stretch:112%;font-weight:800;
  font-size:1.5rem;color:var(--flame);font-variant-numeric:tabular-nums}
.calc-result .cap{font-size:.78rem;color:#6E655D}
.calc-note{padding:0 18px 14px;font-size:.74rem;color:#8C847C;line-height:1.5}

/* ---------- live price link ---------------------------------------------
   Stands where the figure used to. The price itself lives on the LME's own
   page: a link carries no data licence, a published number does. */
.pcard-figure .big .live-link{display:inline-flex;flex-direction:column;gap:3px;
  font-family:"IBM Plex Sans",sans-serif;font-size:1.02rem;font-weight:600;
  font-stretch:normal;letter-spacing:0;line-height:1.25;
  color:#C4360F;text-decoration:none;border-bottom:2px solid transparent}
.pcard-figure .big .live-link:hover{border-bottom-color:#C4360F}
.pcard-figure .big .live-link b{font-weight:600}
.pcard-figure .big .live-link b::after{content:"\2197";margin-left:6px;font-size:.9em}
.pcard-figure .big .live-link span{font-size:.78rem;font-weight:400;color:#6E655D;
  letter-spacing:.01em}