/* General Body Styles */
body {
    font-family: sans-serif;
    margin: 0;
    background-color: #f8fafc; /* bg-slate-50 */
    color: #1e293b; /* text-slate-800 */
    display: flex;
    justify-content: center;
    padding: 1rem;
}

/* Main Container */
.container {
    width: 100%;
    max-width: 896px; /* max-w-4xl */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 2rem;
}

header h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: bold;
    color: #4f46e5; /* text-indigo-600 */
    margin: 0;
}

header p {
    margin-top: 0.5rem;
    font-size: 1.125rem; /* text-lg */
    color: #475569; /* text-slate-600 */
}

/* Main Content Area */
main {
    width: 100%;
    background-color: #ffffff;
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    overflow: hidden;
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
}

/* Hide tab navigation if JS is not enabled, as it serves no purpose */
body:not(.js-enabled) .tab-nav {
    display: none;
}

.tab-button {
    flex: 1;
    padding: 1rem 0.25rem;
    text-align: center;
    font-weight: 500;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: #64748b; /* text-slate-500 */
    transition: all 0.3s ease-in-out;
}

.tab-button:hover {
    color: #334155; /* hover:text-slate-700 */
    border-bottom-color: #cbd5e1; /* hover:border-slate-300 */
}

.tab-button.active {
    border-bottom-color: #6366f1; /* border-indigo-500 */
    color: #4338ca; /* text-indigo-600 */
}

/* Tab Content */
.tab-content-wrapper {
    padding: 1.5rem;
}

.tab-content {
    display: flex; /* All tabs are visible by default */
    flex-direction: column;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
.tab-content:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* These rules only apply if JavaScript has run and added the 'js-enabled' class to the body */
body.js-enabled .tab-content {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

body.js-enabled .tab-content:not(.active) {
    display: none; /* Hide non-active tabs only when JS is active */
}

/* Specific Content Styles */
.prompt, .sentence-box, .story {
    background-color: #eef2ff; /* bg-indigo-50 */
    padding: 1rem;
    border: 1px solid #e0e7ff; /* border-indigo-200 */
    border-radius: 0.5rem; /* rounded-lg */
}

.sentence-box {
    text-align: center;
}

.sentence-box strong {
    font-size: 1.25rem;
    color: #3730a3; /* text-indigo-800 */
}

textarea {
    width: 100%;
    height: 12rem;
    padding: 1rem;
    border: 1px solid #cbd5e1; /* border-slate-300 */
    border-radius: 0.5rem;
    font-size: 1rem;
    box-sizing: border-box;
    resize: vertical;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-button, .secondary-button {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.action-button {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff;
}

.action-button:hover {
    background-color: #4338ca; /* hover:bg-indigo-700 */
}

.secondary-button {
    background-color: #e2e8f0; /* bg-slate-200 */
    color: #334155; /* text-slate-700 */
}

.secondary-button:hover {
    background-color: #cbd5e1; /* bg-slate-300 */
}

/* Feedback and Results */
.feedback-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    margin-top: 1rem;
}

.feedback-item {
    background-color: #f8fafc;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.feedback-item .error {
    text-decoration: line-through;
    color: #dc2626; /* red-600 */
}

.feedback-item .correction {
    font-weight: 600;
    color: #16a34a; /* green-600 */
}

.feedback-item .explanation {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #475569;
}

/* Quiz Styles */
.quiz {
    width: 100%;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.quiz h3 {
    margin-top: 0;
    font-weight: 600;
}

.question p {
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.5rem;
}

.question label {
    display: block;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.question label.correct {
    border-color: #22c55e; /* green-500 */
    background-color: #f0fdf4; /* green-50 */
}

.question label.incorrect {
    border-color: #ef4444; /* red-500 */
    background-color: #fef2f2; /* red-50 */
}

/* Footer */
footer {
    text-align: center;
    margin-top: 2rem;
    color: #64748b; /* text-slate-500 */
    font-size: 0.875rem; /* text-sm */
}

/* Responsive Design */
@media (min-width: 640px) {
    header h1 {
        font-size: 3rem; /* sm:text-5xl */
    }
    .tab-content-wrapper {
        padding: 2rem;
    }
}