/* ============================================================================
   CODEAYAN — GET HIRED STYLES
   Location: /style/prep.css
   ----------------------------------------------------------------------------
   NOTE ON !important
   global.css sets `font-weight: 400 !important` on body, h1-h6, p, a, span,
   div, input, textarea, button — and `user-select: none` on body. Any weight
   or selection rule here must therefore also be !important, or it silently
   loses. That is why the declarations below look heavier than usual.

   NOTE ON MOBILE OVERFLOW
   Every grid track uses minmax(0, 1fr), never plain 1fr. Plain 1fr means
   minmax(auto, 1fr), and that `auto` floor stops the track shrinking below the
   width of its widest child — a long line of SQL inside <pre>. The track then
   forces the whole page wider than the phone, and global.css's overflow-x:clip
   hides the result instead of letting it scroll, so the page looks shoved off
   to one side. Same reason for the min-width:0 declarations: grid and flex
   items default to min-width:auto and refuse to shrink past their content.
   ============================================================================ */

:root {
    --prep-nav-h:     76px;
    --prep-sidebar-w: 330px;
    --prep-read-max:  760px;
    --prep-amber:     #f29111;
    --prep-violet:    #8b5cf6;
}

/* Answers must be copyable even though global.css disables selection. */
.prep-selectable,
.prep-answer,
.prep-answer * ,
.quick-answer,
.quick-answer * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SHARED PRIMITIVES
   ══════════════════════════════════════════════════════════════════════ */
.prep-eyebrow {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand-blue);
    font-weight: 700 !important;
    display: block;
    margin-bottom: .6rem;
}

.prep-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: .28rem .6rem;
    border-radius: 100px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pill-easy   { background: rgba(6,215,184,.12);  color: #0a7d6c; border-color: rgba(6,215,184,.35); }
.pill-medium { background: rgba(242,145,17,.12); color: #a35f00; border-color: rgba(242,145,17,.35); }
.pill-hard   { background: rgba(217,83,79,.10);  color: #9c2f2b; border-color: rgba(217,83,79,.30); }
.pill-freq   { background: rgba(40,151,201,.10); color: var(--brand-blue); border-color: rgba(40,151,201,.30); }

.prep-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.prep-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,164,182,.10);
    border-color: var(--brand-teal);
}

/* ══════════════════════════════════════════════════════════════════════
   HUB — THE PICKER
   The signature element: a two-step sentence the student completes.
   ══════════════════════════════════════════════════════════════════════ */
.picker-shell {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.04);
    position: relative;
    overflow: hidden;
}
.picker-shell::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--brand-mint), var(--brand-blue));
}
.picker-step { margin-bottom: 2.25rem; }
.picker-step:last-of-type { margin-bottom: 1.5rem; }
.picker-lead {
    font-size: 1.35rem;
    color: var(--ink-dark);
    line-height: 1.5;
    margin-bottom: 1.1rem;
    font-weight: 400 !important;
}
.picker-lead .step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ink-dark);
    color: #fff;
    font-size: .78rem;
    font-weight: 700 !important;
    margin-right: .6rem;
    vertical-align: middle;
}

.chip-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.prep-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.15rem;
    border: 1px solid var(--border-subtle);
    border-radius: 100px;
    background: var(--surface-bg);
    color: var(--ink-medium) !important;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}
.prep-chip:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue) !important;
    transform: translateY(-2px);
}
.prep-chip.is-selected {
    background: var(--ink-dark);
    border-color: var(--ink-dark);
    color: #fff !important;
    font-weight: 700 !important;
}
.prep-chip .chip-count { font-size: .72rem; opacity: .65; }
.prep-chip:focus-visible { outline: 3px solid var(--brand-mint); outline-offset: 2px; }

/* Topic groups: all rendered server-side so crawlers see every link.
   JS reveals the group matching the chosen role. */
.topic-group { display: none; }
.topic-group.is-shown { display: block; }
.no-js-note { font-size: .85rem; color: var(--ink-light); margin-top: .8rem; }

.picker-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--brand-mint);
    color: #111 !important;
    border: 1px solid var(--brand-mint);
    border-radius: 10px;
    padding: .95rem 2.2rem;
    font-size: 1.02rem;
    font-weight: 700 !important;
    text-decoration: none;
    transition: all .3s ease;
}
.picker-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6,215,184,.28); }
.picker-cta[aria-disabled="true"] {
    background: #e9e9e7; border-color: #e0e0dd; color: #9a9a96 !important;
    pointer-events: none; transform: none; box-shadow: none;
}
.picker-hint { font-size: .88rem; color: var(--ink-light); margin-top: .9rem; }

/* Role cards on the hub / role hub */
.role-card { display: block; padding: 1.6rem; height: 100%; text-decoration: none; }
.role-card-icon {
    width: 46px; height: 46px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; margin-bottom: 1rem;
}
.role-card h3 { font-size: 1.15rem; color: var(--ink-dark); font-weight: 700 !important; margin-bottom: .4rem; }
.role-card p  { font-size: .92rem; color: var(--ink-light); line-height: 1.6; margin-bottom: 1rem; }
.role-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,.06); padding-top: .9rem;
    font-size: .85rem; color: var(--ink-medium);
}

/* ══════════════════════════════════════════════════════════════════════
   SET PAGE — TWO PANE LAYOUT
   ══════════════════════════════════════════════════════════════════════ */
.prep-layout {
    display: grid;
    grid-template-columns: var(--prep-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
    max-width: 100%;
}

.prep-sidebar {
    position: sticky;
    top: var(--prep-nav-h);
    height: calc(100vh - var(--prep-nav-h));
    overflow-y: auto;
    border-right: 1px solid var(--border-subtle);
    background: var(--surface-card);
    padding: 1.5rem 0 2rem;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}
.prep-sidebar::-webkit-scrollbar { width: 4px; }
.prep-sidebar::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 4px; }

.prep-sidebar-head { padding: 0 1.25rem 1.2rem; border-bottom: 1px solid var(--border-subtle); }
.prep-back {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700 !important; color: var(--ink-light);
    text-decoration: none; margin-bottom: .9rem;
}
.prep-back:hover { color: var(--brand-blue); }
.prep-set-name { font-size: 1rem; font-weight: 700 !important; color: var(--ink-dark); line-height: 1.4; }
.prep-set-sub  { font-size: .8rem; color: var(--ink-light); margin-top: .3rem; }

.prep-progress-wrap { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.prep-progress-bar  { flex: 1; min-width: 0; height: 5px; background: rgba(0,0,0,.07); border-radius: 4px; overflow: hidden; }
.prep-progress-fill { height: 100%; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-mint), var(--brand-blue)); transition: width .35s ease; }
.prep-progress-pct  { font-size: .74rem; color: var(--ink-light); font-weight: 700 !important; min-width: 34px; text-align: right; }

.prep-qlist { list-style: none; margin: .8rem 0 0; padding: 0; }
.prep-qlist-item a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
    padding: .7rem 1.25rem;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--ink-medium);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease;
}
.prep-qlist-item a:hover { background: rgba(40,151,201,.05); color: var(--brand-blue); }
.prep-qlist-item.is-active a {
    background: rgba(6,215,184,.08);
    border-left-color: var(--brand-mint);
    color: var(--ink-dark);
    font-weight: 700 !important;
}
.qtext { min-width: 0; overflow-wrap: break-word; }
.qnum {
    font-size: .72rem;
    color: var(--ink-light);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    width: 26px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.prep-qlist-item.is-done .qnum {
    background: var(--brand-mint); border-color: var(--brand-mint); color: #111;
}
.prep-qlist-item.is-done .qnum::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .62rem; }
.prep-qlist-item.is-done .qnum span { display: none; }
.qflag { font-size: .65rem; color: var(--prep-amber); margin-left: .25rem; }

/* Main pane */
.prep-main  { padding: 2.25rem 2.5rem 4rem; min-width: 0; max-width: 100%; }
.prep-inner { max-width: var(--prep-read-max); margin: 0 auto; min-width: 0; }

.prep-crumb { font-size: .8rem; color: var(--ink-light); margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.prep-crumb a { color: var(--brand-blue); text-decoration: none; }
.prep-crumb a:hover { text-decoration: underline; }

.prep-h1 { font-size: 1.9rem; line-height: 1.3; color: var(--ink-dark); font-weight: 700 !important; margin-bottom: .6rem; overflow-wrap: break-word; }
.prep-intro { color: var(--ink-light); font-size: .98rem; line-height: 1.75; margin-bottom: 1.4rem; }

.prep-meta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-size: .82rem; color: var(--ink-light); margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.view-toggle {
    background: none; border: 1px solid var(--border-subtle); border-radius: 8px;
    padding: .4rem .85rem; font-size: .8rem; color: var(--ink-medium);
    cursor: pointer; transition: all .25s ease;
}
.view-toggle:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

/* Question panels — all present in the DOM, one visible at a time. */
.prep-question { display: none; min-width: 0; max-width: 100%; }
.prep-question.is-active { display: block; }
.prep-shell.show-all .prep-question { display: block; margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px dashed var(--border-subtle); }
.prep-shell.show-all .prep-qnav { display: none; }

.q-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.q-title { font-size: 1.5rem; line-height: 1.4; color: var(--ink-dark); font-weight: 700 !important; margin-bottom: 1.4rem; overflow-wrap: break-word; }

/* The quick answer block — this is the AEO payload. Make it look important. */
.quick-answer {
    background: linear-gradient(180deg, rgba(6,215,184,.07), rgba(6,215,184,.02));
    border: 1px solid rgba(6,215,184,.35);
    border-left: 4px solid var(--brand-mint);
    border-radius: 10px;
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.8rem;
}
.quick-answer .qa-label {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: #0a7d6c; font-weight: 700 !important; display: block; margin-bottom: .5rem;
}
.quick-answer p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--ink-dark); overflow-wrap: break-word; }

.prep-answer { font-size: 1rem; line-height: 1.85; color: var(--ink-medium); min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.prep-answer h2, .prep-answer h3, .prep-answer h4 { color: var(--ink-dark); font-weight: 700 !important; margin: 2rem 0 .8rem; line-height: 1.4; overflow-wrap: break-word; }
.prep-answer h3 { font-size: 1.15rem; }
.prep-answer p  { margin-bottom: 1.15rem; }
.prep-answer ul, .prep-answer ol { margin: 0 0 1.15rem 1.2rem; padding-left: 0; }
.prep-answer li { margin-bottom: .5rem; }

.prep-answer pre {
    background: #14181d; color: #e6edf3; border-radius: 10px;
    padding: 1.1rem 1.25rem; overflow-x: auto; font-size: .88rem; line-height: 1.65;
    margin-bottom: 1.3rem;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.prep-answer pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    background: none; color: inherit; padding: 0;
    white-space: pre;
}
.prep-answer :not(pre) > code {
    background: rgba(40,151,201,.09); color: #1a6f95; padding: .12rem .4rem;
    border-radius: 4px; font-size: .9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    overflow-wrap: anywhere;
}

.prep-answer table { width: 100%; border-collapse: collapse; margin-bottom: 1.3rem; font-size: .92rem; }
.prep-answer th, .prep-answer td { border: 1px solid var(--border-subtle); padding: .6rem .75rem; text-align: left; }
.prep-answer th { background: rgba(40,151,201,.06); font-weight: 700 !important; }
.prep-answer blockquote { border-left: 3px solid var(--brand-blue); padding-left: 1.1rem; color: var(--ink-light); margin: 0 0 1.3rem; }

.followups {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1.15rem 1.4rem;
    margin: 1.8rem 0;
}
.followups .fu-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prep-amber); font-weight: 700 !important; display: block; margin-bottom: .6rem; }
.followups ul { margin: 0 0 0 1.1rem; padding: 0; }
.followups li { font-size: .94rem; color: var(--ink-medium); margin-bottom: .35rem; overflow-wrap: break-word; }

.chapter-link-card {
    display: flex; align-items: center; gap: .9rem;
    background: rgba(40,151,201,.05);
    border: 1px solid rgba(40,151,201,.28);
    border-radius: 10px; padding: 1rem 1.25rem; margin: 1.8rem 0;
    text-decoration: none; transition: all .25s ease;
}
.chapter-link-card:hover { background: rgba(40,151,201,.1); transform: translateX(3px); }
.chapter-link-card i { color: var(--brand-blue); font-size: 1.1rem; flex-shrink: 0; }
.chapter-link-card > span { min-width: 0; }
.chapter-link-card .cl-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-light); font-weight: 700 !important; display: block; }
.chapter-link-card .cl-title { font-size: .98rem; color: var(--ink-dark); font-weight: 700 !important; overflow-wrap: break-word; }

/* Per-question actions */
.q-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 0; }
.q-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--border-subtle); background: var(--surface-card);
    border-radius: 8px; padding: .6rem 1.1rem; font-size: .88rem;
    color: var(--ink-medium); cursor: pointer; transition: all .25s ease;
}
.q-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.q-btn.is-on { background: var(--brand-mint); border-color: var(--brand-mint); color: #111; font-weight: 700 !important; }
.q-btn.bookmark.is-on { background: var(--prep-amber); border-color: var(--prep-amber); color: #fff; }

/* Prev / next */
.prep-qnav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--border-subtle); }
.qnav-btn { display: flex; flex-direction: column; padding: 1.15rem 1.3rem; border-radius: 10px; text-decoration: none; cursor: pointer; transition: all .3s ease; border: 1px solid var(--border-subtle); background: var(--surface-card); text-align: left; min-width: 0; }
.qnav-btn.next { text-align: right; border-color: var(--brand-mint); background: rgba(6,215,184,.05); }
.qnav-btn.prev { border-color: var(--prep-amber); background: rgba(242,145,17,.05); }
.qnav-btn:hover:not([disabled]) { transform: translateY(-2px); }
.qnav-btn[disabled] { opacity: .35; cursor: not-allowed; }
.qnav-dir { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-light); font-weight: 700 !important; margin-bottom: .35rem; }
.qnav-title { font-size: .92rem; color: var(--ink-dark); line-height: 1.4; overflow-wrap: break-word; }

/* Set completion + upsell */
.prep-finish {
    display: none;
    background: linear-gradient(135deg, rgba(6,215,184,.1), rgba(40,151,201,.06));
    border: 1px solid var(--brand-mint); border-radius: 14px;
    padding: 2rem; text-align: center; margin-top: 2.5rem;
}
.prep-finish.is-shown { display: block; }
.prep-upsell { border: 1px solid var(--border-subtle); border-radius: 14px; padding: 1.5rem; margin: 2.5rem 0 0; background: var(--surface-card); }
.prep-upsell .up-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--prep-amber); font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════ */
.prep-mobile-bar { display: none; }
.prep-drawer, .prep-drawer-backdrop { display: none; }

@media (max-width: 991px) {
    .prep-layout { grid-template-columns: minmax(0, 1fr); }
    .prep-sidebar { display: none; }
    .prep-main { padding: 1.5rem 1.15rem 6.5rem; }
    .prep-h1 { font-size: 1.5rem; }
    .q-title { font-size: 1.25rem; }
    .picker-shell { padding: 1.5rem 1.25rem; }
    .picker-lead { font-size: 1.12rem; }

    /* A border-collapse table sizes to its own min-content no matter how narrow
       the track is, so it needs its own scroll container here. display:block
       gives up column alignment across rows — the right trade when the
       alternative is a table wider than the phone. */
    .prep-answer table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .prep-answer pre { font-size: .82rem; padding: .9rem 1rem; }

    .prep-mobile-bar {
        display: flex; align-items: center; gap: .9rem;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
        background: var(--surface-card); border-top: 1px solid var(--border-subtle);
        padding: .7rem 1rem; box-shadow: 0 -4px 18px rgba(0,0,0,.06);
    }
    .mob-prog-wrap { flex: 1; min-width: 0; }
    .mob-prog-label { font-size: .72rem; color: var(--ink-light); margin-bottom: .3rem; }
    .mob-prog-bar { height: 4px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
    .mob-prog-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-mint), var(--brand-blue)); border-radius: 4px; transition: width .35s ease; }
    .mob-list-btn { background: var(--ink-dark); color: #fff; border: none; border-radius: 8px; padding: .6rem 1rem; font-size: .82rem; font-weight: 700 !important; flex-shrink: 0; }

    .prep-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 1100; }
    .prep-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
    .prep-drawer {
        display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1101;
        background: var(--surface-card); border-radius: 18px 18px 0 0;
        max-height: 82vh; overflow-y: auto; transform: translateY(100%);
        transition: transform .32s cubic-bezier(.16,1,.3,1);
    }
    .prep-drawer.is-open { transform: translateY(0); }
    .drawer-top { position: sticky; top: 0; background: var(--surface-card); padding: 1rem 1.15rem; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
    .drawer-top .dt-title { font-size: .95rem; font-weight: 700 !important; color: var(--ink-dark); min-width: 0; }
    .drawer-close { background: none; border: none; font-size: 1.2rem; color: var(--ink-light); flex-shrink: 0; }

    .prep-qnav { grid-template-columns: minmax(0, 1fr); }
    .qnav-btn.next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Keyboard accessibility — global.css strips outlines in places. */
.prep-chip:focus-visible,
.q-btn:focus-visible,
.qnav-btn:focus-visible,
.prep-qlist-item a:focus-visible,
.view-toggle:focus-visible {
    outline: 3px solid var(--brand-blue);
    outline-offset: 2px;
}