/* ===== Exam page (Public/<exam-slug>.php): test series folders ===== */
/* Builds on testseries.css (colours, navbar, chips). Loaded by exam.php only.
   Compact look that matches the mock test page (assets/css/mocktest.css):
   white cards, thin borders, 8-10px corners, purple as the one accent. */

:root{
    --ep-line:#e9e6f0;          /* = --mt-border */
    --ep-line-strong:#d9d4e6;   /* = --mt-border-strong */
    --ep-muted:#8b889a;         /* = --mt-muted */
    --ep-control:36px;          /* height of buttons, tabs and filters */
}

a.ts-card-btn{
    text-decoration:none;
}

/* ---- Page header: plain and short, so the tests start near the top ---- */
.ep-intro{
    max-width:960px;
    margin:0 auto;
    padding:16px 24px 0;
}

.ep-intro .ts-intro-box{
    align-items:flex-end;
    gap:12px;
    padding:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:var(--tyt-text);
    overflow:visible;
}

.ep-intro .ts-intro-box::before,
.ep-intro .ts-intro-box::after{
    display:none;
}

.ep-intro .ts-intro-text{
    min-width:0;
}

.ep-intro .ts-crumbs{
    flex-wrap:wrap;
    gap:2px 6px;
    margin-bottom:6px;
    font-size:12px;
    color:var(--ep-muted);
}

.ep-intro .ts-crumbs a{
    color:var(--tyt-subtext);
}

.ep-intro .ts-crumbs a:hover{
    color:var(--tyt-purple);
}

.ep-hero-title{
    display:flex;
    align-items:center;
    gap:10px;
}

.ep-intro h1{
    margin:0;
    font-size:20px;
    font-weight:700;
    line-height:1.3;
    color:var(--tyt-text);
    overflow-wrap:anywhere;
}

.ep-intro p{
    max-width:640px;
    margin:4px 0 0;
    font-size:13px;
    line-height:1.5;
    color:var(--tyt-subtext);
}

.ep-hero-logo{
    width:36px;
    height:36px;
    flex-shrink:0;
    border-radius:8px;
    border:1px solid var(--ep-line);
    background:#fff;
    color:var(--tyt-purple);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:15px;
    overflow:hidden;
}

.ep-hero-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:3px;
}

.ep-intro .ts-intro-types{
    display:flex;
    gap:6px;
    width:auto;
}

.ep-intro .ts-intro-types li{
    gap:5px;
    padding:3px 10px;
    border-radius:999px;
    border:1px solid var(--ep-line);
    background:#fff;
    color:var(--tyt-subtext);
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.ep-intro .ts-intro-types svg{
    width:13px;
    height:13px;
    color:var(--tyt-purple);
}

.section.ep-section,
.ep-intro + .section{
    max-width:960px;
    margin:0 auto;
    padding:14px 24px 48px;
}

.ep-folders{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* ---- Folder ---- */
.ep-folder{
    background:#fff;
    border:1px solid var(--ep-line);
    border-radius:12px;
    overflow:hidden;
    scroll-margin-top:90px;
}

.ep-folder[open]{
    border-color:var(--ep-line-strong);
}

.ep-folder-head{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:8px 14px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}

.ep-folder-head::-webkit-details-marker{
    display:none;
}

.ep-folder-head:hover{
    background:#fbf9ff;
}

.ep-folder-icon{
    width:30px;
    height:30px;
    flex-shrink:0;
    border-radius:8px;
    background:var(--tyt-purple-soft);
    color:var(--tyt-purple);
    display:flex;
    align-items:center;
    justify-content:center;
}

.ep-folder-icon svg{
    width:16px;
    height:16px;
}

/* Closed folder icon when collapsed, open folder icon when expanded */
.ep-folder-icon svg:last-child,
.ep-folder[open] .ep-folder-icon svg:first-child{
    display:none;
}

.ep-folder[open] .ep-folder-icon svg:last-child{
    display:block;
}

.ep-folder-title{
    flex:1;
    min-width:0;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:0 10px;
}

.ep-folder-title strong{
    font-size:14px;
    font-weight:600;
    color:var(--tyt-text);
    overflow-wrap:anywhere;
}

.ep-folder-title small{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--ep-muted);
}

.ep-folder-chevron{
    flex-shrink:0;
    width:18px;
    height:18px;
    color:var(--ep-muted);
    transition:transform .2s ease;
}

.ep-folder[open] .ep-folder-chevron{
    transform:rotate(180deg);
}

/* Tabs and filters share one row; every test takes a full row below them */
.ep-folder-body{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 8px;
    padding:10px 12px 12px;
    border-top:1px solid var(--ep-line);
}

.ep-folder-body > *,
.ep-test,
.ep-filter-empty{
    flex:0 0 100%;
    min-width:0;
}

.ep-folder-desc{
    margin:0;
    font-size:13px;
    color:var(--tyt-subtext);
    line-height:1.5;
}

/* Series features: one wrapped line of short notes */
.ts-card-features.ep-features{
    flex-direction:row;
    flex-wrap:wrap;
    gap:2px 14px;
    margin:0 0 2px;
    padding:0;
    border-top:0;
}

.ts-card-features.ep-features li{
    padding-left:12px;
    font-size:12px;
    font-weight:400;
    color:var(--tyt-subtext);
}

.category-tabs.ep-tabs{
    flex:1 1 auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:6px;
    margin:0;
    overflow-x:auto;
    scrollbar-width:none;
}

.ep-tabs::-webkit-scrollbar{
    display:none;
}

.ep-tabs .category-chip{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:var(--ep-control);
    padding:0 12px;
    border-color:var(--ep-line-strong);
    border-radius:8px;
    box-shadow:none;
    font-size:13px;
    font-weight:600;
    color:var(--tyt-subtext);
    white-space:nowrap;
}

.ep-tabs .category-chip.active-chip{
    background:var(--tyt-purple);
    border-color:var(--tyt-purple);
    color:#fff;
}

.ep-tab-count{
    min-width:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--tyt-purple-soft);
    color:var(--tyt-purple);
    font-size:11px;
    line-height:18px;
    text-align:center;
}

.ep-tabs .active-chip .ep-tab-count{
    background:rgba(255,255,255,.22);
    color:#fff;
}

.ep-empty{
    margin:8px 0 0;
    font-size:13px;
}

/* ---- Tests inside a folder ---- */
/* The list box itself is not drawn, so its filters sit beside the tabs */
.ep-test-list{
    display:contents;
}

/* ---- Filters of a tab's list (Level / Subject / Chapter) ---- */
.ep-filters{
    flex:0 1 auto;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-left:auto;
}

.ep-filter{
    display:block;
    min-width:0;
}

/* The first option ("All levels" ...) already names the filter */
.ep-filter > span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.ep-filter select{
    max-width:100%;
    height:var(--ep-control);
    padding:0 28px 0 10px;
    border:1px solid var(--ep-line-strong);
    border-radius:8px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
    appearance:none;
    font:inherit;
    font-size:13px;
    font-weight:500;
    color:var(--tyt-text);
    cursor:pointer;
}

.ep-filter select:focus{
    outline:2px solid var(--tyt-purple);
    outline-offset:1px;
}

.ep-filter-empty{
    margin:6px 0;
    font-size:13px;
}

.ep-filters[hidden],
.ep-filter-empty[hidden],
.ep-test-list[hidden],
.ep-test[hidden],
.ep-tabs[hidden],
.ep-folder[hidden]{
    display:none;
}

/* ---- One test: name, one line of facts, one button ---- */
.ep-test{
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 12px;
    border:1px solid var(--ep-line);
    border-radius:10px;
    background:#fff;
    transition:border-color .15s ease;
}

.ep-test:hover{
    border-color:var(--ep-line-strong);
}

.ep-test-info{
    flex:1;
    min-width:0;
}

.ep-test-info h3{
    margin:0 0 2px;
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    color:var(--tyt-text);
    overflow-wrap:anywhere;
}

.ep-test-meta{
    margin:0;
    padding:0;
    list-style:none;
    font-size:12px;
    line-height:1.6;
    color:var(--tyt-subtext);
}

.ep-test-meta li{
    display:inline;
    white-space:nowrap;
}

/* Dot after each fact, so a wrapped line never starts with one */
.ep-test-meta li:not(:last-child)::after{
    content:"\00b7";
    margin:0 1px 0 5px;
    color:var(--ep-muted);
    font-weight:400;
}

/* Free / Premium tag, first on the facts line */
.ep-test-meta li.ep-access{
    display:inline-block;
    margin-right:7px;
    padding:0 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    line-height:18px;
}

.ep-test-meta li.ep-access::after{
    content:none;
}

.ep-access.is-free{
    background:#e9f7ef;
    color:#166534;
}

.ep-access.is-premium{
    background:#fff5d6;
    color:#7a5200;
}

/* Difficulty level (admin: Easy / Medium / Hard / Mixed) */
.ep-test-meta li.ep-level{ font-weight:600; }
.ep-test-meta li.ep-level.is-easy{ color:#15803d; }
.ep-test-meta li.ep-level.is-medium{ color:#9a6a00; }
.ep-test-meta li.ep-level.is-hard{ color:#b91c1c; }
.ep-test-meta li.ep-level.is-mixed{ color:#4338ca; }

.ep-test-actions{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:4px;
}

.ep-start-btn{
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    height:var(--ep-control);
    padding:0 14px;
    border:1px solid transparent;
    border-radius:8px;
    background:var(--tyt-purple);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.ep-start-btn:hover{
    background:var(--tyt-purple-dark);
}

.ep-start-btn svg{
    width:15px;
    height:15px;
    flex-shrink:0;
}

/* Quiet button: "View all ... test series" */
.ep-start-btn.ep-ghost-btn{
    background:#fff;
    border-color:var(--ep-line-strong);
    color:var(--tyt-text);
}

.ep-start-btn.ep-ghost-btn:hover{
    background:#fff;
    border-color:var(--tyt-purple);
    color:var(--tyt-purple);
}

.ep-more{
    margin-top:14px;
    text-align:center;
}

.ep-notfound{
    text-align:center;
}

/* "Coming soon" / "Exam not found" boxes: same thin card as the tests */
.ep-section .ts-panel{
    padding:20px 16px;
    border-color:var(--ep-line);
    border-radius:12px;
    box-shadow:none;
}

.ep-section .ts-panel .ts-empty{
    margin:0;
    font-size:13px;
}

#examNoResults{
    margin-top:16px;
    font-size:13px;
}

/* ---- Series page (?series=<id>): one series, so no folder box around it ---- */
.ep-folder.ep-solo{
    background:none;
    border:0;
    border-radius:0;
    overflow:visible;
}

.ep-solo > .ep-folder-head{
    display:none;
}

.ep-solo > .ep-folder-body{
    padding:0;
    border-top:0;
}

/* Series page: back button in place of the navbar */
.ep-backbar{
    display:flex;
    align-items:center;
    padding:6px 24px;
    position:sticky;
    top:0;
    z-index:3000;
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--ep-line);
}
.ep-back-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:40px;
    padding:0 12px 0 8px;
    border-radius:8px;
    color:var(--tyt-text);
    font-weight:600;
    font-size:13px;
    text-decoration:none;
    transition:background .15s, color .15s;
}
.ep-back-btn:hover{
    background:var(--tyt-purple-soft, #efe7ff);
    color:var(--tyt-purple, #5b17d6);
}
.ep-back-btn svg{ width:17px; height:17px; }

/* Free test button: "Start" when logged in, "Register First" when not.
   <html class="tyt-logged-in"> is set by nav-boot.js / nav-auth.js. */
.ep-free-btn .ep-when-in{ display:none; }
.tyt-logged-in .ep-free-btn .ep-when-in{ display:inline; }
.tyt-logged-in .ep-free-btn .ep-when-out{ display:none; }

html:not(.tyt-logged-in) .ep-free-btn{
    background:#fff;
    color:var(--tyt-purple);
    border-color:var(--tyt-purple);
}

html:not(.tyt-logged-in) .ep-free-btn:hover{
    background:var(--tyt-purple);
    color:#fff;
}

/* Paid test: lock + "Unlock", goes to the passes of this exam */
.ep-locked-btn{
    background:var(--tyt-purple-dark);
    color:#fff;
}

.ep-locked-btn svg{
    width:14px;
    height:14px;
    color:var(--tyt-gold);
}

.ep-locked-btn:hover{
    background:var(--tyt-purple);
}

/* Unfinished attempt: "Resume" + small "Retake" (exam.php script) */
.tyt-logged-in .ep-free-btn.ep-resume-btn{
    background:#16a34a;
}

.tyt-logged-in .ep-free-btn.ep-resume-btn:hover{
    background:#15803d;
}

.ep-retake-link{
    display:none;
    flex-shrink:0;
    align-items:center;
    height:var(--ep-control);
    padding:0 8px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    color:var(--tyt-subtext);
    text-decoration:none;
}

.tyt-logged-in .ep-retake-link{ display:inline-flex; }
.ep-retake-link:hover{ color:var(--tyt-purple); text-decoration:underline; }

/* Exam page opened for a section it doesn't have (?type=chapter ...) */
.ep-type-missing{ margin:0 0 10px; font-size:13px; }

/* ---- Tablet and phone: 40px tap targets, less side space ---- */
@media (max-width:768px){
    :root{
        --ep-control:40px;
    }

    .ep-intro{
        padding:12px 16px 0;
    }

    .ep-intro .ts-intro-box{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }

    .ep-intro h1{
        font-size:18px;
    }

    .section.ep-section,
    .ep-intro + .section{
        padding:10px 16px 40px;
    }

    .ep-backbar{
        padding:4px 8px;
    }

    .ep-folder-body{
        padding:8px;
    }

    .ep-test{
        gap:10px;
        padding:8px 10px;
    }

    .ep-start-btn{
        padding:0 12px;
    }
}

/* ---- Phone: test name on its own line, then facts with the button beside them ---- */
@media (max-width:520px){
    /* The last crumb repeats the page heading */
    .ep-intro .ts-crumbs [aria-current],
    .ep-intro .ts-crumbs span:has(+ [aria-current]){
        display:none;
    }

    /* The tabs and folders already show the counts */
    .ep-intro .ts-intro-types{
        display:none;
    }

    .ep-filters{
        margin-left:0;
    }

    .ep-test{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:2px 10px;
    }

    .ep-test-info{
        display:contents;
    }

    .ep-test-info h3{
        grid-column:1 / -1;
        margin:0;
        font-size:13.5px;
    }

    .ep-test-meta{
        font-size:11.5px;
    }

    /* "5 subjects" is the least useful fact on a narrow screen */
    .ep-test-meta li.ep-subject-count{
        display:none;
    }

    .ep-test-meta li:has(+ .ep-subject-count)::after{
        content:none;
    }

    .ep-test .ep-start-btn svg{
        display:none;
    }

    .ep-test .ep-locked-btn svg{
        display:block;
    }
}