@import url('/key-finder.css');
.timeline-summary { display:grid; grid-template-columns:1.2fr 1fr .65fr; gap:.7rem; margin-top:.8rem; }
.timeline-summary .result-card { min-height:6.8rem; }
.audio-player { width:100%; margin-top:.8rem; accent-color:var(--lime); }
.timeline-panel { margin-top:.8rem; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--panel-strong); text-align:left; }
.timeline-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.timeline-heading h2 { margin:0; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; }
.timeline-heading span { color:var(--muted); font-size:.78rem; }
.chord-timeline { display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.5rem; max-height:18rem; margin:0; padding:.1rem; overflow:auto; list-style:none; }
.chord-timeline button { width:100%; min-height:4.2rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem .5rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:.7rem; background:#0d1219; color:var(--text); text-align:left; cursor:pointer; }
.chord-timeline button time { color:var(--cyan); font-size:.76rem; font-variant-numeric:tabular-nums; }
.chord-timeline button strong { grid-row:1/3; grid-column:2; color:var(--lime); font-size:1.35rem; }
.chord-timeline button span { color:var(--muted); font-size:.7rem; }
.chord-timeline button.is-current { border-color:var(--lime); box-shadow:0 0 0 2px rgba(200,255,69,.15); }
.empty-timeline { grid-column:1/-1; padding:1.25rem; color:var(--muted); text-align:center; }
.notation-list { display:grid; gap:.7rem; padding-left:1.2rem; }
@media(max-width:620px){.timeline-summary{grid-template-columns:1fr 1fr}.timeline-summary .result-card:first-child{grid-column:1/-1}.chord-timeline{grid-template-columns:1fr 1fr}.timeline-heading{align-items:flex-start;flex-direction:column;gap:.15rem}}