/* ================================================================
   English (LAL) – subject-specific overrides
   Base styles loaded from ../../shared/css/subject-base.css
   ================================================================ */

:root {
    --primary: #e17055;
    --primary-light: #fdf0ed;
}

/* ---- English topic tags ---- */
.topic-tag.gram { background: #fce4ec; color: #c62828; }
.topic-tag.vocab { background: #e8f5e9; color: #2e7d32; }
.topic-tag.readcomp { background: #e3f2fd; color: #1565c0; }
.topic-tag.litdev { background: #f3e5f5; color: #6a1b9a; }
.topic-tag.texttype { background: #fff3e0; color: #e65100; }
.topic-tag.rhetoric { background: #efebe9; color: #5d4037; }
.topic-tag.essay { background: #e0f2f1; color: #00695c; }
.topic-tag.creative { background: #ede7f6; color: #4527a0; }

/* ---- Question prompt (smaller than base) ---- */
.question-prompt { font-size: 1.05rem; }

/* ---- Passage box (reading comprehension) ---- */
.passage-box {
    background: var(--bg-subtle); border-left: 4px solid var(--primary);
    padding: 16px 20px; border-radius: 0 12px 12px 0;
    margin: 14px 0; font-size: 0.92rem; line-height: 1.7;
    font-style: italic; color: var(--text);
}
body.dark-mode .passage-box { background: #1a1a2e; border-left-color: var(--primary); }

/* ---- Text input area (for free-text answers) ---- */
.text-answer-field {
    font-size: 1.1rem; padding: 10px 16px;
    border: 2px solid var(--border); border-radius: 12px;
    min-width: 200px; max-width: 360px; width: 100%;
    font-family: inherit; color: var(--text); background: var(--card);
    transition: border-color 0.2s; outline: none;
}
.text-answer-field:focus { border-color: var(--primary); }
body.dark-mode .text-answer-field { background: #1a1a2e; border-color: #444; color: var(--text); }

/* ---- Writing Reference FAB ---- */
.writing-ref-fab {
    position: fixed; bottom: 80px; right: 24px; width: 52px; height: 52px;
    border-radius: 50%; background: var(--primary); color: #fff; border: none;
    font-size: 1.4rem; cursor: pointer; z-index: 999;
    box-shadow: 0 4px 14px rgba(225,112,85,0.4);
    display: none; align-items: center; justify-content: center; transition: transform 0.2s;
}
.writing-ref-fab:hover { transform: scale(1.1); }
.writing-ref-panel-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 1000;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.writing-ref-panel-backdrop.open { opacity: 1; pointer-events: auto; }
.writing-ref-panel {
    position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw;
    height: 100vh; background: var(--bg, #fff); z-index: 1001;
    overflow-y: auto; padding: 20px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.2);
    transform: translateX(100%); transition: transform 0.3s ease;
}
.writing-ref-panel.open { transform: translateX(0); }
.writing-ref-panel .ref-section { background: rgba(128,128,128,0.06); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.writing-ref-panel .ref-section h3 { color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 4px; margin-bottom: 8px; margin-top: 0; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table td { padding: 6px 10px; border-bottom: 1px solid rgba(128,128,128,0.15); font-size: 0.88rem; }
.ref-table td:first-child { font-weight: 600; width: 35%; }
.ref-table tr:last-child td { border-bottom: none; }
.writing-ref-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); padding: 4px 10px; border-radius: 8px; margin-bottom: 12px; }
.writing-ref-close:hover { background: rgba(128,128,128,0.1); }

/* ---- TTS Reader Bar ---- */
.tts-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 8px 12px; background: var(--bg-subtle, #f5f6fa); border-radius: 10px; border: 1px solid var(--border); }
.tts-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.15s, opacity 0.2s; flex-shrink: 0; }
.tts-btn:hover { transform: scale(1.1); }
.tts-btn:active { transform: scale(0.95); }
.tts-speed { background: var(--primary-light, #eef0ff); color: var(--primary); font-weight: 700; font-size: 0.7rem; width: auto; padding: 0 10px; border-radius: 8px; }
.tts-voice-select { border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; font-size: 0.75rem; background: var(--card); color: var(--text); max-width: 140px; cursor: pointer; }
.tts-label { font-size: 0.78rem; color: var(--text-light); margin-left: 4px; }
body.dark-mode .tts-bar { background: rgba(255,255,255,0.06); }
.tts-word { cursor: default; border-radius: 3px; transition: background 0.2s, color 0.2s; }
.tts-word-ready { background: var(--primary-light, #eef0ff); color: var(--primary); cursor: pointer; }
body.dark-mode .tts-word-ready { background: rgba(67,97,238,0.2); }

/* ---- Loading screen ---- */
.loading-screen {
    background: linear-gradient(135deg, #3d1a0f 0%, #6b3a2a 40%, #4a2a1a 70%, #5d2a1f 100%);
}
.loading-arc {
    animation: arc-draw 2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes arc-draw {
    0% { stroke-dashoffset: 264; }
    50% { stroke-dashoffset: 66; }
    100% { stroke-dashoffset: 264; }
}
.loading-orbit { animation: orbit-pulse 3s ease-in-out infinite; }
.loading-orbit:nth-child(4) { animation-delay: 0.5s; }
.loading-orbit:nth-child(5) { animation-delay: 1s; }
@keyframes orbit-pulse {
    0%,100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}
.loading-electron {
    animation: electron-orbit 2s linear infinite;
    transform-origin: 50px 50px;
}
@keyframes electron-orbit { to { transform: rotate(360deg); } }
.loading-bar {
    background: linear-gradient(90deg, #e17055, #d63031, #e17055);
    background-size: 200% 100%;
}

/* ---- Dark Mode ---- */
body.dark-mode {
    --primary-light: rgba(225,112,85,0.15);
}
body.dark-mode .lb-table th { background: rgba(225,112,85,0.15); }
body.dark-mode .fb-float-body select,
body.dark-mode .fb-float-body textarea { background: #1a1a2e; border-color: #444; color: var(--text); }

/* ---- Paper Generator (English-specific pg overrides + epg-*) ---- */
.pg-mode-btn { font-size: 0.85rem; }
.pg-option-row { align-items: center; }
.pg-option-row > label { min-width: 80px; }
.pg-select {
    border: 2px solid var(--border); border-radius: 10px; flex: 1;
}
.pg-history-row { gap: 8px; padding: 8px 0; }
.pg-hist-theme { flex: 1; color: var(--text-light); font-size: 0.78rem; }
.pg-top-bar { padding: 8px 0; flex-wrap: wrap; }
.pg-results-header { margin-bottom: 0; }
.pg-grade-circle {
    background: var(--primary); color: #fff;
}
.pg-grade-num { font-size: 2.2rem; font-weight: 800; }
.pg-grade-label { opacity: 0.8; }
.pg-result-val { font-weight: 700; }
.pg-section-title { font-size: 0.95rem; margin: 20px 0 12px; }
.pg-poem-line { font-style: italic; margin-bottom: 2px !important; }

/* EPG timer */
.epg-timer {
    display: flex; align-items: center; gap: 8px; flex: 1;
}
.epg-timer-fill {
    height: 6px; background: var(--primary); border-radius: 3px;
    transition: width 1s linear; flex: 1;
}
.epg-timer-text { font-size: 0.85rem; font-weight: 800; color: var(--primary); white-space: nowrap; }
.epg-tally { font-size: 0.82rem; color: var(--text-light); font-weight: 600; white-space: nowrap; }

/* EPG task tabs */
.epg-task-tabs {
    display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
    padding-bottom: 4px;
}
.epg-tab-btn {
    padding: 10px 18px; border: 2px solid var(--border); border-radius: 12px 12px 0 0;
    background: var(--card); color: var(--text-light); font-size: 0.82rem;
    font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.epg-tab-btn.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); border-bottom-color: transparent; }
.epg-tab-btn.has-content::after { content: ' \2713'; color: var(--success); }
body.dark-mode .epg-tab-btn { background: var(--card); border-color: #444; }
body.dark-mode .epg-tab-btn.active { background: rgba(225,112,85,0.15); border-color: var(--primary); }

/* EPG content area */
.epg-content-area {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 28px 24px;
    margin-bottom: 20px; min-height: 300px;
}

/* EPG task header */
.epg-task-header { margin-bottom: 24px; }
.epg-task-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.epg-task-time { font-size: 0.82rem; color: var(--text-light); margin-bottom: 4px; }
.epg-criteria-tag { font-size: 0.82rem; color: var(--text-light); }
.epg-criteria-tag strong { color: var(--primary); }

/* EPG text box */
.epg-text-box {
    background: var(--bg-subtle); border-left: 4px solid var(--primary);
    padding: 20px 24px; border-radius: 0 12px 12px 0;
    margin-bottom: 20px;
}
body.dark-mode .epg-text-box { background: #1a1a2e; }
.epg-text-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--primary); font-weight: 700; margin-bottom: 4px;
}
.epg-text-title { font-weight: 700; font-size: 1rem; margin-bottom: 10px; }
.epg-text-content { font-size: 0.92rem; line-height: 1.7; }
.epg-text-content p { margin-bottom: 8px; }

/* EPG questions */
.epg-questions-section { margin-bottom: 24px; }
.epg-questions-section h3 { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.epg-instruct { font-size: 0.85rem; color: var(--text-light); margin-bottom: 16px; }
.epg-question-item { margin-bottom: 18px; }
.epg-q-label { font-size: 0.92rem; line-height: 1.5; margin-bottom: 8px; font-weight: 500; }
.epg-command { font-weight: 700; color: var(--primary); }
.epg-text-ref { font-size: 0.78rem; color: var(--text-light); font-weight: 400; }

/* EPG textarea */
.epg-textarea {
    width: 100%; padding: 14px 16px; border: 2px solid var(--border); border-radius: 12px;
    font-size: 0.92rem; line-height: 1.6; font-family: inherit;
    color: var(--text); background: var(--card); resize: vertical;
    transition: border-color 0.2s; outline: none;
}
.epg-textarea:focus { border-color: var(--primary); }
.epg-textarea.epg-short { min-height: 80px; }
.epg-textarea.epg-long { min-height: 220px; }
body.dark-mode .epg-textarea { background: #1a1a2e; border-color: #444; color: var(--text); }

/* EPG word count */
.epg-word-count {
    font-size: 0.75rem; color: var(--text-light); text-align: right;
    margin-top: 4px; font-variant-numeric: tabular-nums;
}
.epg-word-count.epg-wc-good { color: var(--success); }
.epg-word-count.epg-wc-over { color: var(--error); }

/* EPG prompt box */
.epg-prompt-box {
    background: var(--primary-light); border-radius: var(--radius);
    padding: 20px 24px; margin-bottom: 20px;
}
.epg-prompt-concept, .epg-prompt-gc, .epg-prompt-tt, .epg-prompt-aud {
    font-size: 0.85rem; margin-bottom: 6px;
}
.epg-prompt-text { font-size: 1rem; line-height: 1.6; margin-top: 10px; font-weight: 500; }
.epg-scaffolding { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1); }
.epg-scaffolding-title { font-size: 0.82rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; }
.epg-scaffolding ul { padding-left: 20px; font-size: 0.85rem; color: var(--text-light); }
.epg-scaffolding li { margin-bottom: 4px; }

/* Film clip box */
.epg-film-scene {
    font-size: 0.85rem; color: var(--text-light); margin-bottom: 12px;
}
.epg-techniques {
    margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,0.15);
}
body.dark-mode .epg-techniques { border-top-color: rgba(255,255,255,0.1); }
.epg-techniques-title {
    font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--primary); margin-bottom: 10px;
}
.epg-technique-item {
    margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden;
}
body.dark-mode .epg-technique-item { border-color: #444; }
.epg-technique-item summary {
    padding: 10px 14px; font-size: 0.88rem; font-weight: 600;
    cursor: pointer; user-select: none;
    background: rgba(0,0,0,0.02);
}
body.dark-mode .epg-technique-item summary { background: rgba(255,255,255,0.03); }
.epg-technique-item summary:hover { background: var(--primary-light); }
.epg-technique-item p {
    padding: 10px 14px; font-size: 0.85rem; line-height: 1.6;
    color: var(--text-light); margin: 0;
}

/* Image choices (Task 2) */
.epg-image-choices {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0;
}
.epg-image-choice {
    display: block; text-align: center; width: 100%;
    padding: 10px; border: 3px solid #e0e0e0; border-radius: 12px;
    background: var(--card); cursor: pointer; transition: all 0.2s;
}
.epg-image-choice:hover { border-color: var(--primary); }
.epg-image-choice.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59,130,246), 0.2);
}
body.dark-mode .epg-image-choice { background: #1a1a2e; border-color: #444; }
body.dark-mode .epg-image-choice:hover,
body.dark-mode .epg-image-choice.selected { border-color: var(--primary); }
.epg-image-label {
    font-size: 0.82rem; font-weight: 700; color: var(--primary); margin-bottom: 8px;
}
.epg-image-photo {
    width: 100%; border-radius: 8px; display: block;
    aspect-ratio: 4/3; object-fit: cover;
}

.epg-writing-area { margin-top: 16px; }
.epg-bottom-nav { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* Self-Assessment */
.epg-assess-intro { text-align: center; margin-bottom: 24px; }
.epg-assess-intro h2 { color: var(--primary); margin-bottom: 8px; }
.epg-assess-total-label {
    font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-top: 12px;
}
.epg-assess-total-label span { font-size: 1.4rem; }

.epg-assess-card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 16px;
}
.epg-assess-card-header { margin-bottom: 14px; }
.epg-assess-crit-name { font-size: 1rem; font-weight: 700; color: var(--primary); }
.epg-assess-crit-context { font-size: 0.82rem; color: var(--text-light); margin-top: 2px; }
.epg-assess-crit-desc { font-size: 0.82rem; color: var(--text-light); margin-top: 4px; font-style: italic; }

.epg-band-options { display: flex; flex-direction: column; gap: 6px; }
.epg-band-btn {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
    border: 2px solid var(--border); border-radius: 10px; background: var(--card);
    cursor: pointer; transition: all 0.15s; text-align: left; width: 100%;
}
.epg-band-btn:hover { border-color: var(--primary); background: var(--primary-light); }
.epg-band-btn.selected { border-color: var(--primary); background: var(--primary-light); }
body.dark-mode .epg-band-btn { background: var(--card); border-color: #444; }
body.dark-mode .epg-band-btn:hover,
body.dark-mode .epg-band-btn.selected { border-color: var(--primary); background: rgba(225,112,85,0.15); }

.epg-band-range {
    min-width: 36px; font-weight: 800; font-size: 0.9rem; color: var(--primary);
    text-align: center; padding-top: 2px;
}
.epg-band-label { font-weight: 700; font-size: 0.85rem; min-width: 80px; }
.epg-band-desc { font-size: 0.8rem; color: var(--text-light); line-height: 1.4; flex: 1; }

/* Results */
.epg-result-card {
    background: var(--card); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 16px;
}
body.dark-mode .epg-result-card { background: var(--card); }

.epg-criteria-grid { display: flex; flex-direction: column; gap: 12px; }
.epg-crit-result { display: flex; align-items: center; gap: 12px; }
.epg-crit-result-name { min-width: 180px; font-size: 0.85rem; font-weight: 600; }
.epg-crit-result-score { min-width: 80px; text-align: right; font-size: 0.82rem; font-weight: 600; }

.epg-detail-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid var(--border-light); font-size: 0.85rem;
}
body.dark-mode .epg-detail-row { border-bottom-color: #333; }
.epg-detail-label { flex: 1; }
.epg-detail-band { min-width: 100px; color: var(--text-light); font-size: 0.82rem; }
.epg-detail-score { min-width: 40px; text-align: right; font-weight: 700; color: var(--primary); }

.epg-wc-grid { display: flex; flex-direction: column; gap: 6px; }
.epg-wc-item { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; }
.epg-wc-label { min-width: 160px; font-weight: 500; }
.epg-wc-val { font-weight: 700; }
.epg-wc-target { color: var(--text-light); font-size: 0.78rem; }
.epg-wc-inline { font-size: 0.78rem; color: var(--text-light); font-weight: 400; }

.epg-grade-note {
    margin-top: 20px; padding: 16px; background: var(--bg-subtle);
    border-radius: var(--radius); font-size: 0.82rem; line-height: 1.5;
}
body.dark-mode .epg-grade-note { background: #1a1a2e; }

.epg-answer-review { margin-bottom: 8px; }
.epg-answer-review summary { font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 6px 0; }
.epg-answer-text {
    padding: 12px 16px; background: var(--bg-subtle); border-radius: 8px;
    font-size: 0.88rem; line-height: 1.6; margin-top: 6px;
}
body.dark-mode .epg-answer-text { background: #1a1a2e; }

/* Glassmorphism */
body.has-bg .epg-content-area,
body.has-bg .epg-assess-card,
body.has-bg .epg-result-card,
body.has-bg .pg-setup-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
body.has-bg.dark-mode .epg-content-area,
body.has-bg.dark-mode .epg-assess-card,
body.has-bg.dark-mode .epg-result-card,
body.has-bg.dark-mode .pg-setup-card { background: rgba(22,33,62,0.85); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .writing-ref-fab { bottom: 72px; right: 16px; }
    .epg-content-area { padding: 18px 14px; }
    .epg-text-box { padding: 14px 16px; }
    .epg-crit-result { flex-wrap: wrap; }
    .epg-crit-result-name { min-width: 100%; }
    .epg-band-btn { flex-wrap: wrap; }
    .epg-band-label { min-width: 60px; }
    .epg-detail-row { flex-wrap: wrap; }
    .epg-detail-label { min-width: 100%; }
}