/* ============================================================
   The Chord Method — page-specific styles.
   Everything common (tokens, header, nav, .min chips, .pb-*,
   phases, milestones, tabblocks, tables, figures, footer)
   comes from css/shared.css.
   ============================================================ */

main a{color:var(--brass);}
main a:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
strong{color:var(--ink);}

/* ============ chord cards ============ */
.chord-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:16px; margin:18px 0;
}
.chord-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 8px 10px; text-align:center;
}
.chord-card .cname{
  font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin-bottom:2px;
}
.chord-card .csub{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; min-height:14px;
}
.chord-card .cnote{
  font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.45; padding:0 4px;
}

/* ============ widget frames (barre finder, CAGED explorer) ============ */
.widget{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 16px 14px; margin:22px 0;
}
.widget-title{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:12px;
}
.pick-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
.pick-row .pick-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); align-self:center; margin-right:4px;
  min-width:56px;
}
.pick-row 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 10px; border-radius:6px; cursor:pointer;
}
.pick-row button:hover{border-color:var(--brass-dim); color:var(--ink);}
.pick-row button.on{background:var(--brass); border-color:var(--brass); color:var(--bg);}
.pick-row button:focus-visible{outline:2px solid var(--pearl); outline-offset:2px;}
.bf-result{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;}
.bf-result .chord-card{width:180px; flex:0 0 auto;}
.bf-verdict{
  flex:1; min-width:240px; align-self:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font-size:14.5px; color:var(--ink);
}
.bf-verdict .v-tag{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sage); margin-bottom:6px;
}
.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;}
.caged-cap{
  margin-top:10px; padding:12px 14px; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px;
  color:var(--muted); font-size:14px;
}
.caged-cap strong{color:var(--ink);}