/* Reset */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-size: inherit;
}

/* General stuff */
input, select, button {
    font: inherit;
}
button {
    padding: 0;
    border: none;
    color: var(--darkgray);
    background: var(--white);
}
input[type=number] {
    width: 3em;
    background: var(--black);
    color: var(--lightgray);
    border: none;
    text-align: right;
}

/* SVG icons */
svg {
    width: 1em;
    height: 1em;
}
svg path {
    stroke: currentColor;
    stroke-linecap: square;
    fill: none;
}
svg path.fill {
    fill: currentColor;
}

button.prev-next-button {
    font-size: 1.5em;
    line-height: 0.666em;
    background: none;
    color: var(--pink);
}

/* Main layout */
html {
    height: 100%;
}
body {
    /* Scale to fit the screen, like the PICO-8 does */
    font-size: 3vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    margin: 0;
    height: 96vmin;
    width: 96vmin;
    margin: 2vmin auto;
    line-height: 1;
    font-family: monospace;
    background: var(--black);
}
body {
    /* Color definitions, to enforce consistency */
    /* This is the PICO-8 normal palette */
    --black: #000000;
    --navy: #1D2B53;
    --maroon: #7E2553;
    --emerald: #008751;
    --brown: #AB5236;
    --darkgray: #5F574F;
    --lightgray: #C2C3C7;
    --white: #FFF1E8;
    --cerise: #FF004D;
    --orange: #FFA300;
    --yellow: #FFEC27;
    --lime: #00E436;
    --azure: #29ADFF;
    --lavender: #83769C;
    --pink: #FF77A8;
    --beige: #FFCCAA;
}
body > header {
    padding: 0.25em 1em;
    background: var(--cerise);
    color: var(--maroon);
}
body > main {
    flex: 1 0 auto;
    padding: 1em;
    background: var(--darkgray);
}
main[hidden] {
    display: none !important;
}
body > footer {
    background: var(--cerise);
    padding: 0.25em 1em;
    min-height: 1em;
    color: var(--maroon);
}

/* Header/footer */
body > header {
    display: flex;
    align-items: center;
}
body > header > h1 {
    flex: 1 0 auto;
}
#tab-navigation {
    display: flex;
    line-height: 1;
    color: var(--maroon);
}
#tab-navigation > li {
    margin-left: 4px;
}
#tab-navigation svg {
    display: block;
}
#tab-navigation button {
    color: inherit;
    background: none;
}
#tab-navigation button.--selected {
    color: var(--white);
}


/******************************************************************************/
/* Sound editor */

/* Track controls */
#main-controls {
    display: flex;
}
#track-number {
    padding: 0 0.25em;
    color: var(--white);
}
#main-controls h3 {
    flex: 1 0 auto;
    margin: 0 0.25em;
    text-align: right;
    color: var(--lightgray);
}
/* Note controls */
#note-controls {
    display: grid;
    /* Four controls plus their labels makes for two rows, four columns */
    grid-template-columns: 1fr 3fr 1fr 3fr;
    align-items: center;
    gap: 1ex;
    margin: 1em 0;
}
#note-controls h3 {
    color: var(--lightgray);
}
ol#octave,
ol#waveform,
ol#volume,
ol#effect {
    display: flex;
}
ol#octave li {
    margin: 2px;
    padding: 2px;
    line-height: 1;
    color: var(--darkgray);
    background: var(--lightgray);
}
ol#octave li.selected {
    background: var(--white);
}
ol#waveform li,
ol#effect li {
    margin: 0 2px;
    line-height: 1;
    background: var(--lightgray);
}
ol#waveform li svg,
ol#effect li svg {
    display: block;
}
ol#volume button.volume-button {
    position: relative;
    font-size: 0;
    width: 1vmin;
    height: 3vmin;
    margin-right: 0.5vmin;
    color: transparent;
    background: var(--black);
}
ol#volume button.volume-button::before {
    content: '';
    display: block;
    position: absolute;
    background: var(--lightgray);
    top: calc((1 - var(--value) / 7) * 100%);
    bottom: 0;
    left: 0;
    right: 0;
}

/* Beats list */
#track-beat-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vmin;
}
.beat-list {
    border: 4px solid var(--black);
}
.beat-list li {
    display: flex;
    justify-content: space-between;
    background: var(--black);
    color: var(--darkgray);
}
.beat-list li.--selected {
    background: var(--navy);
}
.beat-list li.--playing {
    background: var(--yellow);
}
.beat-list li .-note {
    flex: 0 0 1vmin;
    color: var(--white);
}
.beat-list li .-oct {
    flex: 0 0 0.5vmin;
    color: var(--lightgray);
}
.beat-list li .-wave {
    flex: 0 0 1vmin;
    color: var(--pink);
}
.beat-list li .-vol {
    flex: 0 0 0.5vmin;
    color: var(--azure);
}
.beat-list li .-fx {
    flex: 0 0 1vmin;
    color: var(--lavender);
}
.beat-list li span svg {
    display: block;
}
.beat-list li span.--selected {
    background: var(--yellow);
}
.beat-list li.empty span {
    color: var(--navy);
}


/******************************************************************************/
/* Music editor */

main[data-panel=pattern] {
    display: flex;
    flex-direction: column;
}

#pattern-controls {
    display: flex;
    height: 2em;
    color: var(--white);
}
#pattern-list {
    flex: 1 0 0px;
    display: flex;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-color: var(--pink) var(--maroon);
}
#pattern-list > li {
    display: flex;
    flex-direction: column;
    margin: 0 4px;
}
#pattern-list > li button {
    background: var(--lightgray);
}
#pattern-list > li.--selected {
}
#pattern-list > li.--selected button {
    background: var(--white);
}
.pattern-dots {
    display: flex;
    margin-bottom: 0.5vmin;
    justify-content: space-evenly;
}
.pattern-dot {
    height: 0.5vmin;
    width: 0.5vmin;
    background: var(--black);
}
.pattern-dot[data-track-modulus="0"] {
    background: var(--cerise);
}
.pattern-dot[data-track-modulus="1"] {
    background: var(--orange);
}
.pattern-dot[data-track-modulus="2"] {
    background: var(--yellow);
}
.pattern-dot[data-track-modulus="3"] {
    background: var(--lime);
}
.pattern-dot[data-track-modulus="4"] {
    background: var(--azure);
}
.pattern-dot[data-track-modulus="5"] {
    background: var(--lavender);
}
.pattern-dot[data-track-modulus="6"] {
    background: var(--pink);
}
.pattern-dot[data-track-modulus="7"] {
    background: var(--beige);
}
#pattern-controls > button {
    margin-left: 1vmin;
    color: var(--navy);
    background: none;
    filter: drop-shadow(0 0.25vmin var(--black));
}
#pattern-controls > button.--set {
    color: var(--azure);
}

#pattern-columns {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1vmin 0;
    gap: 2vmin;
}
#pattern-columns > .pattern-column {
    display: flex;
    flex-direction: column;
}
.pattern-column .pattern-column-pattern {
    display: flex;
    align-items: center;
    height: 1em;
    margin-bottom: 0.5vmin;
}
.pattern-column .pattern-track-number {
    color: var(--lightgray);
    background: var(--black);
}
.pattern-column input[type=checkbox] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: 0.5vmin;
    width: 0.5vmin;
    border: 0.5vmin solid transparent;
    margin: 0.5vmin 1vmin;
    box-shadow: 0 0 0 0.5vmin var(--lightgray);
}
.pattern-column input[type=checkbox]:checked {
    background: var(--white);
    background-clip: padding-box;
}
.pattern-column .beat-list {
    flex: 1 0 0;
    overflow-y: auto;
    scrollbar-color: var(--darkgray) var(--black);
}
.pattern-column .beat-list > li {
    display: none;
}
.pattern-column.--enabled .beat-list > li {
    display: flex;
}