/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-eagn49o8zm] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

main[b-eagn49o8zm] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.top-row[b-eagn49o8zm] {
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
    justify-content: space-between;
    height: 4rem;
    display: flex;
    align-items: center;
}

    .top-row[b-eagn49o8zm]  .app-brand {
        display: inline-flex;
        align-items: center;
        margin-left: 0;
    }

    .top-row[b-eagn49o8zm]  .app-brand img {
        height: 34px;
        width: auto;
        display: block;
    }

    .top-row[b-eagn49o8zm]  .app-topnav {
        display: flex;
        align-items: center;
    }

    .top-row[b-eagn49o8zm]  a.active {
        color: #0c2448;
        font-weight: 700;
    }

    .top-row[b-eagn49o8zm]  a, .top-row[b-eagn49o8zm]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
        color: #475569;
        font-weight: 500;
    }

    .top-row[b-eagn49o8zm]  .app-topnav a:hover, .top-row[b-eagn49o8zm]  .btn-link:hover {
        color: #0a7e7e;
    }

@media (max-width: 640.98px) {
    .top-row[b-eagn49o8zm] {
        justify-content: space-between;
    }

    .top-row[b-eagn49o8zm]  a, .top-row[b-eagn49o8zm]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .top-row[b-eagn49o8zm] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-eagn49o8zm]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-eagn49o8zm], article[b-eagn49o8zm] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-eagn49o8zm] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-eagn49o8zm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-t0xfbdb2j1],
.components-reconnect-repeated-attempt-visible[b-t0xfbdb2j1],
.components-reconnect-failed-visible[b-t0xfbdb2j1],
.components-pause-visible[b-t0xfbdb2j1],
.components-resume-failed-visible[b-t0xfbdb2j1],
.components-rejoining-animation[b-t0xfbdb2j1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-retrying[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-failed[b-t0xfbdb2j1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-t0xfbdb2j1] {
    display: block;
}


#components-reconnect-modal[b-t0xfbdb2j1] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-t0xfbdb2j1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-t0xfbdb2j1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-t0xfbdb2j1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-t0xfbdb2j1]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-t0xfbdb2j1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-t0xfbdb2j1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-t0xfbdb2j1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-t0xfbdb2j1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-t0xfbdb2j1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-t0xfbdb2j1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-t0xfbdb2j1] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-t0xfbdb2j1] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-t0xfbdb2j1] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-t0xfbdb2j1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-t0xfbdb2j1] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-t0xfbdb2j1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-t0xfbdb2j1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-t0xfbdb2j1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AdminTraffic.razor.rz.scp.css */
/* The traffic page. Only what the shared styles do not already cover: the headline row, the two
   tally lists, and the funnel. The by-day chart reuses .db-trend from site.css. */

.tf-stats[b-r8zdx5bhg8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.tf-stat[b-r8zdx5bhg8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tf-stat strong[b-r8zdx5bhg8] {
    font-size: 2rem;
    line-height: 1.1;
    color: var(--navy-800);
    font-variant-numeric: tabular-nums;
}

/* Thirty bars carry no per-bar labels, so the chart needs a little more height to stay readable. */
.tf-trend[b-r8zdx5bhg8] {
    height: 110px;
    margin-top: 10px;
}

.tf-axis[b-r8zdx5bhg8] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--slate-500);
}

.tf-two[b-r8zdx5bhg8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* One page or one source: what it was, how many people, how many views. The count is last and
   right-aligned so the column of numbers reads down. */
.tf-tally[b-r8zdx5bhg8] {
    display: grid;
    grid-template-columns: 1fr auto 56px;
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--slate-100);
    font-size: 14px;
}

.tf-tally:last-child[b-r8zdx5bhg8] { border-bottom: none; }

.tf-tally code[b-r8zdx5bhg8] {
    font-size: 13px;
    color: var(--navy-800);
    overflow-wrap: anywhere;
}

.tf-tally .muted[b-r8zdx5bhg8] {
    font-size: 12px;
    color: var(--slate-500);
    white-space: nowrap;
}

.tf-tally strong[b-r8zdx5bhg8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--navy-800);
}

.tf-funnel[b-r8zdx5bhg8] {
    display: grid;
    grid-template-columns: 170px 1fr 64px;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
    font-size: 14px;
}

.tf-funnel-label[b-r8zdx5bhg8] { color: var(--slate-600); }

.tf-funnel-track[b-r8zdx5bhg8] {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--slate-100);
    overflow: hidden;
}

.tf-funnel-fill[b-r8zdx5bhg8] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--teal-700);
    /* A step nobody reached still shows its track, so the drop-off is visible as an empty bar
       rather than as a missing row. */
    min-width: 0;
}

.tf-funnel-num[b-r8zdx5bhg8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--navy-800);
}

@media (max-width: 860px) {
    .tf-stats[b-r8zdx5bhg8], .tf-two[b-r8zdx5bhg8] { grid-template-columns: 1fr; }
    .tf-funnel[b-r8zdx5bhg8] { grid-template-columns: 120px 1fr 52px; }
}
/* /Components/Pages/ExamSpecs.razor.rz.scp.css */
.exam-specs-page[b-vl06k06ypm] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: calc(100vh - 7rem);
}

.exam-specs-header[b-vl06k06ypm] {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.exam-specs-header h1[b-vl06k06ypm] {
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
}

.exam-specs-header p[b-vl06k06ypm] {
    color: #536070;
    margin: 8px 0 0;
}

.exam-specs-count[b-vl06k06ypm] {
    align-items: baseline;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    white-space: nowrap;
}

.exam-specs-count strong[b-vl06k06ypm] {
    color: #0f172a;
    font-size: 1.2rem;
}

.exam-specs-count span[b-vl06k06ypm] {
    color: #64748b;
    font-size: 0.82rem;
    margin-right: 6px;
}

.exam-specs-filters[b-vl06k06ypm] {
    align-items: end;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(140px, 0.8fr) minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(260px, 2fr) auto;
    padding: 14px;
}

.exam-specs-filters label[b-vl06k06ypm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.exam-specs-filters span[b-vl06k06ypm] {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.exam-specs-filters select[b-vl06k06ypm],
.exam-specs-filters input[b-vl06k06ypm] {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #0f172a;
    font: inherit;
    min-height: 40px;
    min-width: 0;
    padding: 8px 10px;
}

.clear-filters[b-vl06k06ypm] {
    background: #0f172a;
    border: 0;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    min-height: 40px;
    padding: 0 16px;
}

.clear-filters:hover[b-vl06k06ypm] {
    background: #1e293b;
}

.exam-specs-table-wrap[b-vl06k06ypm] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    flex: 1;
    overflow: auto;
}

.exam-specs-table[b-vl06k06ypm] {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1180px;
    width: 100%;
}

.exam-specs-table th[b-vl06k06ypm] {
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    padding: 11px 12px;
    position: sticky;
    text-align: left;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

.exam-specs-table td[b-vl06k06ypm] {
    border-bottom: 1px solid #e2e8f0;
    color: #172033;
    padding: 12px;
    vertical-align: top;
}

.exam-specs-table tr:hover td[b-vl06k06ypm] {
    background: rgba(241, 245, 249, 0.72);
}

.template-title[b-vl06k06ypm] {
    font-weight: 700;
}

.template-file[b-vl06k06ypm],
.section-title[b-vl06k06ypm],
.subcategory[b-vl06k06ypm],
.question-text[b-vl06k06ypm] {
    color: #64748b;
    font-size: 0.84rem;
}

.question-text[b-vl06k06ypm] {
    line-height: 1.35;
    margin-top: 7px;
    max-width: 520px;
}

.section-code[b-vl06k06ypm] {
    color: #0f172a;
    font-family: 'Roboto Mono', 'Consolas', monospace;
    font-weight: 700;
}

.exam-chip[b-vl06k06ypm],
.fit-chip[b-vl06k06ypm],
.subtopic-list span[b-vl06k06ypm] {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.exam-chip[b-vl06k06ypm] {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 5px 8px;
}

.fit-chip[b-vl06k06ypm] {
    background: #fef3c7;
    color: #78350f;
    padding: 5px 8px;
    text-transform: capitalize;
}

.subtopic-list[b-vl06k06ypm] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 360px;
}

.subtopic-list span[b-vl06k06ypm] {
    background: #ecfdf5;
    color: #065f46;
    padding: 4px 7px;
}

.exam-specs-table code[b-vl06k06ypm] {
    color: #334155;
    font-size: 0.78rem;
    white-space: normal;
}

.empty-state[b-vl06k06ypm] {
    color: #64748b;
    padding: 22px;
}

@media (max-width: 1100px) {
    .exam-specs-header[b-vl06k06ypm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .exam-specs-filters[b-vl06k06ypm] {
        grid-template-columns: 1fr 1fr;
    }

    .search-filter[b-vl06k06ypm],
    .clear-filters[b-vl06k06ypm] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .exam-specs-filters[b-vl06k06ypm] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/SatTemplates.razor.rz.scp.css */
/* SAT-specific bits only. Layout classes (app-shell, template-panel, result-section,
   prompt, answer-list, solution-steps, admin-gate) come from the global site.css/app.css
   so this page matches the PE template browser. */

.sat-group[b-pvacgub24m] {
    margin-bottom: 18px;
}

.sat-group-header[b-pvacgub24m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    padding: 6px 4px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
}

.sat-group-count[b-pvacgub24m] {
    font-weight: 600;
    color: #94a3b8;
}

.sat-badges[b-pvacgub24m] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 5px;
}

.sat-badge[b-pvacgub24m] {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}

.sat-badge-easy[b-pvacgub24m] { background: #dcfce7; color: #166534; }
.sat-badge-medium[b-pvacgub24m] { background: #fef3c7; color: #92400e; }
.sat-badge-hard[b-pvacgub24m] { background: #fee2e2; color: #991b1b; }
.sat-badge-type[b-pvacgub24m] { background: #e0e7ff; color: #3730a3; }
.sat-badge-review[b-pvacgub24m] { background: #fef2f2; color: #b91c1c; }
.sat-badge-ok[b-pvacgub24m] { background: #dcfce7; color: #166534; }

.sat-seed-row[b-pvacgub24m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 2px;
}

.sat-placeholder[b-pvacgub24m] {
    display: grid;
    place-items: center;
    min-height: 60vh;
    text-align: center;
    color: #64748b;
    padding: 40px;
}

.sat-placeholder h2[b-pvacgub24m] {
    margin-bottom: 8px;
    color: #334155;
}

.sat-placeholder p[b-pvacgub24m] {
    max-width: 420px;
}

.sat-empty[b-pvacgub24m] {
    padding: 24px 8px;
    color: #94a3b8;
    font-style: italic;
}

/* Grid-in entry, styled after the digital SAT's numeric response box. */
.sat-grid-in[b-pvacgub24m] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sat-grid-input[b-pvacgub24m] {
    width: 180px;
    padding: 10px 14px;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.sat-grid-answer[b-pvacgub24m] {
    font-weight: 700;
    color: #166534;
}

.sat-grid-check[b-pvacgub24m] {
    font-weight: 600;
    color: #475569;
}

.answer-item.sat-correct[b-pvacgub24m] {
    border-color: #16a34a;
    background: #f0fdf4;
}

.sat-correct-tag[b-pvacgub24m] {
    margin-left: 10px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #166534;
}

.sat-meta[b-pvacgub24m] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 16px;
    margin: 0;
}

.sat-meta dt[b-pvacgub24m] {
    font-weight: 700;
    color: #64748b;
    font-size: .82rem;
}

.sat-meta dd[b-pvacgub24m] {
    margin: 0;
}

.sat-tag[b-pvacgub24m] {
    display: inline-block;
    background: #f1f5f9;
    color: #475569;
    font-size: .74rem;
    padding: 2px 9px;
    border-radius: 999px;
    margin: 0 5px 5px 0;
}

.sat-question-text[b-pvacgub24m] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: .88rem;
    line-height: 1.5;
}

/* Generated figures. The SVG inherits currentColor for axes and labels, so it needs a
   text color that reads on the panel in both themes. */
.sat-figure[b-pvacgub24m] {
    margin: 16px 0 0;
    padding: 0;
    flex: 0 0 auto;
    /* The app is single-theme light, so the SVG's currentColor comes from here. */
    color: #334155;
}

/* ::deep, because the SVG arrives as raw markup and never gets this file's scope attribute.
   Without it the rule matches nothing and the figure collapses to zero width. */
.sat-figure[b-pvacgub24m]  svg {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Review controls. Deliberately quieter than the question itself — this is the
   reviewer's workspace, not part of the item. */
.sat-review[b-pvacgub24m] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sat-review-check[b-pvacgub24m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
}

.sat-review-check input[b-pvacgub24m] { width: 16px; height: 16px; cursor: pointer; }

.sat-review-label[b-pvacgub24m] {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 4px;
}

.sat-review-input[b-pvacgub24m] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: inherit;
    font-size: .88rem;
    resize: vertical;
    background: #fff;
    color: #0f172a;
}

.sat-review-input:focus-visible[b-pvacgub24m] { outline: 2px solid #17a3a2; outline-offset: 1px; }

.sat-review-actions[b-pvacgub24m] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sat-review-save[b-pvacgub24m],
.sat-review-clear[b-pvacgub24m] {
    border-radius: 7px;
    padding: 6px 14px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.sat-review-save[b-pvacgub24m] { background: #142c50; color: #fff; }
.sat-review-save:hover[b-pvacgub24m] { background: #1d3d6b; }
.sat-review-clear[b-pvacgub24m] { background: #fff; color: #475569; border-color: #cbd5e1; }
.sat-review-clear:disabled[b-pvacgub24m] { opacity: .5; cursor: not-allowed; }

.sat-review-message[b-pvacgub24m] { font-size: .82rem; font-weight: 600; color: #166534; }

.sat-review-hint[b-pvacgub24m] { margin: 2px 0 0; font-size: .78rem; color: #64748b; line-height: 1.45; }

.sat-badge-error[b-pvacgub24m] { background: #fee2e2; color: #991b1b; }

/* Concept explainer link, inline inside a solution step. Looks like a link, not a button,
   because it interrupts a sentence. */
.sat-concept-link[b-pvacgub24m] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #0f766e;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

.sat-concept-link:hover[b-pvacgub24m] { color: #115e59; text-decoration-style: solid; }
.sat-concept-link:focus-visible[b-pvacgub24m] { outline: 2px solid #17a3a2; outline-offset: 2px; border-radius: 3px; }

.prompt-strong[b-pvacgub24m] { font-weight: 700; }
.prompt-em[b-pvacgub24m] { font-style: italic; }

/* Fixed to the viewport, not absolute in the panel: the page scrolls as a whole now that it has no
   100vh shell, so an absolute backdrop would stretch to the panel's full height and the modal with
   it, and the student would scroll the page to reach the bottom of the explainer. */
.sat-concept-backdrop[b-pvacgub24m] {
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 30, .45);
    display: grid;
    place-items: center;
    padding: 28px;
    z-index: 50;
}

.sat-concept-modal[b-pvacgub24m] {
    background: #fff;
    color: #0f172a;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(12, 13, 20, .4);
    width: min(680px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sat-concept-header[b-pvacgub24m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.sat-concept-header h3[b-pvacgub24m] { margin: 0; font-size: 1.05rem; line-height: 1.35; }

.sat-concept-close[b-pvacgub24m] {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}

.sat-concept-close:hover[b-pvacgub24m] { background: #f1f5f9; color: #0f172a; }

.sat-concept-body[b-pvacgub24m] {
    padding: 18px 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.6;
}

/* A clip sits above the text at the modal's width; the 16:9 box keeps the layout still before metadata
   arrives. flex: none matters: the body is a column flexbox that scrolls, and a flex item with
   overflow hidden has min-height 0, so without it the figure shrinks to nothing and clips the player. */
.sat-concept-video[b-pvacgub24m] { flex: none; margin: 0 0 6px; background: #0f172a; border-radius: 12px; overflow: hidden; }
.sat-concept-video video[b-pvacgub24m] { display: block; width: 100%; aspect-ratio: 16 / 9; }
.sat-concept-video figcaption[b-pvacgub24m] { color: #475569; font-size: 0.88rem; padding: 8px 12px; background: #f8fafc; }

/* Each part is its own block so the explainer reads as paragraphs rather than a wall. */
.sat-concept-body .prompt-text[b-pvacgub24m] { display: block; }
.sat-concept-body .prompt-strong[b-pvacgub24m] { margin-top: 8px; font-size: 1rem; }
.sat-concept-body .prompt-block[b-pvacgub24m] { margin: 2px 0; }

/* "Fixed, pending review" — a reported problem that has been addressed but not confirmed. */
.sat-badge-fixed[b-pvacgub24m] { background: #dbeafe; color: #1e40af; }

.sat-review-fixed[b-pvacgub24m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: .86rem;
    color: #1e3a5f;
}

.sat-review-fixed strong[b-pvacgub24m] { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: #1e40af; }
.sat-review-fixed em[b-pvacgub24m] { font-style: normal; color: #475569; font-size: .82rem; }

/* ---------------------------------------------------------------------------
   Review by category.

   Nearly 800 templates all start unreviewed, so the question on opening this
   page is which category still needs work rather than which template. The
   sidebar nests domain > skill and both carry a progress bar; the panel that
   used to say "pick a template" is now the same breakdown, laid out to be
   read and clicked.

   One bar, three colors, in the order a reviewer meets them: reviewed, flagged,
   fixed-and-waiting. Whatever is left of the bar is untouched, which is why
   there is no fourth segment - the gap is the work.
   --------------------------------------------------------------------------- */

.sat-group-header[b-pvacgub24m],
.cat-skill-header[b-pvacgub24m] {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    gap: 8px;
}

.sat-group-header:hover[b-pvacgub24m],
.cat-skill-header:hover[b-pvacgub24m] {
    color: #0f7c73;
}

.cat-skill-header[b-pvacgub24m] {
    display: flex;
    align-items: center;
    font-size: .74rem;
    font-weight: 600;
    color: #475569;
    padding: 5px 4px 5px 14px;
}

.cat-caret[b-pvacgub24m] {
    display: inline-block;
    transition: transform .12s ease;
    font-size: .6rem;
    color: #94a3b8;
    flex: 0 0 auto;
}

.cat-caret.open[b-pvacgub24m] { transform: rotate(90deg); }

/* The bar takes the slack so the counts on either side stay put as names vary. */
.cat-bar[b-pvacgub24m] {
    display: flex;
    flex: 1 1 auto;
    min-width: 34px;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
    margin-left: auto;
}

.cat-bar.wide[b-pvacgub24m] { min-width: 90px; }

.cat-seg[b-pvacgub24m] { display: block; height: 100%; }
.cat-seg.ok[b-pvacgub24m]  { background: #0f7c73; }
.cat-seg.err[b-pvacgub24m] { background: #c2410c; }
.cat-seg.fix[b-pvacgub24m] { background: #f4a83a; }

/* The chip that says the list is narrowed to one skill, and clears it. */
/* Stacked, not a row: a skill name can run to sixty characters, and side by side that squeezed
   the action into a three-word column down the right-hand edge. */
.cat-clear[b-pvacgub24m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid #cfe9e5;
    border-radius: 8px;
    background: #e8f2f1;
    color: #0b5f58;
    font: 600 .78rem/1.3 inherit;
    text-align: left;
    cursor: pointer;
}

.cat-clear span[b-pvacgub24m] {
    font-weight: 500;
    font-size: .72rem;
    color: #0f7c73;
    opacity: .85;
}

.cat-clear:hover[b-pvacgub24m] { background: #cfe9e5; }

/* ---- the overview panel ---- */

.cat-overview[b-pvacgub24m] {
    padding: 28px 32px 40px;
    max-width: 780px;
}

.cat-overview-head[b-pvacgub24m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.cat-overview-head h2[b-pvacgub24m] {
    margin: 0 0 4px;
    font-size: 1.35rem;
    color: #0e1a20;
}

.cat-overview-head p[b-pvacgub24m] {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}

.cat-total[b-pvacgub24m] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
}

.cat-total strong[b-pvacgub24m] {
    font-size: 1.5rem;
    color: #0e1a20;
    font-variant-numeric: tabular-nums;
}

.cat-total span[b-pvacgub24m] {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
}

.cat-section[b-pvacgub24m] {
    margin: 22px 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.cat-domain[b-pvacgub24m] {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
}

.cat-domain-name[b-pvacgub24m] {
    display: flex;
    justify-content: space-between;
    font-size: .84rem;
    font-weight: 700;
    color: #0e1a20;
    margin-bottom: 6px;
}

.cat-domain-name span[b-pvacgub24m] {
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.cat-row[b-pvacgub24m] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 6px;
    border: none;
    border-radius: 7px;
    background: none;
    cursor: pointer;
    font: 500 .82rem/1.3 inherit;
    color: #334155;
    text-align: left;
}

.cat-row:hover[b-pvacgub24m] { background: #f1f5f9; }

.cat-row-name[b-pvacgub24m] { flex: 0 0 auto; min-width: 190px; }

.cat-row-num[b-pvacgub24m] {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    min-width: 52px;
    text-align: right;
}

.cat-row-flag[b-pvacgub24m] {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: #c2410c;
}

/* Plug-in shortcut count per skill: identity and backsolve forms, capped per test rather than removed. */
.cat-row-form[b-pvacgub24m] {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    color: #7c3aed;
}

.sat-review-form[b-pvacgub24m] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    color: #0f172a;
}

@media (max-width: 900px) {
    .cat-row-name[b-pvacgub24m] { min-width: 120px; }
    .cat-overview[b-pvacgub24m] { padding: 20px 16px 32px; }
}