/* ============================================================
   Coindaily - Bitcoin MVRV Z-Score page
   Complements styles.css + indicator-page.css.
   ============================================================ */

/* current reading: verdict + gauge hero */
.mz-hero { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 22px 24px 18px; margin: 22px 0 18px; }
.mz-verdict { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.mz-v-num { font-family: var(--mono); font-size: 54px; font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; flex: none; }
.mz-v-zone { font-size: 19px; font-weight: 700; }
.mz-v-mean { font-size: 12.5px; line-height: 1.5; color: var(--tx-mid); margin-top: 6px; max-width: 580px; }

/* gauge: where the score sits on the scale */
.mz-gauge { margin-bottom: 19px; }
.mz-gauge-bar { position: relative; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #4F9E7C 0%, #4F9E7C 6.6%, #C99A4B 13%, #C99A4B 71.7%, #BE5E6C 78%, #BE5E6C 100%); }
.mz-gauge-marker { position: absolute; top: 50%; width: 4px; height: 19px; background: #fff; border-radius: 2px; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(10,13,18,.75); transition: left .5s ease; z-index: 2; }
.mz-tick { position: absolute; top: 15px; transform: translateX(-50%); font-family: var(--mono); font-size: 8.5px; color: var(--tx-faint); }
.mz-tick::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 5px; background: rgba(255,255,255,.22); margin-bottom: 2px; }
.mz-gauge-scale { display: flex; justify-content: space-between; margin-top: 26px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.mz-gauge-scale .g-u { color: #5f9277; } .mz-gauge-scale .g-f { color: var(--amber); } .mz-gauge-scale .g-o { color: #ad6670; }

/* supporting figures */
.mz-substats { display: flex; gap: 28px; padding-top: 16px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.mz-substats span { display: flex; flex-direction: column; gap: 5px; }
.mz-substats i { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-dim); font-style: normal; }
.mz-substats b { font-family: var(--mono); font-size: 16px; color: var(--tx-hi); font-weight: 600; }

/* chart */
.mz-wrap { padding: 14px 16px 12px; }
.mz-svg { height: 420px; }
.mz-leg-inline { display: flex; align-items: center; gap: 15px; }
.mz-leg-inline .lg { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--tx-mid); }
.mz-leg-inline .lg i { width: 14px; height: 2.5px; border-radius: 2px; }
/* floating axis labels */
.mz-yl { position: absolute; left: 12px; transform: translateY(-50%); font-family: var(--mono); font-size: 9.5px; font-weight: 500; color: #d4d8de; background: rgba(8,8,10,.5); padding: 1px 6px; border-radius: 3px; pointer-events: none; }
.mz-yr { position: absolute; right: 14px; transform: translateY(-50%); font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: #E0954D; background: rgba(8,8,10,.5); padding: 1px 6px; border-radius: 3px; pointer-events: none; }

/* how to read it: plain-English explainer */
.mz-explain { font-size: 13.5px; line-height: 1.6; color: var(--tx-mid); max-width: 780px; margin: 0 0 16px; }
.mz-explain b { color: var(--tx-hi); }
.mz-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.mz-zone-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 15px 17px; transition: .15s; }
.mz-zone-card .zc-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--tx-hi); margin-bottom: 9px; }
.mz-zone-card .zc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mz-zone-card.u .zc-dot { background: #4F9E7C; } .mz-zone-card.f .zc-dot { background: #C99A4B; } .mz-zone-card.o .zc-dot { background: #BE5E6C; }
.mz-zone-card .zc-th { margin-left: auto; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .02em; color: var(--tx-dim); border: 1px solid var(--hairline); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.mz-zone-card .zc-now { display: none; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0B0E14; border-radius: 4px; padding: 2px 6px; }
.mz-zone-card p { font-size: 12px; line-height: 1.55; color: var(--tx-mid); margin: 0; }
/* current zone highlighted */
.mz-zone-card.active { background: var(--panel-2); }
.mz-zone-card.active .zc-now { display: inline-flex; }
.mz-zone-card.u.active { border-color: rgba(79,158,124,.5); box-shadow: inset 3px 0 0 #4F9E7C; }
.mz-zone-card.u.active .zc-now { background: #4F9E7C; }
.mz-zone-card.f.active { border-color: rgba(201,154,75,.5); box-shadow: inset 3px 0 0 #C99A4B; }
.mz-zone-card.f.active .zc-now { background: #C99A4B; }
.mz-zone-card.o.active { border-color: rgba(190,94,108,.5); box-shadow: inset 3px 0 0 #BE5E6C; }
.mz-zone-card.o.active .zc-now { background: #BE5E6C; }
.mz-usenote { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.55; color: var(--tx-dim); max-width: 820px; margin: 0 0 8px; }
.mz-usenote svg { flex: none; margin-top: 2px; color: var(--tx-faint); }
@media (max-width: 760px) { .mz-zones { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .mz-verdict { gap: 16px; }
  .mz-v-num { font-size: 44px; }
  .mz-leg-inline { display: none; }
  .mz-leg-row { grid-template-columns: 14px 1fr; row-gap: 3px; }
  .mz-leg-row .desc { grid-column: 2; }
}

/* loading skeleton - shimmer until the real CoinGlass MVRV-Z lands */
@keyframes mz-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
body.mz-loading #mz-zscore, body.mz-loading #mz-zone, body.mz-loading #mz-mean,
body.mz-loading #mz-mvrv, body.mz-loading #mz-mc, body.mz-loading #mz-rc {
  color: transparent !important; border-radius: 5px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: mz-shimmer 1.3s ease-in-out infinite;
}
body.mz-loading #mz-wrap { position: relative; }
body.mz-loading #mz-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: mz-shimmer 1.3s ease-in-out infinite;
}
body.mz-loading #mz-marker { visibility: hidden; }

/* RSI chart: reserve a strip below the 420px plot for the x-axis date row (keeps it clear of the price labels) */
#rsi-wrap { padding-bottom: 32px; }

/* loading skeleton - shimmer until the real CoinGlass spot closes land (RSI page) */
body.rsi-loading #rsi-now, body.rsi-loading #rsi-zone, body.rsi-loading #rsi-mean,
body.rsi-loading #rsi-7d, body.rsi-loading #rsi-avg, body.rsi-loading #rsi-px {
  color: transparent !important; border-radius: 5px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: mz-shimmer 1.3s ease-in-out infinite;
}
body.rsi-loading #rsi-wrap { position: relative; }
body.rsi-loading #rsi-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--elevated) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; animation: mz-shimmer 1.3s ease-in-out infinite;
}
body.rsi-loading #rsi-marker { visibility: hidden; }