/* css/csv-to-json.css */

#input-csv-ctj,
#output-json-ctj {
    min-height: 250px;
    /* Ensure a good default height */
    font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
    /* Monospace for data */
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* md breakpoint */
    .grid.md\:grid-cols-2 {
        /* Target the main grid for input/output */
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }

    #input-csv-ctj {
        margin-bottom: 1rem;
        /* Add space below input when stacked */
    }

    #input-csv-ctj,
    #output-json-ctj {
        height: 200px;
        /* Adjust height for stacked view */
    }

    .flex.md\:flex-row {
        /* Target the options/buttons row */
        flex-direction: column;
    }

    .flex.md\:flex-row>.flex.items-center {
        /* Options div */
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {

    /* sm breakpoint */
    h1 {
        font-size: 1.8rem;
    }
}