@font-face {
  font-family: 'SF Pro';
  src: url('fonts/SF-Pro.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

button {
  all: unset;
}

.controls, .Chordcontrols {
  visibility: hidden;
  transform: translateY(-100%);
}

.controls.is-open, .Chordcontrols.is-open {
  visibility: visible;
  transform: translateY(0);
}

#active_chord {
  display: none;
}
#active_chord.show {
  display: flex;
}

.chorddisplay {
  display: none;
}

.chorddisplay.show {
  display: inline-flex;
}

.inversions {
  display: none;
}

.inversions.show {
  display: grid;
}

/* .segmented .segment[aria-pressed="true"],
.chord-type-btn[aria-pressed="true"] {  } */

.chord-search-popover {
  display: none;
}

.chord-search-popover.is-open {
  display: grid;
}

/* .slot .slot-btn.filled {  } */

.slot .slot-del[hidden] {
  display: none !important;
}

#pianoSvg image.scale-highlight {
  opacity: 1;
}

#pianoSvg image.chord-highlight {
  opacity: 1;
}

#pianoSvg image:not(.scale-highlight):not(.chord-highlight) {
  opacity: 0.15;
}


:root {
  --sectionPadding: 25px;
  --sectionPaddingSm: 12px;

  --btnPadSm: 4px 4px;
  --btnPadMd: 8px 16px;
  --gapSpace: 10px;

  --fontReg: 12pt;
  --fontLg: 1.5em;
  --fontSm: .75em;

  --radiusSm: 6px;
  --radiusLg: 12px;

  --piano-scale: 1.4;
  --key-bg: #8BEB83;

  --padding: 35px;

  --blackTrans1: rgba(0, 0, 0, 0.05);
  --whiteTrans1: rgba(255, 255, 255, 0.1);
  --blackPopover: rgba(20,20,20,.9);
}

@media (max-width: 768px) {:root { --piano-scale: .85; } body {grid-template-rows: auto auto 1fr auto !important;}}
@media (max-height: 721px) {:root { --piano-scale: .55; }}



html, body { height: 100%; }
body { min-height: 100svh; }         /* stable */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }       /* best when supported */
}
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
.header { padding-top: var(--safe-top); }
.footer { padding-bottom: var(--safe-bottom); }

:root { --safe-bottom: env(safe-area-inset-bottom); }
body { padding-bottom: var(--safe-bottom); }



body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr auto;
  grid-template-areas:
    "header"
    "piano"
    "footer"
    "saved";
  margin: 0;
  width: 100%;
  height: 100svh;

  font-family: 'SF Pro', Roboto, sans-serif; font-weight: normal;
  font-size: var(--fontReg);
  text-align: center;

  background: var(--key-bg);
  color: #ffffff;
  transition: background 0.5s ease;

overflow-x:hidden;
overflow-y: auto;}

#header {grid-area: header;}
#pianoSvgContainer {grid-area: piano;}
#footer {grid-area: footer;}
#saved-chords-popover {grid-area: saved;}

button {
  font-size: var(--fontReg);
  border-radius: var(--radiusSm);
  cursor: pointer;
}

.acc {
  white-space: nowrap;
  font-size: 0.6em;
  line-height: .85;
  vertical-align: super;
  width: .75em;
  display: inline-flex; 
  justify-content: center; 
  align-items: baseline;
  font-weight: inherit;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */


  .controls, .Chordcontrols {
    position: fixed;
    left: 0;  right: 0;  top: 0;  bottom: 0;
    z-index: 2;
    padding-top: 22.5svh;
    padding: 20svh 20% var(--sectionPadding) 20%;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "close close"
      "mode  key";
    gap: var(--sectionPadding);
    justify-content: center;
    justify-items: stretch;

    transform: translateY(-100%);
    transition: transform .4s ease;
    will-change: transform;
    /* overflow-y: scroll; */

    background-color: rgba(0, 0, 0, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(15px);
    visibility: hidden;
  }


  #closeControls {
    background: var(--colors-transparency-black-trans-5, rgba(0, 0, 0, 0.05));
    color: white;
    padding: 10px 20px;
    bottom: var(--padding);

    border-radius: var(--radiusLg);
    cursor: pointer;
    display: block;
    height: max-content;
    /* width: max-content; */
    grid-area: close;
    justify-content: center;
  }

  label {
    display: flex;
    flex-direction: column;
    gap: var(--gapSpace);
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge Legacy */
  }

  .controls > label:nth-of-type(1) { grid-area: mode; }
  .controls > label:nth-of-type(2) { grid-area: key; }

  #mode-select,
  #key-select,
  #root-select,
  #chord-Q-select {
    display: flex;
    flex-direction: column;
    gap: var(--gapSpace);
    /* justify-content: center; */
    /* align-items: stretch; */
    overflow-y: scroll;
  }

  .mode-button {
    cursor: pointer;
    padding: var(--btnPadMd);
    /* flex: 0 0 auto; */
    border-radius: var(--radiusLg);
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.28);
  }

  .key-button {
    cursor: pointer;
    padding: var(--btnPadMd);
    border-radius: var(--radiusLg);
    display: block;
    /* width: 100%; */
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.28);
  }

  .mode-button:focus-visible,
  .key-button:focus-visible {
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 2px;
  }

  /* Selected/active state (works with either class or aria-pressed) */
  .mode-button.active,
  .key-button.active,
  .mode-button[aria-pressed="true"],
  .key-button[aria-pressed="true"] {
    background: white;
    color: black;
    border-color: white;
  }
  


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Header */

#header { 
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 0.75em;      
  justify-content: center;
  align-items: start;
  margin: var(--sectionPadding);
}

  #scale-container {
    display: flex;
    flex-direction: column;
    gap: var(--gapSpace);
  }

#scale-display, #roman-display {
    margin: 0 auto; z-index: 3;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(32px, 80px);
    align-items: baseline;
    column-gap: var(--gapSpace);
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: var(--radiusLg);
  }

    .label, .popover-title { font-size: var(--fontSm); background-color: var(--blackTrans1); padding: var(--btnPadSm); border-radius: var(--radiusSm);}

    .scale-note, .roman-display span { white-space: nowrap; border-radius: var(--radiusLg);}
    
    .scale-note { font-size: var(--fontLg); padding: 10px 0 10px 0; cursor: pointer; }
    
    .active { background-color: white;  color: black;border-radius: var(--radiusLg); mix-blend-mode: lighten;}

    .active_chord, .active_mode-key {
      align-self: start;
      display: grid;
      grid-template-columns: 1fr;
      gap: calc(var(--gapSpace));
    }

    #active_mode-key, #active_chord.show {
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .active_chord svg,
    #active_mode-key svg,
    .chorddisplay svg {
      background: var(--blackTrans1);
      color: white;
      border: none;
      border-radius: var(--radiusSm);
      padding: var(--btnPadSm);
      vertical-align: middle;
      margin-left: 10px;
    } 
    
    .text { vertical-align: middle;}

@media (max-width: 768px) {
  #header {
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "mode  chord"
      "scale scale";
    margin: calc(var(--sectionPadding) * 1.5);
    row-gap: calc(var(--gapSpace) * 1.5);
  }
  .active_mode-key { grid-area: mode; }
  .active_chord { grid-area: chord; }
  #scale-container { grid-area: scale; }

  .active_chord, .active_mode-key {
    justify-content: center;
    align-items: center;
    gap: 0;

  }

  .active_chord svg,
    #active_mode-key svg {
      min-height: 1.25em;
      min-width: 1.25em;
    } 

    .scale-note {
      padding: 6px;
    }

    #scale-container {
      overflow-x: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge Legacy */
    }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Piano */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Controls */

/* #pianoSvg {
} */

#pianoSvg image.scale-highlight {
  opacity: 1;
}

#pianoSvg image.chord-highlight {
  opacity: 1;
}

#pianoSvg image:not(.scale-highlight):not(.chord-highlight) {
  opacity: 0.125;
}

#pianoSvgContainer {
  height: auto;
  width: 100%;
  overflow-x: hidden;
  z-index: 1;
}

.scale-highlight,
.chord-highlight {
  transition: all 3s ease;
}

/* #pianoSvgContainer {
  height: auto;
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
} */

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Footer */

/* Footer layout: two rows. Row 1 = notes across; Row 2 = centered 3 cells */
#footer {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gapSpace) * 2);
}

#chordVar {
  margin: 0 auto;
  grid-template-areas: 
  "num inv pro";
  display: grid;
  grid-template-columns: 182px max-content 182px;
  gap: var(--gapSpace);
} 
.segmented {grid-area: num;}
.inversions {grid-area: inv;}
#saved-chords-trigger {grid-area: pro; font-size: var(--fontSm); cursor: pointer;}

.segmented, .inversions.show {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85px;
}
@media (max-width: 768px) {
  :root {
    --sectionPadding: 16px;
  }
  #footer {
    gap: var(--gapSpace);
  }

  #chordVar {
    grid-template-areas: 
    "num inv"
    "pro pro";
    display: grid;
    grid-template-columns:  max-content max-content;
      
  }
  .segmented, .inversions.show {
    grid-auto-columns: unset;
  }

  #saved-chords-trigger[aria-expanded="true"] {
    display: none;
  }

  .inversions button, .segmented button {
    padding: 6px 10px !important;
  }
}

.inversions,
.segmented {
  padding: 6px;
  border-radius: calc(var(--radiusLg) * 1.25);
  background: var(--blackTrans1);
}

.inversions [data-inversion].active,
.segment[aria-pressed="true"] {
  outline: 1px solid currentColor;
  border-radius: var(--radiusLg);
}


.inversions button,
.segmented button {
  background: transparent;
  padding: var(--btnPadMd);
  color: white;
  text-transform: capitalize;
  font-size: var(--fontSm);

}

#chord-notes {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
}

.chord-note {
  font-size: 20pt;
  white-space: nowrap;
}

.chorddisplay {
  justify-content: center;
  display: none;
  align-items: center;
  gap: 2.5em;
}

.chorddisplay.show {
  display: inline-flex;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Inversions */


.no-matches {
  padding: 8px 10px;
  text-align: center;
  opacity: .85;
}

#chord-search-results.chord-search-popover {
  position: fixed;
  display: none;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  width: 33vw;
  flex-direction: column;
  flex-wrap: nowrap;
  background: rgba(20, 20, 20, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radiusLg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  overflow-y: auto;
  min-width: 25vw;
  margin: 1rem;
}

#chord-search-results.chord-search-popover.is-open {
  display: flex;
}

#chord-search-results.chord-search-popover .chord-match {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  border-radius: var(--radiusLg);
  border: 1px solid rgba(255, 255, 255, .12);
  color: white;
  cursor: pointer;
}


.chord-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#chord-search-results .popover-title {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--gapSpace);
  padding: 4px 0 0 0;
}

#chord-search-results.chord-search-popover .popover-content {
  display: flex;
  flex-direction: column;
  gap: var(--gapSpace);
}

#closeChordSearch {
  background: rgba(255, 255, 255, 0.065);
  color: white;
  padding: 4px 0;
  border-radius: var(--radiusSm);
  border: none;
  text-decoration: none !important;
  width: 100%;
  cursor: pointer;
}

@media (max-width: 768px) {
  #chord-search-results.chord-search-popover {
    left: 0;
    right: 0;
    width: auto;      /* override desktop width:33vw */
    min-width: 0;     /* override desktop min-width:25vw */
  }
}


/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////// Progressions */

.chord-search-popover.is-open {
  display: grid;
  grid-template-columns: 1fr;
  background-color: var(--blackPopover);
  gap: var(--gapSpace);
  padding: var(--sectionPadding);
  padding-bottom: 36px;
}

#saved-chords-popover .popover-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: center;
  gap: var(--gapSpace);
}

#saved-chords-popover .popover-heading {
  border-radius: var(--radiusSm);
  margin-left: 22px;
}

#saved-chords-content {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gapSpace);
}

.slot {
  border: 1px dashed var(--whiteTrans1);
  border-radius: var(--radiusLg);
  padding: 8px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; 
  align-items: center;
  column-gap: var(--gapSpace);
  max-height: 1em;
  align-content: center;

} .slot:has(.filled) {
  border: none;
  background-color: white;
  color: black;
}

.slot-btn {
  display: flex;
  align-items: center;
  gap: .25em;
  min-width: 0; 
  justify-content: center;
  margin-left: 12px;
  font-size: var(--fontSm);
}

.slot-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-inv {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

}

.slot-del {
  flex: none;
}

@media (max-width: 768px) {
  #saved-chords-content {
  grid-auto-flow: unset;
  grid-template-columns: repeat(3, 1fr);
}

.slot-inv {
  display: none;
}
}

/* .slot-btn.filled {
  background: white;
  color: black;
}


.progression-slots .slot .slot-del {
  display: none;
}

.progression-slots .slot .slot-btn.filled+.slot-del {
  display: inline-flex;
}

#progression-slots {
  text-align: left;
  display: flex;
  column-gap: 10px;
} */


@media (max-width: 768px) {
  .controls, .Chordcontrols {
    padding: 5% 5% var(--sectionPadding) 5%;
  }
}


/* ///////////////////////////// FIX LATER */
/* Chordcontrols-specific buttons (namespaced to avoid collisions) */
#Chordcontrols .chord-root-btn,
#Chordcontrols .chord-quality-btn {
  cursor: pointer;
  padding: var(--btnPadMd);
  border-radius: var(--radiusLg);
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: white;
}

#Chordcontrols .chord-root-btn:focus-visible,
#Chordcontrols .chord-quality-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

#Chordcontrols .chord-root-btn.active,
#Chordcontrols .chord-quality-btn.active,
#Chordcontrols .chord-root-btn[aria-pressed="true"],
#Chordcontrols .chord-quality-btn[aria-pressed="true"] {
  background: white;
  color: black;
  border-color: white;
}