static/css/style.css

/* Custom styles for the table for better mobile viewing */
@media (max-width: 768px) {
    .responsive-table tr {
        display: block;
        margin-bottom: 0.75rem;
        border-bottom: 2px solid #e5e7eb;
    }
    .responsive-table th, .responsive-table td {
        display: block;
        text-align: right;
        padding: 0.5rem 1rem;
    }
    .responsive-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #4b5563;
    }
    .responsive-table thead {
        display: none;
    }
}
/* Ensure the body uses the Inter font, centers content, and stacks vertically */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    display: flex;
    flex-direction: column; /* FIX: Stack children vertically */
    justify-content: flex-start;
    align-items: center; /* FIX: Center content horizontally */
    min-height: 100vh;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
[contenteditable="true"] {
    border: 1px solid #c7d2fe;
    background-color: #f0f4ff;
    padding: 0.75rem;
    cursor: text;
    min-height: 5rem;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out;
    resize: vertical; /* Allow vertical resizing for long transcriptions */
    overflow: auto;
}
[contenteditable="true"]:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}
/* New CSS for Contenteditable Placeholder */
[contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af; /* A light grey color */
    pointer-events: none; /* Allows the user to click the div to type */
    display: block;
}