/* Income-defect article — figure components */

/* ---------------- quarter explorer ---------------- */
.qx-tabs { display: inline-flex; gap: 6px; background: var(--puw-surface-2); border: 1px solid var(--puw-border-light); border-radius: var(--radius-full); padding: 5px; margin-bottom: 22px; }
.qx-tabs button { font-family: var(--font-action); font-weight: 600; font-size: 13.5px; color: var(--puw-teal-600); background: none; border: none; border-radius: var(--radius-full); padding: 9px 18px; cursor: pointer; transition: all .22s; }
.qx-tabs button:hover { color: var(--puw-coral-600); }
.qx-tabs button.on { background: var(--puw-coral-600); color: #fff; box-shadow: 0 8px 20px rgba(255,54,33,0.24); }
.qx-body { display: grid; grid-template-columns: 200px 1fr; gap: 30px; align-items: start; }
.qx-rate { text-align: center; padding: 8px 0; }
.qx-rate-v { font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--puw-teal-900); font-variant-numeric: tabular-nums; }
.qx-rate-v .u { font-size: 26px; color: var(--puw-slate-400); margin-left: 2px; }
.qx-rate-l { font-family: var(--font-meta); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--puw-slate-400); margin-top: 8px; }
.qx-rate-track { height: 8px; border-radius: 5px; background: var(--puw-slate-100); overflow: hidden; margin-top: 14px; }
.qx-rate-fill { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--puw-teal-mid, #248E9C), var(--puw-coral-500)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.qx-cats { display: flex; flex-direction: column; gap: 14px; }
.qx-cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.qx-cat-head .nm { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--puw-teal-900); }
.qx-cat-head .pc { font-family: var(--font-meta); font-weight: 600; font-size: 14px; color: var(--puw-teal-600); font-variant-numeric: tabular-nums; }
.qx-track { height: 12px; border-radius: 7px; background: var(--puw-slate-100); overflow: hidden; }
.qx-fill { height: 100%; width: 0; border-radius: 7px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.qx-fill.coral { background: linear-gradient(90deg, var(--puw-coral-500), var(--puw-coral-600)); }
.qx-fill.teal { background: var(--puw-teal-mid, #248E9C); }
.qx-note { margin: 4px 0 0; font-family: var(--font-meta); font-size: 13px; line-height: 1.55; color: var(--puw-slate-400); min-height: 2.6em; }
@media (max-width: 640px) {
  .qx-body { grid-template-columns: 1fr; gap: 20px; }
  .qx-rate { display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .qx-rate-v { font-size: 40px; }
  .qx-rate-track { display: none; }
}

/* ---------------- repurchase-exposure calculator ---------------- */
.rx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.rx-lab { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--puw-teal-900); }
.rx-vol { font-family: var(--font-meta); font-weight: 600; font-size: 14px; color: var(--puw-coral-600); font-variant-numeric: tabular-nums; }
.rx input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 5px; background: var(--puw-slate-100); outline: none; cursor: pointer; }
.rx input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--puw-coral-600); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(255,54,33,0.35); cursor: grab; }
.rx input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--puw-coral-600); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(255,54,33,0.35); cursor: grab; }
.rx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.rx-cell { background: var(--puw-surface-2); border: 1px solid var(--puw-border-light); border-radius: var(--radius-lg); padding: 18px 16px; text-align: center; }
.rx-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3vw, 34px); line-height: 1; letter-spacing: -0.02em; color: var(--puw-teal-900); font-variant-numeric: tabular-nums; }
.rx-v.coral { color: var(--puw-coral-600); }
.rx-l { font-family: var(--font-meta); font-size: 12px; line-height: 1.5; color: var(--puw-slate-400); margin-top: 9px; }
@media (max-width: 640px) { .rx-grid { grid-template-columns: 1fr; } }

/* ---------------- refi duo bars ---------------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.duo-h { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--puw-teal-900); margin-bottom: 14px; }
.duo-pair { display: flex; flex-direction: column; gap: 12px; }
.duo-bar { display: grid; grid-template-columns: 64px 1fr 52px; align-items: center; gap: 10px; }
.duo-bar .lbl { font-family: var(--font-meta); font-size: 12px; color: var(--puw-slate-400); }
.duo-track { height: 14px; border-radius: 8px; background: var(--puw-slate-100); overflow: hidden; }
.duo-fill { height: 100%; width: 0; border-radius: 8px; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.duo-fill.teal { background: var(--puw-teal-mid, #248E9C); }
.duo-fill.coral { background: linear-gradient(90deg, var(--puw-coral-500), var(--puw-coral-600)); }
.duo-bar .val { font-family: var(--font-meta); font-weight: 600; font-size: 13px; color: var(--puw-teal-900); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; gap: 22px; } }