/* ============================================================
   The Fretboard Atlas — page-specific styles.
   Loaded AFTER css/shared.css; only rules unique to this page.
   ============================================================ */

/* ---- header landmark-dots decoration ---- */
.five-dots{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:22px;}
.five-dots span{width:9px; height:9px; border-radius:50%; background:var(--brass-dim);}
.five-dots span.root{background:var(--pearl); width:10px; height:10px;}
.five-dots .note-name{
  width:auto; height:auto; border-radius:0; background:none;
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted);
  letter-spacing:.1em; transform:translateY(-1px);
}

/* ---- neck / widget shells ---- */
.neck-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 16px 12px; margin:22px 0;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.neck-wrap.hit{border-color:var(--brass); box-shadow:0 0 0 1px var(--brass-dim);}
.neck-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.neck-title{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass);
}
.box-btns{display:flex; gap:6px; flex-wrap:wrap;}
.box-btns button{
  background:none; border:1px solid var(--line); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:6px; cursor:pointer;
}
.box-btns button:hover{border-color:var(--brass-dim); color:var(--ink);}
.box-btns button.on{background:var(--brass); border-color:var(--brass); color:var(--bg);}
.box-btns button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
.neck-scroll{overflow-x:auto;}
.neck-scroll svg{min-width:680px; display:block;}
.neck-legend{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:8px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted);
}
.neck-legend span{display:flex; align-items:center; gap:6px;}
.dot-demo{width:12px; height:12px; border-radius:50%; display:inline-block;}

/* ---- quizzes ---- */
.qz-prompt{font-size:17px; margin:6px 0 10px;}
.qz-prompt strong{
  color:var(--brass); font-family:'Fraunces',serif; font-size:23px;
  padding:0 2px;
}
.q-sub{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
  letter-spacing:.06em;
}
.qz-foot{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:8px; flex-wrap:wrap;
}
.qz-live{color:var(--muted); font-size:13.5px; min-height:1.4em; flex:1;}
.qz-score{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--brass);
  letter-spacing:.08em; white-space:nowrap;
}
rect.qcell{cursor:pointer;}
rect.qcell:hover{fill:rgba(201,164,92,.14);}
rect.qcell:focus-visible{outline:2px solid var(--pearl); outline-offset:-2px;}
circle.qflash{
  transform-origin:center; transform-box:fill-box;
  animation:qpulse .45s ease;
}
@keyframes qpulse{from{transform:scale(.4); opacity:.3;} to{transform:scale(1); opacity:1;}}
@media (prefers-reduced-motion:reduce){ circle.qflash{animation:none;} }
.choice-btns{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px;}
.choice-btns button{
  background:none; border:1px solid var(--line); color:var(--ink);
  font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600;
  min-width:46px; padding:10px 0; border-radius:8px; cursor:pointer;
}
.choice-btns button:hover{border-color:var(--brass-dim);}
.choice-btns button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
.choice-btns button.good{background:var(--sage); border-color:var(--sage); color:var(--bg);}
.choice-btns button.bad{border-color:var(--muted); color:var(--muted); opacity:.55;}

/* ---- octave shape cards ---- */
.boxgrid{display:flex; gap:18px; flex-wrap:wrap; margin:18px 0;}
.boxcard{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px 14px 10px; width:250px;
}
.boxcard .bc-name{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass); margin-bottom:8px; text-align:center;
}
.boxcard .bc-note{color:var(--muted); font-size:12.5px; margin-top:8px; line-height:1.5;}