/*
 * MHT-CET mock tests (pages/mht-cet-mock-test.php). Loaded AFTER assets/css/aibe-practice.css,
 * whose test-series and exam-screen styles these pages share; this sheet adds only what the
 * MHT-CET flow has and AIBE does not: two timed sections, subject badges, maths, a solution
 * under every answer, the review colours, and the mock list. Same palette as the AIBE sheet.
 */

.cet-hub [hidden] {
    display: none !important;
}

/* ------------------------------------------------------------ test-series page */
/* The AIBE hero keeps a first column for the exam's logo. There is no logo here (the CET
   Cell's own emblem is not ours to use), so the heading takes the whole width. */
.cet-hub .tsx-hero {
    grid-template-columns: minmax(0, 1fr);
}

.cet-hub .tsx-chips {
    grid-column: 1 / -1;
}

/* A grid column grows to its widest child's minimum width, and the pattern table's is wider
   than a phone. These let the column stay at the screen's width; the table scrolls in its box. */
.cet-hub .tsx-main,
.cet-hub .tsx-main > section {
    min-width: 0;
}

@media (max-width: 600px) {
    .cet-table {
        font-size: 13px;
        min-width: 0;
    }

    .cet-table th,
    .cet-table td {
        padding: 8px 5px;
    }
}

.cet-section-lede {
    color: #3f5170;
    font-size: 15px;
    line-height: 1.55;
    margin: 6px 0 14px;
}

.cet-mocks,
.cet-pattern {
    padding: 20px;
}

.cet-mocks h2,
.cet-pattern h2 {
    font-size: 22px;
    margin: 0;
}

.cet-mock-list {
    display: grid;
    gap: 10px;
}

.cet-mock {
    align-items: center;
    border: 1px solid #d9e3ee;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 16px;
}

.cet-mock.is-next {
    background: #f8fafd;
    border-style: dashed;
}

.cet-mock-name h3 {
    font-size: 17px;
    margin: 0 0 4px;
}

.cet-mock-name h3 a {
    color: #0d1526;
    text-decoration: none;
}

.cet-mock-name h3 a:hover,
.cet-mock-name h3 a:focus-visible {
    color: #1d50ca;
    text-decoration: underline;
}

.cet-mock-meta,
.cet-mock-mine {
    color: #3f5170;
    font-size: 14px;
    margin: 0;
}

.cet-mock-mine strong {
    color: #166534;
}

.cet-mock-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cet-table-wrap {
    margin: 14px 0;
    overflow-x: auto;
}

.cet-table {
    border-collapse: collapse;
    font-size: 15px;
    min-width: 440px;
    width: 100%;
}

.cet-table th,
.cet-table td {
    border-bottom: 1px solid #dce6f5;
    padding: 10px 8px;
    text-align: left;
}

.cet-table thead th {
    background: #f0f5ff;
    color: #123178;
    font-size: 13px;
}

.cet-facts {
    color: #22314d;
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 12px;
    padding-left: 20px;
}

.cet-facts li + li {
    margin-top: 6px;
}

/* ------------------------------------------------------------ exam screen */
.cet-section-tabs {
    background: #ffffff;
    border-bottom: 1px solid #dce6f5;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 16px;
}

.cet-section-tab {
    border: 1px solid #dce6f5;
    border-radius: 999px;
    color: #3f5170;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    white-space: nowrap;
}

.cet-section-tab em {
    color: #6b7c99;
    font-style: normal;
    font-weight: 500;
    margin-left: 4px;
}

.cet-section-tab.is-current {
    background: #1d50ca;
    border-color: #1d50ca;
    color: #ffffff;
}

.cet-section-tab.is-current em {
    color: #dbe7ff;
}

.cet-section-tab.is-done {
    background: #f1f5f9;
    color: #6b7c99;
    text-decoration: line-through;
}

.cet-section-tab.is-waiting {
    border-style: dashed;
}

@media (max-width: 600px) {
    .cet-section-tabs {
        padding: 6px 12px;
    }

    .cet-section-tab {
        font-size: 12px;
        padding: 5px 10px;
    }

    .cet-section-tab em {
        display: none;
    }
}

.cet-subject-badge {
    background: #e8f0fe;
    border-radius: 999px;
    color: #123178;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
}

.cet-stem {
    white-space: pre-line;
}

.cet-cbt [data-cet-timer].is-low {
    color: #b42318;
}

.cet-cbt .aibe-option .katex,
.cet-stem .katex,
.cet-solution-text .katex {
    font-size: 1.05em;
}

.cet-cbt .aibe-option strong {
    overflow-x: auto;
}

/* KaTeX draws a formula out of nested spans, and three AIBE rules style EVERY span inside an
   option as a round letter badge (.aibe-option span, .aibe-option.is-selected span,
   .aibe-read-options span), which breaks a formula into a row of badges. These undo those
   properties inside the option text, one class and two elements deep: above the AIBE rules,
   below KaTeX's own two-class rules, so KaTeX still decides how a formula is laid out. */
.aibe-option strong span,
.aibe-read-options div span {
    align-items: normal;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    display: inline;
    flex: initial;
    font-size: inherit;
    font-weight: inherit;
    height: auto;
    justify-content: normal;
    padding: 0;
    width: auto;
}

.aibe-option.is-selected strong span {
    background: transparent;
    border-color: transparent;
    color: inherit;
}

.aibe-option strong .katex,
.aibe-read-options div .katex {
    font-size: 1.1em;
    font-weight: normal;
}

.cet-opt-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* A formula does not wrap like words do. If one is wider than a phone, the question or option
   box scrolls sideways instead of widening the whole page. The box, not each formula: a formula
   box would clip the few pixels a subscript hangs past its edge. Long reactions are written on
   two lines in the mock sources, so this is a fallback. */
.cet-stem,
.cet-opt-text {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
}

.cet-review-banner {
    background: #f0f5ff;
    border: 1px solid #c7d9fc;
    border-radius: 10px;
    color: #123178;
    display: grid;
    font-size: 14px;
    gap: 2px;
    margin-bottom: 12px;
    padding: 10px 14px;
}

.cet-solution {
    background: #f8fafd;
    border: 1px solid #dce6f5;
    border-radius: 10px;
    margin-top: 16px;
    padding: 14px 16px;
}

.cet-solution h3 {
    color: #123178;
    font-size: 15px;
    margin: 10px 0 6px;
}

.cet-solution-verdict {
    font-weight: 700;
    margin: 0;
}

.cet-solution-verdict.is-correct {
    color: #166534;
}

.cet-solution-verdict.is-wrong {
    color: #b42318;
}

.cet-solution-verdict.is-unanswered {
    color: #3f5170;
}

.cet-solution-text {
    color: #22314d;
    font-size: 15px;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre-line;
}

.aibe-cbt .aibe-cbt-grid .aibe-palette-cell.cet-correct,
.aibe-cbt-chip.cet-chip-correct {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
}

.aibe-cbt .aibe-cbt-grid .aibe-palette-cell.cet-wrong,
.aibe-cbt-chip.cet-chip-wrong {
    background: #fee4e2;
    border-color: #d92d20;
    color: #b42318;
}

.cet-result-subjects {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

.cet-result-subjects p {
    border-bottom: 1px solid #e5ecf6;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 6px 0;
}

.cet-rank-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.cet-rank-list li {
    border-bottom: 1px solid #e5ecf6;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    padding: 6px 0;
}

.cet-rank-list li.is-you {
    color: #1d50ca;
    font-weight: 700;
}

.cet-share {
    margin-top: 14px;
}

.cet-share-button {
    align-items: center;
    background: #15803d;
    border: 1px solid #15803d;
    border-radius: 8px;
    box-sizing: border-box;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 850;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    text-decoration: none;
    width: 100%;
}

.cet-share-button:hover,
.cet-share-button:focus-visible {
    background: #116932;
    border-color: #116932;
    color: #ffffff;
}

.cet-share-button .fa-whatsapp {
    font-size: 1.15rem;
}

.cet-share p {
    color: #475569;
    font-size: 13px;
    margin: 6px 0 0;
}

.cet-submit-error {
    background: #fee4e2;
    border-radius: 8px;
    color: #b42318;
    font-size: 14px;
    padding: 8px 12px;
}

.cet-toast {
    background: #0b1d4e;
    border-radius: 10px;
    bottom: 84px;
    color: #ffffff;
    font-size: 14px;
    left: 50%;
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 60;
}

.aibe-paywall-primary.is-off {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ------------------------------------------------------------ printed questions */
.cet-read-subject {
    color: #123178;
    font-size: 19px;
    margin: 26px 0 8px;
}

/* The question and option lists are grids, and a grid item is never narrower than its widest
   formula unless told otherwise. */
.cet-read .aibe-read-questions > li,
.cet-read .aibe-read-options > li {
    min-width: 0;
}