/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap'); */

:root {
    /* Size Variables */
    --top-banner-height: 5vh;
    --side-banner-width: 20vw;
    --key-cap-width: 100;
    --key-gap-width: 5;
    --key-rim-width: 1;
    --key-font-size: 1rem;
    --neck-taper: 1.2;        /*neck taper angle in degrees*/
    --finger-ratio: 0.9;   /*ratio of a string hight*/

    /* Fonts */
    --varispace-font-family: 'Gill Sans';
    --monospace-font-family: monospace;

    /* Media Query Thresholds */
    --tablet-breakpoint: 1024px;
    --mobile-breakpoint: 768px;

    /* Colors */
    --main-background-color: linen;
    --text-watermark-color: orange;
    --text-watermark-opacity: 0.02;

    --root-color: Crimson;
    --min2-color: Orange;
    --maj2-color: Gold;
    --min3-color: YellowGreen;
    --maj3-color: LimeGreen;
    --prf4-color: MediumAquamarine;
    --dim5-color: Turquoise;
    --prf5-color: DodgerBlue;
    --min6-color: SlateBlue;
    --maj6-color: BlueViolet;
    --min7-color: MediumOrchid;
    --maj7-color: HotPink;
}

/* Basic reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 1ch;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    margin: 0.5ch;
    padding: 0.5ch;
}

::-webkit-scrollbar-thumb {
    background-color: lightslategray;
    border-radius: 6px;
    margin: 0.5ch;
    padding: 0.5ch;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    font-family: var(--varispace-font-family);
    background-color: var(--main-background-color);
    user-select: none;
    -webkit-user-select: none;
}

select {
    font-family: var(--varispace-font-family);
    font-weight: lighter;
    border-color: darkslategray;
    outline: lightslategray;
    border-radius: 2px;
}

input {
    accent-color: lightslategray;
}

detail {
    /* margin: 200px; */
}

fieldset {
    display: flex;
    flex-direction: column;
    text-align: righ5;
    border-width: 1px;
    border-radius: 1ch;
    border-color: lightslategray lightgray;
    font-family: var(--monospace-font-family);
    font-size: 0.9em;
    font-weight: light;
    padding: 0.5ch;
}

fieldset legend {
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: lighter;
}

#topContainer {
    display: flex;
    flex-direction: row;
}

#topContainer.hidden {
    display: none;
}

.banner {
    position: sticky;
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    font-weight: 1000;
    z-index: 10;
    color: var(--text-watermark-color);
    opacity: var(--text-watermark-opacity);
    cursor: default;
}

.top-banner {
    top: 0;
    height: var(--top-banner-height);

    align-items: center;
    justify-content: center;
    /* background-color: lightcyan; */
}

.vrt-banner {
    top: 0;
    width: var(--side-banner-width);
    height: 100vh;

    writing-mode: vertical-rl;
    align-items: center;
    justify-content: center;
    text-orientation: upright;
    /* background-color: lightyellow; */
}

/* .left-banner {}

.right-banner {} */

#config {
    display: grid;
    grid-template:
    [row01-start] "chord_label   chord_select   . cava  ." [row01-end]
    [row03-start] "stretch_label stretch_widget . cava  ." [row02-end]
    / 2fr 4fr 1fr 5fr 1fr;
    row-gap: 0.6ch;
    column-gap: 1ch;
}

.config_label {
    text-align: right;
}

#chord-label {
    grid-area: chord_label;
}

#stretchLabel {
    grid-area: stretch_label;
}

#chord_preset {
    grid-area: chord_select;
    background-color: transparent;
}

.stretchButton {
    background-color: transparent;
    border: 1px solid darkslategray;
    border-radius: 3px;
}

.stretchButton:disabled {
    color: lightgray;
    border-color: lightgray;
}

#stretchWidget {
    grid-area: stretch_widget;
    display: flex;
    flex-direction: row;
}

#stretchWidget button {
    flex: 1;
}

#stretchDisplay {
    flex: 3;
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 0.5ch;
    font-weight: lighter;
}

#coffee {
    grid-area: cava;
    /* display: flex; */
    display: none;
    align-items: center;
    justify-content: center;
}

#coffee_image {
    width: 80%;
    background: transparent;
}

.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3ch;
}

#chord-container {
    flex: 0;
    /* background-color: snow; */
    /* shape-rendering: crispEdges; */
}

.key-button {
    stroke-width: 1px;
    opacity: 0.0;
    transition: opacity 0.2s ease-in-out;
}

.key_label {
    cursor: default;
    pointer-events: none;
    fill: darkslategray;
    stroke: darkslategray;
    font-size: var(--key-font-size);
    text-anchor: middle;
    dominant-baseline: middle;
}

.key-button.chosen+.key_label {
    fill: snow;
    stroke: snow;
}

.key-button.chosen {
    opacity: 1.0;
}

.key-button:hover {
    opacity: 0.1;
}

.key-button.chosen:hover {
    opacity: 0.6;
}

.key_border {
    fill: none;
    stroke-width: var(--key-rim-width);
    cursor: default;
    pointer-events: none;
}

#key-button_P1 {
    fill: var(--root-color);
    stroke: var(--root-color);
}

#key-button_m2 {
    fill: var(--min2-color);
    stroke: var(--min2-color);
}

#key-button_M2 {
    fill: var(--maj2-color);
    stroke: var(--maj2-color);
}

#key-button_m3 {
    fill: var(--min3-color);
}

#key-button_M3 {
    fill: var(--maj3-color);
}

#key-button_P4 {
    fill: var(--prf4-color);
}

#key-button_d5 {
    fill: var(--dim5-color);
}

#key-button_P5 {
    fill: var(--prf5-color);
}

#key-button_m6 {
    fill: var(--min6-color);
}

#key-button_M6 {
    fill: var(--maj6-color);
}

#key-button_m7 {
    fill: var(--min7-color);
}

#key-button_M7 {
    fill: var(--maj7-color);
}

#key_border_P1 {
    stroke: var(--root-color);
}

#key_border_m2 {
    stroke: var(--min2-color);
}

#key_border_M2 {
    stroke: var(--maj2-color);
}

#key_border_m3 {
    stroke: var(--min3-color);
}

#key_border_M3 {
    stroke: var(--maj3-color);
}

#key_border_P4 {
    stroke: var(--prf4-color);
}

#key_border_d5 {
    stroke: var(--dim5-color);
}

#key_border_P5 {
    stroke: var(--prf5-color);
}

#key_border_m6 {
    stroke: var(--min6-color);
}

#key_border_M6 {
    stroke: var(--maj6-color);
}

#key_border_m7 {
    stroke: var(--min7-color);
}

#key_border_M7 {
    stroke: var(--maj7-color);
}

.filterEntries {
    overflow: hidden;
}

.filterEntry {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    gap: 1ch;
}

.filterEnabler {
    /* background-color: orange; */
}

.filterData {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5ch;
}

.filterName {
    display: flex;
    flex-direction: row;
    gap: 0.5ch;
    /* justify-content: space-between; */
    /* background-color: lightblue; */
}

.filterCount {
    /* background-color: lightyellow; */
}

#counts {
    font-family: var(--varispace-font-family);
    font-weight: 600;
}

#filters {
    display: flex;
    flex-direction: row;
    padding: 1ch 1ch 0 1ch;
    flex-wrap: wrap;
    gap: 1ch;
}

#voicingFilters, #stringFilters {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 1ch;
}

#voiceOrderFieldset, #stringSetsFieldset {
    flex: 1.8;
}

#voiceSpacingFieldset, #stringSpacingFieldset {
    flex: 1.0;
}

#output {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.shape {
  display: flex;
  flex-direction: column;
  padding-bottom: 1ch;
}

.nut {
  stroke: DimGrey;
  stroke-width: 2.0;
}

.inlay {
  fill: SlateGray;
  stroke: none;
}

.fret {
  stroke: DimGray;
  stroke-width: 0.5;
}

.string {
  stroke: LightGray;
  stroke-width: 0.2;
}

circle.voice {
  fill: LightSlateGray;
  stroke: none;
}

rect.outline {
  fill: none;
  stroke: black;
}

text.voice {
    fill: white;
    stroke: none;
    text-anchor: middle;
    dominant-baseline: middle;
    font-weight: lighter;
    font-size: 0.4em;
    font-family: var(--varispace-font-family);
}

circle.voice#P1 { fill: var(--root-color); }
circle.voice#m2 { fill: var(--min2-color); }
circle.voice#M2 { fill: var(--maj2-color); }
circle.voice#m3 { fill: var(--min3-color); }
circle.voice#M3 { fill: var(--maj3-color); }
circle.voice#P4 { fill: var(--prf4-color); }
circle.voice#d5 { fill: var(--dim5-color); }
circle.voice#P5 { fill: var(--prf5-color); }
circle.voice#m6 { fill: var(--min6-color); }
circle.voice#M6 { fill: var(--maj6-color); }
circle.voice#m7 { fill: var(--min7-color); }
circle.voice#M7 { fill: var(--maj7-color); }

.shapeSummary {
  /* padding: 2rem 0 0.5rem 0; */
  font-family: var(--varispace-font-family);
  font-weight: 500;
  flex-direction: row;
}

summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-weight: lighter;
}

details:last-of-type summary {
    list-style: none;

    &::after {
        content: "☷";
    }

    [open] &::after {
        content: "⛌";
    }
}

details:last-of-type summary::-webkit-details-marker {
    display: none;
}

.filterCount {
    flex-wrap: nowrap;
}

/* Tablet and Horizontal Mobile Layout */
@media (max-width: var(--tablet-breakpoint)) and (orientation: landscape) {
    .top-banner {
        display: none;
        /* Hide top banner in landscape */
    }

    .main-container {
        margin-left: calc(var(--side-banner-width) / 2);
        /* Adjusted width for side banners */
        margin-right: calc(var(--side-banner-width) / 2);
    }
}

/* Vertical Mobile Layout */
@media (max-width: var(--mobile-breakpoint)) and (orientation: portrait) {

    .left-banner,
    .right-banner {
        display: none;
        /* Hide side banners in portrait mode */
    }

    .top-banner {
        position: sticky;
        top: 0;
    }

    .main-container {
        margin: 0;
        /* Use full width on mobile */
        height: auto;
        /* Allow full content scroll on mobile */
    }
}