/* Triad Creator styles. Builds on shared/global.css. */
:root {
  --chordTone: #0cbc67;
  --scaleTone: #3b82f6;
  /* EDITABLE SIZE LIMITS (maximum keyboard image heights - height is applied first, then shrunk only if the width runs out) */
  --chord-img-max-height:     180px;  /* the chord image at the top of the results */
  --anim-kb-max-height:       150px;  /* the keyboard animations on the page */
  --info-anim-kb-max-height:  150px;  /* the keyboard animations in the Information modal */
}
.gameMainTitle {
  text-align: center;
  font-size: calc(21px * var(--font-scale));
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
  padding: 0 12px;
  line-height: 1.25;
}
.modalGameTitle {
  text-align: center;
  font-size: calc(19px * var(--font-scale));
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

.controlsPanel,
.analysisCard {
  background: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px;
  padding-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
body.light-theme .controlsPanel,
body.light-theme .analysisCard { border-color: rgba(0, 0, 0, 0.06); }

.actionsGrid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; width: 100%; }
.actionsGrid .btn { flex: 1 1 calc(120px * var(--control-scale)); height: auto; min-height: calc(52px * var(--control-scale)); padding: 4px 6px; font-size: calc(17px * var(--font-scale)); line-height: 1.15; text-align: center; }
.mainActionRow { display: flex; flex-wrap: wrap; gap: 6px; }
.mainActionRow .btn { flex: 1 1 calc(96px * var(--control-scale)); height: auto; min-height: calc(56px * var(--control-scale)); padding: 4px 6px; font-size: calc(17px * var(--font-scale)); line-height: 1.15; text-align: center; }
.mainActionRow { flex-wrap: nowrap; }
.mainActionRow #beginBtn { flex-grow: 1.3; }
.mainActionRow .iconBtn { flex: 0 0 calc(60px * var(--control-scale)); min-width: 0; font-size: calc(24px * var(--font-scale)); }

.btn:disabled { opacity: 0.38; cursor: not-allowed; transform: none !important; }
.btn-pink { background: #f472b6; color: #fff; border: 2px solid #db2777; box-shadow: 0 4px 0 #db2777; }
.default-btn { background: var(--bg-elevated); color: var(--text-main); border: 2px solid transparent; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
body.light-theme .default-btn { box-shadow: 0 4px 0 #cbd5e1; }
.secondary-btn { background: var(--bg-elevated); color: var(--text-main); border: 2px solid var(--bg-elevated); box-shadow: 0 4px 0 var(--bg-elevated); font-size: calc(15px * var(--font-scale)); }
.secondary-btn:active:not(:disabled) { box-shadow: 0 0 0 var(--bg-elevated); transform: translateY(4px); }

.selBtn {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; text-align: left; cursor: pointer; user-select: none;
  min-height: calc(50px * var(--control-scale)); height: auto; padding: 6px 14px;
  font-family: var(--font-main); font-size: calc(15px * var(--font-scale)); font-weight: 700;
  background: var(--bg-base); color: var(--text-main); border: 2px solid var(--bg-elevated); border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 var(--bg-elevated);
}
.selBtn:hover:not(:disabled), .selBtn[aria-expanded="true"], .selBtn:focus-visible { border-color: var(--accent); outline: none; }
.selK { font-weight: 800; color: var(--text-muted); }
.selV { font-weight: 800; color: var(--text-main); }
.selV.ph { font-weight: 600; color: var(--text-muted); }
.selAns { font-size: calc(12px * var(--font-scale)); font-weight: 800; opacity: 0.95; }
.selBtn:disabled { opacity: 0.45; cursor: default; }
.selBtn.answer-correct, .selBtn.answer-correct:disabled { background: var(--info-teal); border-color: var(--info-shadow); opacity: 1; cursor: default; }
.selBtn.answer-incorrect, .selBtn.answer-incorrect:disabled { background: var(--danger); border-color: var(--danger-shadow); opacity: 1; cursor: default; }
.selBtn.answer-correct .selK, .selBtn.answer-correct .selV, .selBtn.answer-incorrect .selK, .selBtn.answer-incorrect .selV, .selBtn.answer-correct .selAns, .selBtn.answer-incorrect .selAns { color: #fff; }

/* ─── Drop-down menus + Major / Minor buttons ─── */
.ddWrap { position: relative; display: flex; flex-direction: column; }
.ddWrap > .selBtn { width: 100%; flex: 1 1 auto; padding-right: 34px; position: relative; }
.ddWrap > .selBtn::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: calc(14px * var(--font-scale)); opacity: 0.7; }
.ddWrap > .selBtn:disabled::after, .ddWrap > .selBtn.answer-correct::after, .ddWrap > .selBtn.answer-incorrect::after { content: none; }
.ddMenu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: max-content; max-width: calc(100vw - 16px);
  display: grid; grid-template-columns: repeat(var(--dd-cols, 4), auto); gap: 6px; padding: 8px;
  background: var(--bg-surface); border: 2px solid var(--bg-elevated); border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.ddOpt {
  min-width: calc(46px * var(--control-scale)); min-height: calc(40px * var(--control-scale)); padding: 4px 10px;
  font-family: var(--font-main); font-size: calc(16px * var(--font-scale)); font-weight: 900; white-space: nowrap;
  background: var(--bg-base); color: var(--text-main); border: 2px solid var(--bg-elevated); border-radius: 8px; cursor: pointer;
}
.ddOpt:hover, .ddOpt:focus-visible { border-color: var(--accent); outline: none; }
.ddOpt.chosen { background: var(--accent); color: #fff; border-color: var(--accent); }

.helpInlineLink, a.helpInlineLink { color: var(--accent, #4f8cff); font-weight: 700; text-decoration: underline; cursor: pointer; }
.kb-w rect { fill: #fff; stroke: #333; stroke-width: 0.8; }
.kb-b rect { fill: #111; stroke: #000; stroke-width: 0.8; }
.kb-lbl { font-family: Inter, Arial, sans-serif; font-size: 10px; fill: rgba(0,0,0,0.5); font-weight: 800; user-select: none; pointer-events: none; }
.kb-lbl-b { font-size: 8px; fill: rgba(255,255,255,0.0); }
.kb-w rect, .kb-b rect { transition: fill var(--kbfade, 0.15s); }
.kb-on rect { fill: var(--chordTone); }
.kb-on .kb-lbl { fill: rgba(255,255,255,0.95); }
.kb-blue rect { fill: var(--scaleTone); }
.kb-red rect { fill: #ef4444; }
.kb-red .kb-lbl { fill: rgba(255,255,255,0.95); }
.kb-blue .kb-lbl { fill: rgba(255,255,255,0.95); }
.inv-dot circle { fill: var(--chordTone); stroke: #fff; stroke-width: 1.4; }
.inv-dot text { font-family: Inter, Arial, sans-serif; font-size: 10px; font-weight: 900; fill: #fff; pointer-events: none; user-select: none; }
.inv-layer { pointer-events: none; }
/* ─── Triad Creator layout ─── */
.mainActionRow { display:flex; flex-wrap:nowrap; gap:6px; }
.mainActionRow .btn { flex:1 1 calc(96px * var(--control-scale)); height:auto; min-height:calc(56px * var(--control-scale)); padding:4px 6px; font-size:calc(17px * var(--font-scale)); line-height:1.15; text-align:center; }
.mainActionRow .iconBtn { flex:0 0 calc(60px * var(--control-scale)); min-width:0; font-size:calc(24px * var(--font-scale)); }
.mainActionRow #infoBtn { flex-grow:1.6; }
.selGrid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:8px; }
@media (max-width: 420px) { .selGrid { grid-template-columns:minmax(0,1fr); } }
.chooseQ { font-weight:900; text-align:center; color:var(--text-main); margin-top:12px; }
.ddWrap { position:relative; display:flex; flex-direction:column; }
.ddMenu { position:fixed !important; top:0; left:0; z-index:400 !important; }
.emptyCard { text-align:center; background:var(--bg-surface); border:2px solid rgba(255,255,255,0.08); border-radius:var(--radius-md); padding:18px 12px; margin-top:12px; }
.emptyCard p { margin:0 0 12px; color:var(--text-muted); font-weight:700; }
.results { margin-top:12px; }
.resHead { text-align:center; }
.resTitle { margin:0; font-size:calc(22px * var(--font-scale)); font-weight:900; color:var(--text-main); }
.resSub { margin:4px 0 0; font-size:calc(14px * var(--font-scale)); color:var(--text-muted); font-weight:600; }
.resSub strong { color:var(--text-main); }
.methodCard { background:var(--bg-surface); border:2px solid rgba(255,255,255,0.08); border-radius:var(--radius-md); padding:12px; margin-top:12px; box-shadow:var(--shadow-soft); }
.methodCard p { margin:0 0 10px; font-size:calc(15px * var(--font-scale)); line-height:1.5; color:var(--text-muted); }
.methodCard p strong { color:var(--text-main); }
.methodTitle { margin:0 0 10px; font-size:calc(17px * var(--font-scale)); font-weight:900; color:var(--text-main); line-height:1.3; }
.methodSub { font-size:0.8em; font-weight:700; color:var(--text-muted); }
.formulaBig { text-align:center; font-size:calc(24px * var(--font-scale)) !important; font-weight:900; color:var(--text-main) !important; letter-spacing:1px; }
.helpInlineLink, a.helpInlineLink { color:var(--accent,#4f8cff); font-weight:700; text-decoration:underline; cursor:pointer; }
.helpHeading { font-size:calc(16px * var(--font-scale)); font-weight:900; color:var(--text-main); margin:20px 0 8px; line-height:1.25; }
.helpHeading:first-child { margin-top:0; }
.modalCard.modalCard-info { max-width:600px; }

/* animations */
.animFig { margin:6px 0 12px; text-align:center; }
.resChordImg { --kb-max-h: var(--chord-img-max-height); margin:10px 0 6px; }
.animKb { --kb-max-h: var(--anim-kb-max-height); }
#infoModal .animKb { --kb-max-h: var(--info-anim-kb-max-height); }
.resChordImg svg, .animKb svg { display:block; margin:0 auto; height:auto; width:min(100%, calc(var(--kb-max-h) * var(--ar, 3))); }
.speedRow { display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 2px; font-size:calc(13px * var(--font-scale)); font-weight:800; color:var(--text-muted); }
.speedSlider { flex:0 1 220px; accent-color:var(--accent); }
.speedVal { min-width:3.2em; text-align:left; color:var(--text-main); }
.inv-dot text { transition:opacity 0.3s; }
.animCap { margin:8px 0 6px; min-height:2.9em; font-size:calc(14px * var(--font-scale)); font-weight:600; color:var(--text-muted); line-height:1.4; }
.animCap b { color:var(--text-main); font-weight:900; }
.animBtns { display:flex; justify-content:center; margin-top:8px; }
.animPlayBtn { height:auto; min-height:calc(38px * var(--control-scale)); padding:4px 16px; font-size:calc(14px * var(--font-scale)); }
.fLine { margin:0 0 4px !important; font-size:calc(17px * var(--font-scale)) !important; font-weight:700; color:var(--text-muted) !important; }
.fFilled { margin-bottom:10px !important; }
.fSeg { display:inline-block; padding:1px 7px; border-radius:6px; transition:background 0.12s, color 0.12s; }
.fSeg.fOn { background:var(--accent); color:#fff; font-weight:900; }
.kb-w, .kb-b { transition:opacity 0.6s; }
.kb-root.kb-blue rect { fill:#1d4ed8; }
.inv-dot.dot-blue circle { fill:var(--scaleTone); }
.inv-dot.dot-count circle { fill:#8b5cf6; }
.inv-dot { transition:opacity 0.4s; }
.inv-dot.dot-skip { opacity:0.3; }

/* diatonic chord charts popup: just the bare images */
.chartsModal { background:rgba(0,0,0,0.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:300; overflow-y:auto; align-items:flex-start; justify-content:center; overscroll-behavior:contain; }
.chartsClose { position:fixed; top:12px; right:12px; z-index:320; width:46px; height:46px; border-radius:50%; border:2px solid #fff; background:#ef4444; color:#fff; font-size:22px; font-weight:900; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.5); }
.chartsScroll { width:100%; max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding:48px 0 12px; }
.chartImg { display:block; width:100%; max-width:600px; height:auto; margin:0 auto; }

/* titles centred */
.methodTitle, .helpHeading, .modalTitle, .modalGameTitle, .resTitle { text-align:center; }
.animTitle { margin:0 0 8px; text-align:center; font-size:calc(14px * var(--font-scale)); font-weight:600; color:var(--text-main); line-height:1.35; }
.animTitle b { font-weight:900; }