/* ─── 0. Resets & helpers ──────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing:border-box; }

:root { --gap: clamp(.25rem, 1vw, .6rem); }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
}

/* ─── 1. Page skeleton: 20 % header / 80 % grid ───────────────────── */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;        /* dynamic vh handles iOS tool-bar shrink */
} 

.site-header {
  flex: 0 0 15dvh;           /* ≈ 20 % of viewport height */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 0px;
}


/* ─── 2. Chord grid occupies the rest ─────────────────────────────── */
#chord-grid {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   padding: var(--gap);
  justify-content: flex-start;
 }

/* each three-row “block” stretches equally */
.chord-block { flex: 1; display: flex; flex-direction: column; }

/* label + row share the available height */
.chord-block > h2 { margin: 0 0 .3em;}

.chord-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 across, always */
  gap: var(--gap);
  max-height: calc((100vw - (var(--gap) * 5)) / 6);
}

/* ─── 3. Buttons ──────────────────────────────────────────────────── */
button {
  aspect-ratio: 1;           /* 🎯 makes every button a perfect square */
  width: 100%;
  border: 1px solid #000;
  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: clamp(.6rem, 2vw, 1rem);
  cursor: pointer;
}

button:active { background:#ccc; }

.degree-label  { font-size: 1em; color:#666; }
.chord-label   { font-size: 1.3em }


/* ———— 4. Other ————————————— */ 

h2 {
  font-size: 1em;
}