/* Copyright (c) 2026 JG Music Lessons. JG Private Use; see ../../LICENSE and ../../licenses/JG-Private-Use.txt. Prior license rights preserved. */
/* JG Fretboard Visualizer v1.6.4. Chart fonts are bundled; other styles are scoped to .jgfe. */
/* BRAND COLORS: Override the variables on .jgfe in WordPress Additional CSS. */
/* Bundled Crimson Pro, SIL OFL. This unique font family is referenced only by this tool. */
@font-face {
  font-family:"JGFE Crimson Pro";
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url("../fonts/crimson-pro-normal-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family:"JGFE Crimson Pro";
  font-style:italic;
  font-weight:200 900;
  font-display:swap;
  src:url("../fonts/crimson-pro-italic-latin-variable.woff2") format("woff2");
}
.jgfe {
  --jgfe-primary: #0173ad;         /* JG Music Lessons blue */
  --jgfe-primary-hover: #015b89;
  --jgfe-ink: #30373e;             /* Main text */
  --jgfe-muted: #526770;           /* Secondary text */
  --jgfe-line: #dee7e9;            /* Borders */
  --jgfe-surface: #ffffff;         /* Card background */
  --jgfe-panel: #edf6fb;           /* Interactive practice container */
  --jgfe-panel-border: #c4dce9;
  --jgfe-control-border: #7893a3;  /* Separate white controls from the panel */
  --jgfe-major-root: #009347;      /* Sampled from JG's major-scale chart */
  --jgfe-minor-root: #9c006d;      /* Minor roots use the purple chart convention */
  --jgfe-root: var(--jgfe-major-root);
  --jgfe-root-text: #ffffff;
  --jgfe-scale-note: #014e9d;      /* Sampled from JG's scale-note circles */
  --jgfe-scale-text: #ffffff;
  --jgfe-soft: #f2fafd;
  --jgfe-neck: #ffffff;           /* Flat chart background */
  --jgfe-chart-line: #111111;
  --jgfe-chart-font: "JGFE Crimson Pro", "Times New Roman", Times, serif;
  --gf-ink: var(--jgfe-ink);
  --gf-muted: var(--jgfe-muted);
  --gf-line: var(--jgfe-line);
  --gf-teal: var(--jgfe-primary);
  --gf-soft: var(--jgfe-soft);
  --gf-root: var(--jgfe-root);
  font-family:inherit;
  font-size:14px;
  line-height:1.5;
  color:var(--gf-ink);
  background:var(--jgfe-panel);
  border:1px solid var(--jgfe-panel-border);
  border-radius:16px;
  padding:clamp(16px,2.5vw,28px);
  margin:24px 0;
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}
.jgfe[data-scale-mode="minor"] { --jgfe-root:var(--jgfe-minor-root); }
.jgfe * { box-sizing:border-box; }
.jgfe button,.jgfe select { font:inherit; }
.jgfe button,.jgfe select { min-height:44px; line-height:1.4; }
.jgfe h2,.jgfe h3 { color:var(--jgfe-ink); }
.jgfe button { cursor:pointer; }
.jgfe select:disabled { opacity:.55; cursor:not-allowed; }
.jgfe button:focus-visible,.jgfe select:focus-visible,.jgfe .gf-neck-scroll:focus-visible { outline:3px solid var(--jgfe-primary); outline-offset:3px; }
.jgfe .gf-head { display:flex; align-items:start; justify-content:space-between; gap:16px; padding:4px 0 22px; }
.jgfe .gf-eyebrow { display:inline-block; font-size:11px; font-weight:750; letter-spacing:.12em; color:#176185; background:#dcecf6; padding:5px 8px; border-radius:6px; margin-bottom:8px; }
.jgfe h2 { font-size:25px; font-weight:750; margin:0 0 3px; letter-spacing:-.7px; line-height:1.22; }
.jgfe .gf-head p { margin:0; color:var(--gf-muted); font-size:13px; }
.jgfe .gf-tuning { white-space:nowrap; font-size:11px; color:#54717a; background:#eff5f6; border-radius:99px; padding:6px 11px; margin-top:4px; }
.jgfe .gf-controls { display:grid; grid-template-columns:minmax(100px,1fr) minmax(235px,2.1fr) minmax(215px,1.7fr); gap:12px; align-items:end; margin-bottom:17px; }
.jgfe .gf-select-wrap,.jgfe .gf-control-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
.jgfe .gf-select-wrap > span,.jgfe .gf-control-group > span { font-size:10px; letter-spacing:.09em; font-weight:750; color:var(--gf-muted); }
.jgfe select { appearance:none; padding:10px 27px 10px 12px; border:1px solid var(--jgfe-control-border); border-radius:10px; font-weight:700; color:var(--gf-ink); background:var(--jgfe-surface); width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23687c85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center; }
.jgfe .gf-segment { display:flex; gap:3px; padding:4px; border:1px solid var(--jgfe-control-border); background:var(--jgfe-surface); border-radius:11px; min-height:44px; }
.jgfe .gf-segment button { padding:6px 8px; border:1px solid transparent; color:var(--jgfe-ink); background:transparent; flex:1; font-size:12px; border-radius:8px; font-weight:650; white-space:nowrap; }
.jgfe .gf-segment button:hover:not(.active) { background:var(--jgfe-panel); }
.jgfe .gf-segment button.active { background:var(--jgfe-primary); border-color:var(--jgfe-primary); color:#fff; }
.jgfe .gf-scale-strip { display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; padding:13px 15px; border:1px solid var(--jgfe-line); background:var(--jgfe-surface); border-radius:13px; }
.jgfe .gf-scale-title { display:flex; flex-direction:column; gap:1px; }
.jgfe .gf-scale-title strong { font-size:14px; }
.jgfe .gf-scale-title span { font-size:11px; color:var(--gf-muted); }
.jgfe .gf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.jgfe .gf-notechip { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:7px 9px; border-radius:8px; background:var(--jgfe-scale-note); color:var(--jgfe-scale-text); font:italic 700 20px/1.2 var(--jgfe-chart-font); }
.jgfe .gf-notechip.root { background:var(--jgfe-root); color:var(--jgfe-root-text); }
.jgfe .gf-board-heading { display:flex; align-items:center; justify-content:space-between; margin:20px 0 7px; gap:10px; }
.jgfe .gf-board-heading strong { font-size:13px; }
.jgfe .gf-subtle { color:#83949d; font-weight:500; }
.jgfe .gf-legend { display:flex; gap:13px; color:#687c85; font-size:11px; }
.jgfe .gf-legend span { display:flex; align-items:center; gap:5px; }
.jgfe .gf-legend i { height:11px; width:11px; display:inline-block; border-radius:50%; }
.jgfe .gf-mark-root { background:var(--gf-root); }
.jgfe .gf-mark-tone { background:var(--jgfe-scale-note); }
.jgfe .gf-neck-scroll { width:100%; overflow-x:auto; overflow-y:hidden; border:1px solid var(--jgfe-line); border-radius:6px; background:var(--jgfe-neck); scrollbar-color:#6d8189 #d5dfe3; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.jgfe .gf-neck-scroll svg { display:block; height:auto; max-height:500px; width:810px; min-width:810px; }
.jgfe .gf-chart-label,.jgfe .gf-note-label { font-family:var(--jgfe-chart-font); }
.jgfe .gf-note-label { font-style:italic; font-weight:700; }
.jgfe .gf-muted-string { pointer-events:none; }
.jgfe .gf-tap-note:focus-visible { outline: none; stroke: var(--jgfe-chart-line); stroke-width: 3px; }
.jgfe .gf-scrollhint { display:flex; flex-wrap:wrap; justify-content:space-between; font-size:11px; color:var(--gf-muted); padding:8px 2px; gap:8px; }
.jgfe .gf-scrollhint [hidden] { display:none !important; }
.jgfe .gf-inspector { min-height:43px; padding:10px 12px; display:flex; align-items:center; gap:10px; border-radius:10px; background:#f4f7f8; border:1px solid #e7edef; color:#526770; font-size:12px; }
.jgfe .gf-inspect-icon { color:var(--gf-teal); font-size:17px; line-height:1; }
.jgfe .gf-inspector strong { color:var(--gf-ink); }
.jgfe .gf-quiz { border:1px solid #dae5e8; border-radius:14px; margin-top:20px; overflow:hidden; background:var(--jgfe-surface); }
.jgfe .gf-quiz-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px; }
.jgfe .gf-quiz-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.jgfe .gf-quiz-icon { width:34px; height:34px; border-radius:10px; background:var(--jgfe-soft); display:grid; place-items:center; font-weight:850; font-size:21px; color:var(--jgfe-primary); flex:none; }
.jgfe h3 { margin:0; font-size:14px; }
.jgfe .gf-quiz-heading p { font-size:11px; color:var(--gf-muted); margin:2px 0 0; }
.jgfe .gf-primary { flex:none; border:0; color:#fff; font-weight:700; background:var(--jgfe-primary); padding:9px 14px; border-radius:9px; }
.jgfe .gf-primary:hover { background:var(--jgfe-primary-hover); }
.jgfe .gf-quiz-body { background:#f7fafb; padding:15px; border-top:1px solid var(--gf-line); }
.jgfe .gf-quiz-body[hidden],.jgfe .gf-next[hidden] { display:none !important; }
.jgfe .gf-quiz-stat { display:flex; align-items:start; justify-content:space-between; gap:9px; margin-bottom:12px; font-size:12px; font-weight:650; }
.jgfe [data-jgfe="gf-score"] { white-space:nowrap; color:#60757e; font-weight:500; }
.jgfe .gf-answers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.jgfe .gf-answer { padding:11px 6px; border:1px solid #dae5e8; border-radius:10px; background:white; font-weight:750; font-size:15px; color:#283c46; }
.jgfe .gf-answer:hover:not(:disabled) { border-color:var(--jgfe-primary); background:var(--jgfe-soft); }
.jgfe .gf-answer.correct { color:#0d6451; border-color:#63b9a0; background:#e0f6ed; }
.jgfe .gf-answer.wrong { color:#924138; border-color:#e6a9a1; background:#fff0ef; }
.jgfe .gf-answer:disabled { cursor:default; }
.jgfe .gf-quiz-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; margin-top:10px; }
.jgfe .gf-feedback { flex:1; font-size:12px; color:#526770; }
.jgfe .gf-feedback.good { color:#0d7a57; }
.jgfe .gf-feedback.bad { color:#ad5047; }
.jgfe .gf-next { border:1px solid #b9d5d0; color:var(--jgfe-primary); background:#fff; font-size:12px; font-weight:750; padding:8px 12px; border-radius:8px; }
.jgfe .gf-next:hover { background:var(--jgfe-soft); }
@media (min-width:940px) { .jgfe .gf-neck-scroll svg { width:100%;height:auto;min-width:810px; } }
@media (max-width:700px) {
  .jgfe .gf-head { padding-bottom:17px; }
  .jgfe h2 { font-size:23px; }
  .jgfe .gf-tuning { display:none; }
  .jgfe .gf-controls { grid-template-columns:1fr 2.15fr; gap:12px 9px; }
  .jgfe .gf-control-group:last-child { grid-column:1/-1; }
  .jgfe .gf-segment button { font-size:11px; padding:6px 4px; }
  .jgfe .gf-neck-scroll svg { height:auto; }
  .jgfe .gf-scrollhint span:last-child { font-size:10px; }
  .jgfe .gf-quiz-top { padding:12px; }
  .jgfe .gf-primary { padding:9px 11px; }
}
@media (max-width:520px) {
  .jgfe .gf-quiz-top { flex-direction:column; align-items:stretch; gap:14px; }
  .jgfe .gf-primary { width:100%; }
  /* Keep the scale buttons full width on narrow phones. */
  .jgfe .gf-controls { grid-template-columns:minmax(0,1fr); }
  .jgfe .gf-control-group:last-child { grid-column:auto; }
  .jgfe .gf-segment button { font-size:12px; }
}
@media (max-width:380px) { .jgfe .gf-quiz-heading p { max-width:165px; } .jgfe .gf-answers { gap:6px; } }

/* Visible quiz state without inline styles. */
.jgfe .gf-primary.is-running { background: #4c6470; }

/* Four-topic explorer. Shared chart and quiz retain the established design. */
.jgfe [hidden] { display:none !important; }
.jgfe .gf-tabs { margin-bottom:20px; }
.jgfe .gf-tabs button { font-size:14px; }
.jgfe .gf-controls { grid-template-columns:minmax(110px,1fr) minmax(215px,1.6fr) minmax(170px,1.2fr); }
.jgfe .gf-range-control { display:flex; flex-direction:column; gap:10px; min-width:0; }
.jgfe .gf-range-toggle { align-self:start; border:0; border-radius:6px; padding:8px 0; background:transparent; color:var(--jgfe-primary-hover); font-weight:650; font-size:13px; text-align:left; }
.jgfe .gf-range-toggle::after { content:" ▾"; }
.jgfe .gf-range-toggle[aria-expanded="true"]::after { content:" ▴"; }
.jgfe .gf-panels { margin-bottom:18px; }
.jgfe .gf-scale-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.jgfe .gf-scale-controls.gf-has-shape-system { grid-template-columns:repeat(3,minmax(0,1fr)); }
.jgfe .gf-panels > [role="tabpanel"] > .gf-select-wrap { max-width:360px; }
.jgfe .gf-chord-controls { display:grid; grid-template-columns:1fr 1fr 1.45fr; gap:12px; }
.jgfe .gf-chord-controls > .gf-select-wrap { max-width:none !important; }
.jgfe .gf-range-custom { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; max-width:480px; }
.jgfe .gf-range-error { grid-column:1/-1; margin:0; color:#924138; font-size:13px; }
.jgfe .gf-context-help { color:var(--jgfe-muted); font-size:12px; margin:9px 0 0; max-width:720px; }
.jgfe .gf-voices { background:white; border:1px solid var(--jgfe-line); border-radius:10px; padding:10px 13px; margin-top:10px; font-size:13px; }
.jgfe .gf-shape-navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; font-size:12px; }
.jgfe .gf-shape-navigation button { border:1px solid var(--jgfe-control-border); background:white; border-radius:8px; color:var(--jgfe-ink); padding:7px 12px; }
.jgfe button:disabled { opacity:.55; cursor:not-allowed; }
.jgfe .gf-tap-note { cursor:pointer; }
.jgfe .gf-lesson-links { border-top:1px solid var(--jgfe-panel-border); margin-top:20px; padding-top:16px; }
.jgfe .gf-lesson-links h3 { margin:0 0 7px; }
.jgfe .gf-lesson-links a { display:inline-block; color:var(--jgfe-primary-hover); text-decoration:underline; padding:8px 0; margin-right:24px; overflow-wrap:anywhere; }
.jgfe .gf-lesson-links a:focus-visible { outline:3px solid var(--jgfe-primary); outline-offset:3px; }
@media(max-width:700px) {
  .jgfe .gf-controls { grid-template-columns:1fr 1.7fr; }
  .jgfe .gf-controls > .gf-range-control { grid-column:1/-1; }
  .jgfe .gf-chord-controls { grid-template-columns:1fr 1fr; }
  .jgfe .gf-chord-controls > .gf-select-wrap:last-child { grid-column:1/-1; }
  .jgfe .gf-quiz-stat { flex-wrap:wrap; }
}
@media(max-width:520px) {
  .jgfe .gf-controls,.jgfe .gf-chord-controls { grid-template-columns:minmax(0,1fr); }
  .jgfe .gf-controls > .gf-range-control,.jgfe .gf-chord-controls > .gf-select-wrap:last-child { grid-column:auto; }
  .jgfe .gf-tabs button { font-size:12px; padding:6px 3px; }
  .jgfe .gf-shape-navigation { flex-wrap:wrap; }
  .jgfe .gf-shape-navigation button { flex:1; padding:7px 8px; }
  .jgfe .gf-shape-navigation span { order:3; flex-basis:100%; text-align:center; }
}

/* Per-instance note sound. Audio starts only from a note click/key gesture. */
.jgfe .gf-board-heading { flex-wrap:wrap; }
.jgfe .gf-board-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.jgfe .gf-sound-toggle { background:white; color:var(--jgfe-ink); border:1px solid var(--jgfe-control-border); border-radius:8px; padding:7px 12px; min-width:96px; }
.jgfe .gf-sound-toggle[aria-pressed="true"] { background:var(--jgfe-primary); border-color:var(--jgfe-primary); color:white; }
/* Reserve the same single line before, during and after loading. Long failures remain accessible. */
.jgfe .gf-sound-status { display:block; height:18px; line-height:18px; font-size:12px; color:var(--jgfe-muted); margin:0 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jgfe .gf-sound-status[hidden] { display:block !important; visibility:hidden; }
@media(max-width:520px) { .jgfe .gf-inspector { min-height:76px; } }
@media(max-width:520px) { .jgfe .gf-board-actions { gap:8px; } }

/* Discreet attribution travels inside each SVG chart. */
.jgfe .gf-chart-attribution:focus-visible { outline:2px solid var(--jgfe-primary); }

@media(max-width:600px) {
  .jgfe .gf-scale-controls,.jgfe .gf-scale-controls.gf-has-shape-system { grid-template-columns:1fr; }
}