/* ===================== READING TAB ===================== */

.reading-chips { margin-bottom: 16px; }

.reading-list {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.reading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.reading-row:last-child { border-bottom: none; }
.reading-row:hover { background: var(--bg-color); }

.reading-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.reading-row-main strong { font-weight: 500; }
.reading-row-main span { font-size: 0.8125rem; color: var(--text-muted); }
.reading-row-main .reading-row-meta { font-size: 0.75rem; }
.reading-row-state { color: var(--text-muted); flex-shrink: 0; }

.reading-back { margin-bottom: 14px; }

.reading-title { font-size: 1.5rem; font-weight: 500; margin: 8px 0 2px; }
.reading-title-th { color: var(--text-muted); margin-bottom: 16px; }

.reading-paragraphs { display: flex; flex-direction: column; gap: 18px; }

.reading-paragraph { border-top: 1px solid var(--border-color); padding-top: 14px; }
.reading-paragraph:first-child { border-top: none; padding-top: 0; }

.reading-para-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.reading-para-en { line-height: 1.9; }
.reading-para-th { line-height: 1.8; color: var(--text-muted); margin-top: 8px; }

.reading-word {
    cursor: pointer;
    border-radius: 2px;
    padding: 0 1px;
    transition: background 0.15s ease, color 0.15s ease;
}

.reading-word:hover { background: var(--pro-bg); color: var(--primary-color); }

.reading-question { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 4px; }
.reading-feedback { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.reading-feedback:empty { display: none; }
.reading-score { font-size: 2rem; font-weight: 500; }

/* ===================== WORD LOOKUP ===================== */

.reading-lookup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 30;
}

.reading-lookup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    max-height: 70vh;
    overflow-y: auto;
}

.reading-lookup-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 2px 2px 0 0;
    padding: 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.reading-lookup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
}

.reading-lookup-word {
    font-size: 1.375rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 36px;
}

.reading-lookup-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.reading-lookup-pron { color: var(--text-muted); font-style: italic; margin-top: 6px; }
.reading-lookup-translation { font-size: 1.0625rem; margin-top: 10px; }
.reading-lookup-add { margin-top: 16px; width: 100%; }

@media (max-width: 768px) {
    .reading-lookup { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

@media (min-width: 769px) {
    .reading-lookup {
        left: auto;
        right: 24px;
        bottom: 24px;
        width: 380px;
        max-width: calc(100vw - 48px);
    }
    .reading-lookup-card { border-radius: 2px; }
    .reading-lookup-backdrop { background: transparent; }
}

@media (max-width: 340px) {
    .reading-lookup-word { font-size: 1.1875rem; }
}

/* styles.css stretches .btn-secondary to full width on phones; the paragraph toggle sits beside 🔊 */
.reading-translate { width: auto; flex: none; }