/* THE MIX & MASTER JOURNEY — THE EAR GYM (.eg-) and THE CALCULATORS (.calc-). On top of journey.css + mix.css, brand v3.
   Stats and bars in white; red only for wrong answers and problems. */

/* ---------- THE EAR GYM ---------- */
.eg .lede{max-width:760px}
.eg-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0 4px}
.eg-stats .stat{min-width:0}
.eg-stats .stat .v{font-size:32px}
.eg-stats .stat .v.eg-weak{font-size:26px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eg-charts{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.eg-charts .card{margin:14px 0 0;min-width:0}
.eg-bands{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:12px 0 8px}
.eg-days{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;margin:12px 0 8px}
.eg-bar,.eg-day{display:grid;gap:4px;text-align:center;min-width:0}
.eg-col,.eg-cell{height:96px;background:var(--panel);border:1px solid var(--line);border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
.eg-col i,.eg-cell i{display:block;width:100%;background:var(--chrome-hi);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.eg-col i.bad{background:var(--red)}
.eg-cell i{background:var(--chrome-lo)}
.eg-day.on .eg-cell i{background:var(--chrome-hi)}
.eg-day.today .eg-cell{border-color:var(--chrome-mid)}
.eg-bar b,.eg-day b{font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--white);min-height:15px;white-space:nowrap}
.eg-bar b.red{color:var(--red)}
.eg-bar span,.eg-day span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.eg-day span{color:var(--ash)}
.eg-modes{margin-top:26px}
.eg-rackhead,.eg-rephead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.eg-srcs{margin:12px 0 10px}
.eg-track{margin:6px 0 12px;display:grid;gap:8px}
.eg-trackline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--dim);overflow-wrap:anywhere}
.eg-trackline b{color:var(--white);font-weight:400}
.eg-transport{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:14px;align-items:end;margin-top:10px}
.eg-play{min-width:128px}
.eg-play.on{background:var(--white);color:var(--black)}
.eg-ab{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-2)}
.eg-ab button{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:13px 16px;border:0;background:transparent;color:var(--dim);white-space:nowrap;transition:background .1s,color .1s}
.eg-ab button+button{border-left:1px solid var(--line)}
.eg-ab button:hover{color:var(--white)}
.eg-ab button.on{background:var(--chrome-grad);color:var(--black);font-weight:700}
.eg-master{min-width:0}
.eg-master label{display:flex;justify-content:space-between;gap:8px}
.eg-master label span{color:var(--white)}
.eg-master input{width:100%;height:30px}
.eg-safety{margin-top:12px;padding:8px 12px;border-left:2px solid var(--chrome-mid);font-size:13px;color:var(--white);background:var(--panel-2);border-radius:0 var(--r) var(--r) 0}
.eg-keys{margin-top:10px;font-size:10px;color:var(--ash)}
.eg-pips{display:flex;gap:4px}
.eg-pips i{width:18px;height:6px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line)}
.eg-pips i.ok{background:var(--chrome-hi);border-color:transparent}
.eg-pips i.bad{background:var(--red);border-color:transparent}
.eg-pips i.cur{border-color:var(--chrome-hi)}
.eg-opts{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 4px;padding:12px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.eg-opt{display:grid;gap:2px;min-width:0}
.eg-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-2)}
.eg-seg button{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border:0;background:transparent;color:var(--dim);white-space:nowrap}
.eg-seg button+button{border-left:1px solid var(--line)}
.eg-seg button:hover{color:var(--white)}
.eg-seg button.on{background:var(--white);color:var(--black);font-weight:700}
.eg-prompt{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(26px,3.2vw,36px);line-height:1;margin:18px 0 6px}
.eg-match{margin-top:8px;text-transform:none;letter-spacing:.04em;color:var(--chrome-hi)}
.eg-choices .choice{position:relative;padding:18px 10px}
.eg-choices.many{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.eg-kn{position:absolute;top:4px;left:7px;font-size:9px;color:var(--ash)}
.eg-reveal{margin:12px 0 0;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--chrome-hi);border-radius:var(--r);background:var(--panel-2);animation:egin .25s ease-out}
.eg-reveal.bad{border-left-color:var(--red)}
.eg-verdict{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-hi)}
.eg-verdict.bad{color:var(--red)}
.eg-ans{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.eg-ans b{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:28px;line-height:1.05;color:var(--white)}
.eg-desc{font-size:14.5px;color:#dcdbd7}
.eg-off{font-size:13.5px;color:var(--red);margin:4px 0}
.eg-reveal .hint{margin-top:6px}
@keyframes egin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.eg-donegrid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;margin-top:12px;align-items:start}
.eg-teach h3{margin-top:8px}
.eg-teach p{margin:0 0 10px}
.eg-lh{margin-top:6px}
.eg-listen{margin:6px 0 0;padding-left:18px;color:#dcdbd7;font-size:14px}
.eg-listen li{margin:4px 0}
.eg-foot{margin:18px 0 0}
@media (max-width:1040px){ .eg-stats{grid-template-columns:repeat(3,1fr)} .eg-charts{grid-template-columns:1fr} .eg-transport{grid-template-columns:auto minmax(0,1fr)} .eg-master{grid-column:1/-1} .eg-donegrid{grid-template-columns:1fr} }
@media (max-width:560px){
  .eg-stats{grid-template-columns:1fr 1fr} .eg-stats .stat:last-child{grid-column:1/-1}
  .eg-bands{gap:3px} .eg-days{gap:2px} .eg-col,.eg-cell{height:72px} .eg-bar b,.eg-day b{font-size:8.5px} .eg-bar span,.eg-day span{font-size:8px;letter-spacing:0}
  .eg-transport{grid-template-columns:1fr} .eg-play,.eg-ab{width:100%} .eg-ab button{padding:13px 6px;font-size:10.5px}
  .eg-opts{gap:10px} .eg-seg button{padding:7px 8px;font-size:10px} .eg-pips i{width:11px}
  .eg-choices .choice{padding:16px 6px;font-size:12px} .eg-choices.many{grid-template-columns:repeat(4,1fr)}
}
/* ---------- THE CALCULATORS ---------- */
.calc .lede{max-width:720px}
.calc-tabs{margin-top:20px}
.calc-card{padding:22px 24px}
.calc-why{font-size:15px;color:#dcdbd7;max-width:720px;margin:0 0 18px;padding-left:12px;border-left:2px solid var(--chrome-lo)}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;max-width:820px}
.calc-sec{margin-top:26px;padding-top:18px;border-top:1px dashed var(--line)}
.calc-sec.calc-first{margin-top:0;padding-top:0;border-top:0}
.calc-h{font-size:20px;margin:0 0 10px}
.calc-out{margin-top:14px;min-width:0}
.calc-out .row2,.calc-out .tblwrap{margin-top:4px}
.calc-big{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end}
.calc-taps{align-self:center;color:var(--white)}
.calc-tap{width:100%;padding:11px 20px}
.calc-f{margin:10px 0 0;text-transform:none;letter-spacing:.03em;font-size:12px;line-height:1.6;color:var(--chrome-hi);overflow-wrap:anywhere}
.calc-box{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.calc-box .numout{margin:4px 0 8px;overflow-wrap:anywhere}
.calc-box .hint{margin:8px 0 0}
.calc-kv{margin-top:8px;font-family:var(--font-mono);font-size:12.5px}
.calc-kv span{color:var(--white);overflow-wrap:anywhere}
.calc-tbl td{font-family:var(--font-mono);font-size:12.5px;white-space:nowrap}
.calc-tbl td b{font-weight:700;color:var(--white)}
.calc-tbl td.calc-ph{color:var(--white)}
.calc-tbl td .pill{margin:4px 4px 0 0}
.calc-bad{font-style:italic}
.calc-scroll{max-height:340px;overflow:auto;margin-top:12px}
.calc-sum{margin-top:8px;color:var(--white);letter-spacing:.08em}
.calc-legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:4px 0 10px}
.calc-legend i{display:inline-block;width:10px;height:10px;vertical-align:-1px;margin-right:6px;border:1px solid var(--line)}
.calc-legend i.lm{width:2px;background:var(--chrome-hi);border:0}
.calc-legend i.lc{background:var(--red-glow);border-color:var(--red)}
.calc-legend i.lg{border-style:dashed;border-color:var(--chrome-mid)}
.calc-modes{display:grid;gap:6px;margin:6px 0 4px}
.calc-mrow{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;align-items:center}
.calc-mk{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calc-track{position:relative;height:26px;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.calc-track i{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;background:var(--chrome-hi)}
.calc-clu{position:absolute;top:0;bottom:0;min-width:6px;transform:translateX(-3px);box-sizing:content-box;padding-right:0;background:var(--red-glow);border-left:1px solid var(--red);border-right:1px solid var(--red)}
.calc-gap{position:absolute;top:0;bottom:0;border-left:1px dashed var(--chrome-mid);border-right:1px dashed var(--chrome-mid);background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(244,243,240,.05) 4px 8px)}
.calc-axis .calc-track{height:18px;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;overflow:visible}
.calc-axis em{position:absolute;top:3px;transform:translateX(-50%);font-style:normal;font-family:var(--font-mono);font-size:9.5px;color:var(--ash)}
.calc-axis em:first-child{transform:none}
.calc-axis em:last-child{transform:translateX(-100%)}
.calc-place{margin-top:18px}
.calc-disc{margin-top:16px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r)}
.calc .callout{margin-top:18px}
@media (max-width:560px){
  .calc-card{padding:16px 14px} .calc-grid{grid-template-columns:1fr 1fr} .calc-big{gap:16px}
  .calc-mrow{grid-template-columns:1fr;gap:3px} .calc-axis .calc-mk{display:none} .calc-tbl td{font-size:11.5px}
}