/* Key pages css (scale, arpeggio and chord pages for one key). The hero, practice card, option buttons, score and
   keyboard diagram come from page.css and chords.css; the rules here tighten them up so a whole section fits
   on one screen. */

/* Base (phones) */

/* a tighter hero than the scales pages have */
main .page-hero {
  padding-block: 22px 12px;
}

main .page-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1.15;
}

/* The hero of a key page: the key large with what the page is for under it, the key signature beside it on a small
   stave, then the notes as chips that sound when tapped */
main .key-hero {
  padding-block: 24px 18px;
}

.key-hero-head {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  justify-content: start;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 16px;
}

main .key-hero h1 {
  margin: 0;
  line-height: 1;
}

.h1-name {
  display: block;
  font-size: clamp(2rem, 8.4vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.h1-what {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.sig-tile {
  margin: 0;
  padding: 6px 10px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-align: center;
}

.sig-stave svg {
  display: block;
  width: auto;
  height: 76px;
  margin-inline: auto;
}

.sig-tile figcaption {
  margin-top: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--muted);
}

/* on a dark screen, the key signature is on paper too, like the sheet music */
@media screen {
  :root[data-theme="dark"] .sig-tile {
    background: var(--paper);
    border-color: transparent;
  }

  :root[data-theme="dark"] .sig-tile figcaption {
    color: var(--key-muted);
  }
}

main .page-hero p {
  margin: 0;
  max-width: 68ch;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* links under the intro: the relative key, and on a chord page the chord explorer */
main .page-hero .hero-more {
  margin-top: 10px;
  font-size: 0.9rem;
}

main .page-hero .hero-more + .hero-more {
  margin-top: 4px;
}

/* the relative and the parallel key on one line, or one under the other on a phone */
@media (max-width: 559px) {
  .hero-more-sep {
    display: block;
    height: 4px;
    overflow: hidden;
    color: transparent;
  }
}

/* the tabs that link to the key's other pages: one segmented control, the current page raised out of it */
.key-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 2 * var(--pad));
  margin: 0 var(--pad) 18px;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.key-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.key-tabs a:hover {
  color: var(--text);
}

.key-tabs a[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08), 0 3px 10px -4px rgba(28, 25, 23, 0.18);
}

/* on a dark page the card colour is too close to the track's: the page you are on is lifted with a lighter fill */
:root[data-theme="dark"] .key-tabs a[aria-current="page"] {
  background: color-mix(in srgb, var(--text) 16%, var(--surface));
}

/* a line after a minor key's three scale forms, before the arpeggio and the chord */
.key-tabs .tab-divider {
  flex: 0 0 1px;
  height: 18px;
  margin: 0 5px;
  background: var(--line-strong);
}

.key-tabs .tab-divider.is-faint {
  display: none;
}

/* phones: the tabs fill the width. A minor key's five don't fit on one line, so the arpeggio and the chord go on a
   second line under the three scale forms, the line between them lying across. */
@media (max-width: 559px) {
  .key-tabs:not(.pills) {
    flex-wrap: wrap;
    width: auto;
  }

  .key-tabs a {
    flex: 1 1 0;
    padding: 0 6px;
  }

  .key-tabs .tab-divider {
    flex: 0 0 calc(100% - 16px);
    height: 1px;
    margin: 3px 8px;
  }
}

/* the tabs and, beside them, the menu of keys: one row on a wide screen, the menu under the tabs on a phone */
.key-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 var(--pad) 18px;
}

.key-nav > .key-tabs {
  max-width: 100%;
  margin: 0;
}

.key-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.key-switch select {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2375706a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.key-switch select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* the chromatic page: "Start on" and the twelve buttons, as pills */
.key-tabs.pills {
  gap: 6px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 var(--pad) 18px;
  background: none;
  border: 0;
  border-radius: 0;
}

.key-tabs.pills button {
  flex: 0 0 auto;
  min-width: 44px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.key-tabs.pills button:hover {
  border-color: var(--line-strong);
}

.key-tabs.pills button[aria-pressed="true"] {
  background: var(--strong);
  border-color: var(--strong);
  color: var(--on-strong);
}

.tabs-label {
  flex: 0 0 auto;
  align-self: center;
  padding-right: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* the short how-to under the chromatic page's title */
.how-to {
  max-width: 68ch;
  margin: 12px 0 0;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.how-to li+li {
  margin-top: 4px;
}

/* the fingering card: the first thing on the page */
.fingering {
  padding: 0 var(--pad) 16px;
}

.fingering-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* the heading row of a card: the title on the left, its controls on the right */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.fingering-card h2,
.practice-card .card-head h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.finger-note {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* The fingering table: notes across the top, then a row for each hand. Two octaves are one long table: when it
   is wider than the screen it scrolls sideways inside .finger-scroll, with the RH / LH labels staying in view. */
.finger-scroll {
  overflow-x: auto;
}

.finger-grid {
  width: 100%;
  min-width: calc(40px + var(--cols) * 28px);
  max-width: calc(48px + var(--cols) * 64px);
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

.finger-grid th,
.finger-grid td {
  padding: 0;
}

.finger-grid thead th {
  padding: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.finger-grid th:first-child {
  position: sticky;
  left: 0;
  width: 40px;
  background: var(--surface);
  text-align: left;
}

.finger-grid tbody tr {
  border-top: 1px solid var(--line);
}

.finger-grid tbody th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.finger-grid abbr {
  text-decoration: none;
}

.finger-grid td {
  height: 42px;
  font-size: 1.35rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.finger-grid thead th:not(:first-child) {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

/* the thumb, on a felt disc, so the points where it goes under or the hand moves are easy to spot */
.finger-grid td.thumb {
  font-weight: 700;
  color: var(--accent-ink);
  background: radial-gradient(circle, var(--accent-light) 0 15px, transparent 15.5px);
}

/* the chord page: root position and the inversions, one table each */
.finger-blocks {
  display: grid;
  gap: 18px;
}

.finger-block h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* while playing: the note sounding now lights up in the sheet music (the note drawn by VexFlow) */
.score .vf-stavenote.is-sounding {
  fill: var(--accent);
  stroke: var(--accent);
}

/* the sheet music and keyboard sections sit close together; the last one leaves room before the footer */
.practice {
  padding-bottom: 16px;
}

main>.practice:last-of-type {
  padding-bottom: 40px;
}

main .practice>.practice-card {
  padding: 16px;
}

main .practice-card .options {
  margin-bottom: 12px;
  gap: 10px 16px;
}

/* a row of option groups that sit side by side and wrap when the screen is narrow */
main .practice-card .options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

main .practice-card .options-row>.option {
  flex: 0 0 auto;
  width: auto;
}

/* option buttons keep their label on one line, even on a narrow phone ("2 octaves") */
.seg button {
  white-space: nowrap;
}

/* The sheet music. It is drawn to fill the card's width, which makes it huge on a wide screen, so its height is
   capped. A long line (two octaves) scrolls sideways on a phone instead of shrinking the notes. */
.score {
  overflow-x: auto;
}

.score svg {
  display: block;
  margin-inline: auto;
}

.score[data-hands="one"] svg {
  max-height: 180px;
}

.score[data-hands="both"] svg {
  max-height: 300px;
}

/* a chord drawn alone in its card (both hands: a grand staff) */
.chord-score svg {
  max-width: 200px;
  max-height: 300px;
  margin-inline: auto;
}

/* the keyboards (piano-keys.js), in the card's ebony case (piano.css): one per hand, the right hand above the left */
.kb-blocks {
  display: grid;
  gap: 16px;
}

.kb-block {
  min-width: 0; /* a long keyboard scrolls inside its box instead of widening the card */
  max-width: 560px;
}

.kb-block .option-label {
  display: block;
  margin-bottom: 8px;
}

/* a wide keyboard (two octaves) scrolls sideways on a phone instead of shrinking the keys */
.kb-block>div {
  overflow-x: auto;
}

/* The chord page and the arpeggio page (on a desktop): the sheet music and the keyboard card in one row instead of
   one above the other. Both are stacked on a phone. */
.practice-pair {
  padding-bottom: 40px;
}

.practice-pair .practice {
  padding-inline: var(--pad);
}

/* Tablet */
@media (min-width: 768px) {
  .key-tabs a {
    padding: 0 18px;
    font-size: 0.88rem;
  }

  .key-tabs.pills {
    flex-wrap: wrap;
    overflow: visible;
  }

  .key-hero-head {
    gap: 16px 36px;
  }

  .sig-stave svg {
    height: 92px;
  }


  .fingering-card,
  main .practice>.practice-card {
    padding: 20px 24px;
  }

  .finger-grid td {
    height: 44px;
    font-size: 1.4rem;
  }

  .finger-blocks.three {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* chord: a narrow sheet music column beside the keyboards, from tablet width up */
  .practice-pair-chord {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: stretch;
    gap: 0 16px;
    padding: 0 var(--pad) 40px;
  }

  .practice-pair-chord .practice {
    padding: 0;
  }

  .practice-pair-chord .practice>.practice-card {
    height: 100%;
    box-sizing: border-box;
  }

  /* the sheet music column is narrow: stack its options */
  .practice-pair-chord .practice:first-child .options {
    display: grid;
    grid-template-columns: 1fr;
  }

  .practice-pair-chord .practice:first-child .option-wide {
    grid-column: auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {

  .fingering,
  .key-tabs.pills {
    padding-inline: var(--gutter);
  }

  .key-tabs {
    max-width: calc(100% - 2 * var(--gutter));
    margin-inline: var(--gutter);
  }

  .key-nav {
    margin-inline: var(--gutter);
  }

  .practice-pair {
    padding-inline: var(--gutter);
    gap: 0 20px;
  }

  .fingering-card,
  main .practice>.practice-card {
    padding: 20px 28px;
  }

  main>.practice:last-of-type {
    padding-bottom: 48px;
  }

  .practice-pair {
    padding-bottom: 48px;
  }

  .practice-pair .practice>.practice-card {
    padding: 20px 24px;
  }

  /* arpeggio: two equal columns, sheet music on the left and the keyboards on the right, one above the other
     (the column is too narrow for two keyboards side by side) */
  .practice-pair-arp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .practice-pair-arp .practice {
    padding: 0;
  }

  .practice-pair-arp .practice>.practice-card {
    height: 100%;
    box-sizing: border-box;
  }

  .practice-pair-arp #keyboards {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    column-gap: 0;
  }

  .practice-pair-arp #keyboards>.kb-block:not(:only-child) {
    max-width: 560px;
  }

  .practice-pair-arp #keyboards>.kb-block[data-hand="lh"]:not(:only-child) {
    order: 0;
    padding-right: 0;
  }

  .practice-pair-arp #keyboards>.kb-block[data-hand="rh"]:not(:only-child) {
    padding-left: 0;
    border-left: 0;
  }

  .finger-blocks.three {
    gap: 32px;
  }

  /* the keyboards: next to each other as the hands sit at the piano, the left hand on the left and the right hand
     on the right, with a line between them (in the page they come right hand first, as the staves do, which is how
     they stack on a smaller screen). One hand on its own keeps the single-keyboard width. */
  #keyboards {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 0; /* the space either side of the line comes from the keyboards' own padding, the same both sides */
  }

  #keyboards>.kb-block:not(:only-child) {
    max-width: none;
  }

  /* the space either side of the line is shared, so both keyboards are the same size */
  #keyboards>.kb-block[data-hand="lh"] {
    order: -1;
  }

  #keyboards>.kb-block[data-hand="lh"]:not(:only-child) {
    padding-right: 28px;
  }

  #keyboards>.kb-block[data-hand="rh"]:not(:only-child) {
    padding-left: 28px;
    border-left: 1px solid rgba(250, 250, 249, 0.12);
  }
}

/* The chord page's keyboard card sits beside the sheet music and is stretched to the same height. The keyboards
   stay one above the other, fill the width of the card (up to a limit) and are centred in it, so the card is
   not left half empty. */
.practice-pair-chord .practice:last-child .practice-card {
  display: flex;
  flex-direction: column;
}

.practice-pair-chord #chord-keys {
  margin-block: auto;
}

.practice-pair-chord .kb-block {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
}

/* iPad mini in portrait (744px wide) and other widths just under the tablet layout: the three sheet music options
   (Hands, Octaves, Fingering) fit on one line instead of wrapping. Only this width range is affected. */
@media (min-width: 600px) and (max-width: 767px) {
  main .practice-card .options-row {
    flex-wrap: nowrap;
    gap: 10px 14px;
  }

  main .practice-card .options-row>.option {
    flex: 0 1 auto;
    min-width: 0;
  }

  main .practice-card .options-row .seg button {
    padding-inline: 11px;
    font-size: 0.85rem;
  }
}