/* Midas landing — Liveline price chart next to the live panel demo
   (25.09, Part B of the live-charts spec). Colors come from the :root
   variables in css/style.css; the fallbacks here only cover a missing
   variable. .stage-chip / .hw-stagechips are shared with the hero window,
   defined in style.css. */

/* ---------- window + chart split (contract: #prSplit > #prViewport, #prChart) ---------- */
.pr-split{
  display:flex;flex-direction:column;gap:20px;
  padding:20px;
}
.pr-split #prViewport{margin:0;}
@media(min-width:1000px){
  .pr-split{flex-direction:row;align-items:stretch;}
  .pr-split #prViewport{flex:0 1 auto;max-width:58%;overflow:auto;}
  .pr-split #prChart{flex:1 1 0;min-width:0;min-height:420px;}
}

.pr-chart{
  display:flex;flex-direction:column;gap:12px;
  background:var(--surface,#0E1116);border:1px solid var(--line-strong,rgba(255,255,255,.13));
  border-radius:14px;padding:14px;min-height:320px;box-sizing:border-box;
  position:relative;overflow:hidden;
}

.cd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cd-title{font-size:12.5px;font-weight:600;color:var(--text-dim,#9097A3);text-transform:uppercase;letter-spacing:.06em;}

.cd-stories{display:flex;gap:8px;flex-wrap:wrap;}
.cd-story-btn{
  background:linear-gradient(180deg,#ECC676,#D4A548);border:none;color:#1A1406;
  padding:7px 14px;min-height:32px;font-size:12px;font-weight:700;border-radius:999px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:filter .15s ease, transform .15s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(224,178,90,.55);
}
.cd-story-btn--lock{
  background:linear-gradient(180deg,#C6BCF2,#A99CF5);color:#1A1730;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px rgba(169,156,245,.55);
}
.cd-story-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.cd-story-btn:active{transform:translateY(0);filter:brightness(.96);}
.cd-story-btn:focus-visible{outline:2px solid var(--gold,#E0B25A);outline-offset:2px;}

.cd-body{
  position:relative;flex:1 1 auto;min-height:240px;border-radius:10px;overflow:hidden;
  background:#050607;
}
.cd-chart{position:absolute;inset:0;}

.cd-stepcap{
  position:absolute;left:10px;right:10px;top:10px;
  background:rgba(5,6,7,.82);border:1px solid var(--line-strong,rgba(255,255,255,.13));
  border-radius:10px;padding:10px 14px;
  font-size:13.5px;font-weight:600;color:var(--text,#F2F0EA);line-height:1.35;
  box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;
}
@media(min-width:640px){.cd-stepcap{font-size:15px;}}

.cd-stagechips{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:flex-start;}
/* .hw-stagechips (style.css) sets display:flex unconditionally for the hero
   window's always-visible chips; that author rule outranks the browser's
   default [hidden]{display:none}, so the demo panel's own chips (shown only
   while a story runs) need their own, more specific override. */
.cd-stagechips[hidden]{display:none;}

.cd-caption{font-size:11.5px;color:var(--text-faint,#5E6470);font-style:italic;}

@media(max-width:560px){
  .pr-chart{padding:12px;}
  .cd-body{min-height:280px;}
}