/* IELTS Writing Practice — scoped App UI styles */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.lx-practice {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 3rem;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.lx-practice__hdr {
    margin-bottom: 0.25rem;
}

.lx-practice__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--t-fg);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.lx-text-teal {
    color: var(--t-pri);
}

.lx-practice__subtitle {
    font-size: 1.0625rem;
    color: var(--t-mu-fg);
    margin: 0;
}

/* ── Filter label ────────────────────────────────────────────────────── */
.lx-practice__filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-mu-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* ── Task choice card grid ───────────────────────────────────────────── */
.lx-practice__task-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .lx-practice__task-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Choice card — background-light-teal variant ─────────────────────── */
.lx-choice {
    background: linear-gradient(135deg, var(--color-teal-50) 0%, var(--color-white) 65%);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1.375rem 1.5rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    user-select: none;
}

.lx-choice:hover {
    border-color: var(--t-pri);
}

.lx-choice.is-selected {
    border-color: var(--t-pri);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-pri) 15%, transparent);
}

.lx-choice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lx-choice-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--t-fg);
    line-height: 1.3;
}

/* ── Custom radio — teal, read-only ──────────────────────────────────── */
.lx-ro-radio.is-ro {
    -webkit-appearance: none;
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--t-ln);
    border-radius: 9999px;
    background: var(--t-bg);
    flex-shrink: 0;
    pointer-events: none;
    position: relative;
    transition: border-color 0.15s;
}

.lx-ro-radio.is-ro:checked {
    border-color: var(--t-pri);
}

.lx-ro-radio.is-ro:checked::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    background: var(--t-pri);
}

/* ── View-mode toggle ────────────────────────────────────────────────── */
.lx-practice__view-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lx-practice__filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ── Pill buttons ────────────────────────────────────────────────────── */
.lx-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--t-mu-fg);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1.4;
}

.lx-pill:hover {
    background: var(--t-mu);
    color: var(--t-fg);
}

.lx-pill--active {
    background: var(--t-ly);
    border-color: var(--t-ln);
    color: var(--t-fg);
}

/* ── Month / Book filters ────────────────────────────────────────────── */
.lx-practice__month-filter,
.lx-practice__book-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lx-practice__filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* ── Practice card grid ──────────────────────────────────────────────── */
.lx-practice__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 480px) {
    .lx-practice__grid {
        grid-template-columns: 1fr;
    }
}

/* ── Practice card — card-interactive ───────────────────────────────── */
.lx-pcard {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: linear-gradient(135deg, var(--color-slate-100) 0%, var(--color-white) 65%);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
    padding: 1rem;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    cursor: default;
}

.lx-pcard:hover {
    border-color: var(--t-pri);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--t-pri) 10%, transparent);
}

.lx-pcard--highlighted {
    border-color: var(--t-pri);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-pri) 15%, transparent);
}

/* ── Badges ──────────────────────────────────────────────────────────── */
.lx-pcard__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.lx-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
}

.lx-badge-outline {
    background: var(--t-bg);
    color: var(--t-fg);
    box-shadow: inset 0 0 0 1px var(--t-ln);
}

.lx-badge-ghost {
    background: transparent;
    color: var(--t-mu-fg);
    border: 1px solid var(--t-ln);
}

/* ── Card text ───────────────────────────────────────────────────────── */
.lx-pcard__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--t-fg);
    margin: 0;
    line-height: 1.4;
}

.lx-pcard__qtype {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--t-pri);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lx-pcard__prompt,
.lx-pcard__subtopics {
    font-size: 0.8125rem;
    color: var(--t-mu-fg);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lx-pcard__subtopics-label {
    font-weight: 600;
    color: var(--t-fg);
}

/* ── Card image preview ──────────────────────────────────────────────── */
.lx-pcard__image {
    width: 100%;
    max-height: 11rem;
    object-fit: cover;
    object-position: top;
    border-radius: 0.625rem;
    border: 1px solid var(--t-ln);
}

/* ── Card actions ────────────────────────────────────────────────────── */
.lx-pcard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.375rem;
}

/* ── Button tooltip wrapper ──────────────────────────────────────────── */
.lx-pcard__btn-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.lx-pcard__btn-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.4375rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-sec);
    color: var(--t-sec-fg);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    /* arrow */
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--color-black) 15%, transparent));
}

.lx-pcard__btn-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--t-sec);
}

.lx-pcard__btn-wrap:hover .lx-pcard__btn-tip {
    display: block;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.lx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.lx-btn-pri {
    background: var(--t-pri);
    color: var(--t-pri-fg);
    border-color: var(--t-pri);
}

.lx-btn-pri:hover {
    background: var(--t-pri-h);
    border-color: var(--t-pri-h);
}

.lx-btn-out {
    background: transparent;
    color: var(--t-fg);
    border-color: var(--t-ln);
}

.lx-btn-out:hover {
    background: var(--t-mu);
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.lx-practice__empty {
    grid-column: 1 / -1;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--t-mu-fg);
    font-size: 0.9375rem;
    background: var(--t-ly);
    border: 1px solid var(--t-ln);
    border-radius: 0.875rem;
}