/* ============================================================
   KAY SCIENCE — Student "Past Papers" landing (/student-exam-questions)
   Brand-new, isolated page. Reuses the SAME design system as the
   task / dashboard pages (Poppins + style.css tokens/colours +
   .ks-card + .ks-btn). Only this page's LAYOUT lives here. Loaded
   ONLY on this page.
   ============================================================ */

/* local palette (derived from the shared brand tokens) */
:root {
    --pp-active: #6c5ce7;        /* selected filter pill */
    --pp-pill-border: #cdc6ec;   /* unselected pill outline (clearly visible) */
    --pp-label: #8a8ac2;         /* small group labels */
}

/* let the page grow naturally (don't force the shared 100vh scroll box) */
/* Kill the WINDOW scroll on this page: the browser's default body margin (8px)
   pushes a 100vh layout just past the viewport, producing the extra (black)
   scrollbar. Reset html/body and lock them — only the inner boxes scroll.
   Page-scoped: this stylesheet loads only on this page. */
html, body { margin: 0; height: 100%; overflow: hidden; }

/* full-bleed: the page fills the main area edge-to-edge (no gutter, so no page
   background peeks around a floating card). Locked to the viewport height with
   overflow hidden so the WINDOW never scrolls — scrolling happens inside the
   individual boxes only (single scrollbar). */
.ks-main { height: 100vh; overflow: hidden; padding: 0; }

/* This page has no greeting top-bar (per the design). Scoped here so it only
   affects this page — this stylesheet is loaded on this page only. */
.ks-topbar { display: none; }

/* Whole page uses the SAME font family as the rest of the dashboard (Poppins). */
.ks-main,
.ks-main * { font-family: var(--ks-font) !important; }

/* grey page backdrop shown in the gap BETWEEN the two white boxes.
   Fixed to the viewport height (with the main box locked) so the window can't
   scroll — only the inner boxes do. */
.pp { height: 100vh; overflow: hidden; background: #f2f3f8; }

/* two columns: left filter rail | right explainer.
   align-items: stretch so BOTH columns run full height. The grid `gap` lets the
   grey page backdrop show BETWEEN the two white boxes (their only separation —
   no shared border line). */
.pp-body {
    display: grid;
    grid-template-columns: 265px minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    height: 100vh;
}

/* ---------- shared tint tokens (icon circles) ---------- */
.pp-tone--purple { color: #7a5cf0; background: #ece4fb; }
.pp-tone--green  { color: #3fb8a6; background: #e3f7f1; }
.pp-tone--blue   { color: #4fb5cf; background: #def0f4; }
.pp-tone--gold   { color: #e0a63a; background: #fbf0d8; }

/* ============================================================
   LEFT — filter rail
   ============================================================ */
.pp-filters {
    background: #fff;                             /* white box */
    padding: 18px 20px;
    border-right: 1px solid var(--ks-divider);   /* full-height divider (align-items: stretch) */
    overflow-y: auto;                            /* scrolls ONLY if its content overflows the viewport */
    /* right-edge depth, same single grey shadow as the Video Lessons cards */
    position: relative;
    z-index: 1;                                  /* paint over the grey gutter */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
}

.pp-filters__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ks-divider);   /* line below the "Filters" heading */
    font-size: 18px;
    font-weight: 600;
    color: var(--ks-heading);
}
/* bare funnel artwork on transparent — no disc, so it sits at glyph size */
.pp-filters__icon { width: 22px; height: 22px; object-fit: contain; display: block; flex-shrink: 0; }

.pp-fgroup {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ks-divider);   /* line after each filter section */
}
/* Auto-selected, single-board students: the Exam Board group is kept in the DOM
   (its value is still submitted) but hidden from view. */
.pp-fgroup--hidden { display: none; }
.pp-fgroup__label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-heading);   /* dark heading, same family as the "Filters" title */
}
.pp-fgroup__opts { display: flex; flex-wrap: wrap; gap: 6px; }

/* NOTE: selectors are scoped under .pp-filters so they beat the global
   `.ks-app button { border:none; background:none }` reset (which has higher
   specificity than a bare `.pp-pill`) — otherwise the button border/fill vanish. */
.pp-filters .pp-pill {
    padding: 9px 13px;
    border-radius: 9px;                          /* rounded rectangle (matches the image, not a full pill) */
    border: 1.5px solid var(--pp-pill-border);
    background: #fff;
    color: var(--ks-indigo);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pp-filters .pp-pill:hover { border-color: #a99fe4; }
.pp-filters .pp-pill.is-active {
    background: var(--pp-active);
    border-color: var(--pp-active);
    color: #fff;
    box-shadow: 0 8px 16px rgba(108, 92, 231, .25);
}

/* Cascade state: an option with no papers for the current selection (or a level
   whose level above is still unchosen) is grayed out and not clickable. */
.pp-filters .pp-pill.is-disabled,
.pp-filters .pp-pill:disabled {
    background: #f4f4f6;
    border-color: #e2e0e8;
    color: #a9a6b4;
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(1);
}
.pp-filters .pp-pill.is-disabled:hover,
.pp-filters .pp-pill:disabled:hover { border-color: #e2e0e8; }

/* An option (or a whole level) that does not exist for the current exam board /
   subject is removed from the rail, not grayed out — see applyPossible() in the
   page script. Explicit so the [hidden] attribute beats the rules above. */
.pp-filters .pp-pill[hidden],
.pp-filters .pp-fgroup[hidden] { display: none; }

/* A whole level that has nothing to offer — dimmed label included. */
.pp-fgroup--off { opacity: .55; }
.pp-fgroup--off .pp-fgroup__label { color: #a9a6b4; }

/* students-only note */
.pp-note {
    margin-top: 4px;
    padding: 13px 16px;
    border-radius: 16px;
    background: #f3f0fd;
}
.pp-note__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--pp-active);
    margin-bottom: 9px;
}
.pp-note__icon { width: 17px; height: 17px; flex-shrink: 0; }
.pp-note__list { margin: 0; padding: 0; list-style: none; }
.pp-note__list li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ks-indigo-soft);
}
.pp-note__list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--pp-active);
}
.pp-note__foot {
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ks-heading);
}

/* ============================================================
   RIGHT — explainer card
   ============================================================ */
/* content box: white, full-height, square and flat (no rounded corners / drop
   shadow — matches the reference). Overrides the shared .ks-card treatment. */
.pp-card {
    background: #fff;
    box-shadow: none;
    border-radius: 0;
    /* left gutter matches .pp-results, so the explainer sits the SAME distance
       from the filter rail as the results heading does */
    padding: 22px 24px 22px 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* anchor content to the top so nothing is pushed off-screen */
}

/* Nudge the hero down so the TOP of its icon lines up with the divider line
   under the "Filters" heading in the left rail. That line sits at the filter
   rail's top padding (18px) + title height + its 12px padding-bottom (~55px);
   the card's own top padding is 22px, so add the remaining offset here. */
.pp-hero { text-align: center; margin-top: 33px; }
.pp-hero__icon {
    display: inline-flex;
    justify-content: center;
    margin-bottom: 6px;
}
.pp-hero__icon img { width: 46px; height: auto; display: block; }
.pp-hero__title {
    margin: 0 0 7px;
    font-size: 26px;
    font-weight: 700;
    color: var(--ks-heading);
    letter-spacing: .2px;
}
.pp-hero__subtitle {
    margin: 0 auto;
    max-width: 520px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ks-muted);
}

/* ---------- 3-step guide ---------- */
.pp-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 2px;
}
.pp-step {
    flex: 0 1 190px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pp-step__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;   /* circular icon badge (matches the book image) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.pp-step__icon svg { width: 26px; height: 26px; }
/* image-based step icon (already includes its own tinted circle) */
.pp-step__icon--img { background: transparent; border-radius: 0; }
.pp-step__icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-step__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ks-heading);
    margin-bottom: 4px;
}
.pp-step__desc {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ks-muted);
}
.pp-steps__arrow {
    color: #cfcae6;
    display: flex;
    align-items: center;
    height: 54px;
    flex: 0 0 auto;
}
.pp-steps__arrow svg { width: 22px; height: 22px; }

.pp-rule {
    border: 0;
    border-top: 1px solid var(--ks-divider);
    margin: 14px 0;
}

/* ---------- illustration ---------- */
.pp-illus { text-align: center; margin: 0; }
.pp-illus img { width: 100%; max-width: 300px; height: auto; display: inline-block; }

/* ---------- feature strip ---------- */
.pp-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: #faf9ff;
    border-radius: 16px;
    padding: 12px 18px;
    margin: 14px 0 16px;
}
.pp-feature {
    display: flex;
    align-items: center;
    gap: 11px;
    justify-content: center;
}
.pp-feature__icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;   /* round icon badges */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pp-feature__icon svg { width: 21px; height: 21px; }
.pp-feature__label {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ks-heading);
}

/* ---------- call to action ---------- */
.pp-cta { text-align: center; }
/* NOTE: selectors are scoped under .pp-cta so they out-specify the shared
   `.ks-btn.ks-btn--primary` background/shadow — otherwise the enabled state
   would keep the light shared gradient and look identical to disabled. */
.pp-cta .pp-cta__btn {
    gap: 8px;
    padding: 13px 30px;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: none;
    /* ENABLED: solid purple — same colour as a selected filter button */
    background: var(--pp-active);
    box-shadow: 0 10px 20px rgba(108, 92, 231, .30);
}
/* DISABLED (until every section is selected): the softer purple, not clickable */
.pp-cta .pp-cta__btn:disabled {
    background: linear-gradient(135deg, #b9a6f2 0%, #a48dee 45%, #8f9dee 100%);
    box-shadow: none;
    cursor: not-allowed;
    opacity: .9;
}
.pp-cta .pp-cta__btn:disabled:hover { transform: none; }
.pp-cta__btn svg { width: 18px; height: 18px; }
.pp-cta__hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ks-muted);
}

/* ============================================================
   RESULTS VIEW (shown when "Show My Papers" is clicked)
   ============================================================ */
/* In results mode the box drops its centred padding; the inner list scrolls on
   its own so the left filter rail stays put. */
.pp-card.is-results {
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
    background: #f2f3f8;   /* grey backdrop for the results screen */
}
.pp-results {
    height: 100vh;
    overflow-y: auto;
    padding: 26px 14px 32px 6px;   /* right gutter allows for the 9px scrollbar */
}
.pp-results__head { margin-bottom: 18px; }
.pp-results__title {
    margin: 0 0 5px;
    font-size: 24px;
    font-weight: 700;
    color: var(--ks-heading);
    letter-spacing: .2px;
}
.pp-results__subtitle {
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ks-muted);
}

.pp-year {
    background: #fff;   /* white boxes on the grey results backdrop */
    border: 1.5px solid #f0f0f0;
    border-radius: 12px;
    padding: 9px 16px;
    margin-bottom: 6px;
    /* right/bottom depth, same single grey shadow as the Video Lessons cards */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .30);
}
.pp-year__title {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pp-active);
}
.pp-paper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 12px;
}
.pp-paper + .pp-paper { border-top: 1px solid var(--ks-divider); }
.pp-paper__no {
    min-width: 52px;
    font-weight: 600;
    color: var(--ks-heading);
}
.pp-paper__sep {
    width: 1px;
    height: 14px;
    background: #d8d2f3;
    flex-shrink: 0;
}
.pp-paper__desc {
    flex: 1;
    font-weight: 500;
    color: var(--ks-indigo-soft);
    text-decoration: none;
}
a.pp-paper__desc:hover { text-decoration: underline; color: var(--pp-active); }
.pp-paper.is-locked .pp-paper__desc { opacity: .6; }
.pp-paper__mark {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    color: var(--pp-active);
}
.pp-paper__mark:hover { text-decoration: underline; }

/* dynamic-list states (loaded via getResources) */
.pp-empty,
.pp-loading {
    padding: 28px 4px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ks-muted);
}

/* ---------- styled scrollbars for the scrollable boxes ---------- */
.pp-filters,
.pp-results {
    scrollbar-width: thin;
    scrollbar-color: #cdc6ec transparent;
}
.pp-filters::-webkit-scrollbar,
.pp-results::-webkit-scrollbar { width: 9px; }
.pp-filters::-webkit-scrollbar-track,
.pp-results::-webkit-scrollbar-track { background: transparent; }
.pp-filters::-webkit-scrollbar-thumb,
.pp-results::-webkit-scrollbar-thumb {
    background: #d3cdec;
    border-radius: 9px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.pp-filters::-webkit-scrollbar-thumb:hover,
.pp-results::-webkit-scrollbar-thumb:hover { background: #b9afe6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Desktop deliberately LOCKS the viewport — html/body, .ks-main, .pp and
   .pp-body are all 100vh with overflow:hidden so only the two inner boxes
   scroll (one scrollbar). Once the grid stacks into a single column that lock
   clips everything past the first screen: the filter rail and the results sat
   below the fold with nothing able to scroll to them. Below 992px hand the
   scrolling back to the window and let every box size to its content. */
@media (max-width: 992px) {
    html, body { height: auto; overflow: visible; }
    .ks-main { height: auto; min-height: 100vh; overflow: visible; }
    .pp { height: auto; overflow: visible; }
    .pp-body {
        grid-template-columns: 1fr;
        gap: 22px;
        height: auto;
        align-items: start;
    }
    /* stacked, so the full-height divider + inner scroll no longer apply */
    .pp-filters { overflow: visible; border-right: 0; }
    /* the 6px left gutter only made sense as the gap to the filter rail beside it */
    .pp-card { padding: 20px 18px; }
    .pp-card.is-results { overflow: visible; }
    .pp-results { height: auto; overflow: visible; padding: 22px 16px 28px; }
    .pp-note { max-width: 320px; }
}

/* The greeting bar is hidden on this page (see the top of this file), but the
   mobile off-canvas sidebar's ONLY trigger is the hamburger inside it — so
   bring the bar back as a hamburger-only strip on small screens. .ks-main has
   padding:0 here, hence the strip supplies its own. */
@media (max-width: 860px) {
    .ks-topbar { display: flex; margin: 0; padding: 14px 16px 0; }
    .ks-topbar__greet { display: none; }
}
@media (max-width: 640px) {
    .pp-card { padding: 26px 20px 24px; }
    .pp-hero__title { font-size: 24px; }
    .pp-steps { flex-direction: column; align-items: center; gap: 18px; }
    .pp-steps__arrow { transform: rotate(90deg); height: auto; }
    .pp-features { grid-template-columns: 1fr 1fr; }
}