/* Scoped reset for <test> so page-wide CSS doesn't leak into tests */

test {
    /* Contain wide DB tables; cap width on huge screens (copy-fitted exercise HTML) */
    max-width: min(var(--exercise-content-max-width, 1800px), 100%);
    margin: 12px auto 28px;
    /* Horizontal inset comes from main --exercise-inline-gutter on exercise pages */
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    font-family: var(--ff1, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--tx, 1.125rem);
    line-height: var(--esp, 130%);
    color: var(--darkgray, #323232);
    box-sizing: border-box;
}

/* Phones/tablets: full width; gutters from main fluid clamp (incl. landscape >768px) */
@media (max-width: 1024px), ((hover: none) and (pointer: coarse)) {
    test {
        margin: 6px 0 16px;
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    test {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    test form {
        max-width: 100% !important;
        width: 100% !important;
    }

    /*
     * Outer layout table only (wraps #question + side help), not tables inside DB HTML.
     */
    test table:has(#question),
    test table:has(.exercise-db-html),
    test table:has(#suggestions) {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    test table:has(#question) tbody,
    test table:has(#question) tr,
    test table:has(.exercise-db-html) tbody,
    test table:has(.exercise-db-html) tr,
    test table:has(#suggestions) tbody,
    test table:has(#suggestions) tr {
        display: block !important;
        width: 100% !important;
    }

    test table:has(#question) > tbody > tr > td,
    test table:has(.exercise-db-html) > tbody > tr > td,
    test table:has(#suggestions) > tbody > tr > td,
    test table:has(#question) td,
    test table:has(.exercise-db-html) td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Undo shell-table first-column squeeze (legacy rule targeted outer table) */
    test table:has(#question) > tbody > tr > td:first-child,
    test table:has(#suggestions) > tbody > tr > td:first-child {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * DB HTML tables (passage | questions, etc.) and help/passage (#suggestions):
     * stack cells vertically on narrow screens so the right column is not off-screen.
     * (Separate from CHANGE-2026-Q1-QUESTION-TABLE-WIDTH — mobile stacking only.)
     */
    test #question table,
    test .exercise-db-html table,
    test #suggestions table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
    }

    test #question table tbody,
    test #question table tr,
    test .exercise-db-html table tbody,
    test .exercise-db-html table tr,
    test #suggestions table tbody,
    test #suggestions table tr {
        display: block !important;
        width: 100% !important;
    }

    test #question table td,
    test .exercise-db-html table td,
    test #suggestions table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.35rem 0.4rem !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    test #question table,
    test .exercise-db-html table,
    test #suggestions table {
        min-width: 0 !important;
    }

    test #question img,
    test .exercise-db-html img,
    test #question table td img,
    test #suggestions img,
    test #suggestions table td img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }

    /* Legacy help HTML: image+passage tables — center cover, drop side-by-side padding */
    test #suggestions table td:first-child:has(img) {
        text-align: center !important;
        padding-right: 0 !important;
        margin-bottom: 0.35rem !important;
    }

    test #suggestions table td:first-child:has(img) img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: min(100%, 14rem) !important;
    }

    test video,
    test iframe,
    test embed,
    test object,
    test #question video,
    test #question iframe,
    test .exercise-db-html video,
    test .exercise-db-html iframe,
    test #suggestions video,
    test #suggestions iframe {
        max-width: 100% !important;
        max-height: min(100vh, 100dvh) !important;
    }

    test iframe,
    test embed,
    test object,
    test #question iframe,
    test .exercise-db-html iframe,
    test #suggestions iframe {
        width: 100% !important;
        height: auto !important;
    }

    test #question table td *,
    test .exercise-db-html table td *,
    test #suggestions table td * {
        max-width: 100%;
        box-sizing: border-box;
    }

    test td {
        max-width: 100% !important;
    }

    test .test-shadow-inner,
    test #question,
    test .exercise-db-html,
    test #suggestions {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    test #suggestions {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Gap-fill dropdowns: tighter vertical padding on narrow screens */
    test select,
    test #question select,
    test .exercise-db-html select {
        padding: 0.12rem 0.4rem !important;
        line-height: 1.25 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}

/*
 * Outer <test class="test-content"> picks up generalphp padding-top; keep it shallow.
 * Inner .test-shadow-shell is the shadow host — strip duplicate top gap (see below).
 */
test.test-content {
    padding-top: 0.35rem;
}

/* Inner shadow host: document path */
test .test-shadow-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Same host when scoped into shadow (:host has .test-shadow-shell) */
test.test-shadow-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
    max-width: min(var(--exercise-content-max-width, 1800px), 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/*
 * Isolation is from Shadow DOM (jscripts/test-shadow-root.js); we do not use a
 * universal `all: unset` here so UA defaults (block headings, table layout, …)
 * stay intact. Keep only rules that encode the exercise design.
 */

test img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Embedded media (HTML5 video, YouTube iframe, etc.): fit within viewport */
test video,
test iframe,
test embed,
test object {
    display: block !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    max-height: min(100vh, 100dvh) !important;
    border: 0;
}

test video {
    width: auto !important;
    height: auto !important;
}

test iframe,
test embed,
test object {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

test button,
test input,
test select,
test .botaowhite,
test .botaored {
    display: inline-block !important;
    margin: 0 !important;
}

/* Tables: display:table; width set per context (shell vs DB HTML — see CHANGE-2026-Q1) */
test table {
    display: table !important;
    table-layout: auto !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    box-sizing: border-box !important;
}

/* Outer layout table only (wraps #question + side help) */
test table:has(#question),
test table:has(.exercise-db-html) {
    width: 100% !important;
    table-layout: fixed !important;
}

/*
 * CHANGE-2026-Q1-QUESTION-TABLE-WIDTH — BEGIN (shadow DOM; pairs with generalphp.css)
 * DB HTML tables in #question, .exercise-db-html, and #suggestions (help): size to content.
 * Desktop only — mobile stacking overrides come from @media (max-width: 768px) above.
 * Revert: delete this block + shell rule above; restore test table { width:100% !important }.
 */
@media (min-width: 769px) {
    test #question table,
    test .exercise-db-html table,
    test #suggestions table {
        display: table !important;
        width: max-content !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    test #question table td,
    test .exercise-db-html table td,
    test #suggestions table td {
        display: table-cell !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* CHANGE-2026-Q1-QUESTION-TABLE-WIDTH-REVERT (previous behaviour)
test table {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
    max-width: 100% !important;
    border-collapse: separate !important;
}
@media (min-width: 769px) {
    test #question table,
    test .exercise-db-html table {
        width: max-content !important;
        min-width: fit-content !important;
        max-width: none !important;
        table-layout: auto !important;
    }
}
*/
/* CHANGE-2026-Q1-QUESTION-TABLE-WIDTH — END */

/*
 * DB question HTML + shadow inner: scroll wrappers (overflow on <table> is unreliable).
 * Wide tables keep natural width inside a swipeable strip.
 */
test .test-shadow-inner,
test #question,
test .exercise-db-html,
test #suggestions {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
}

/* Typography (scoped from general.css) */
test h1 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw1) !important;
    /* --maior is page-hero scale; in exercises use title scale instead */
    font-size: var(--titulo) !important;
    line-height: var(--esp) !important;
    color: var(--black) !important;
}

/* Reading/passage wrapper in DB HTML: h1 should read like a section line, not a hero */
test text h1,
text h1 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw2) !important;
    font-size: var(--subtitulo) !important;
    line-height: var(--esp) !important;
    color: var(--black) !important;
}

/* Vocabulary / answer-bank box (legacy <div id="wordlist"> in help HTML) */
test #wordlist {
    background-color: var(--lightyellow) !important;
    margin: 0.75rem 0 1rem 0 !important;
    padding: 0.65rem 0.85rem 0.85rem !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

test #wordlist h1 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw1) !important;
    font-size: var(--pequeno) !important;
    line-height: var(--esp) !important;
    color: var(--red) !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
}

test #wordlist img {
    max-width: 100% !important;
    height: auto !important;
}

test h2 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw1) !important;
    font-size: var(--titulo) !important;
    color: var(--black) !important;
    line-height: var(--esp) !important;
}

test h3 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw1) !important;
    font-size: var(--subtitulo) !important;
    color: var(--black) !important;
    line-height: var(--esp) !important;
}

test h4 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw2) !important;
    font-size: var(--subtitulo) !important;
    color: var(--black) !important;
    line-height: var(--esp) !important;
}

test h5 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--botnav) !important;
    color: var(--black) !important;
    line-height: var(--esp) !important;
}

test h6 {
    font-family: var(--ff1) !important;
    font-weight: var(--fw4) !important;
    font-size: var(--botnav) !important;
    color: var(--black) !important;
    line-height: var(--esp) !important;
}

test p {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    line-height: var(--esp) !important;
    margin: 0 0 0.9rem 0 !important;
}

/* Empty paragraphs (e.g. from Word paste) collapse without inline content — keep a visible line gap */
test p:empty,
test p:has(> br:only-child) {
    min-height: 1.3em;
    margin-bottom: 1.15rem !important;
}

test ul,
test ol {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    line-height: var(--esp) !important;
    color: var(--lightgray) !important;
    margin: 0.25em 0 !important;
    padding: 0 0 0 1.5em !important;
    list-style-position: outside !important;
}

test li {
    margin: 0.2em 0 !important;
    padding-left: 0.35em !important;
}

test dt,
test dd {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    line-height: var(--esp) !important;
    color: var(--lightgray) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Links */
test a {
    color: var(--red) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: var(--fw3) !important;
    cursor: pointer !important;
}

/* Emphasis */
test strong,
test b {
    font-family: var(--ff1) !important;
    font-weight: var(--fw1) !important;
}

test em,
test i {
    font-family: var(--ff1) !important;
    font-style: italic !important;
}

/* Forms + controls (scoped from general.css) */
test form {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    color: var(--lightgray) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    text-align: left !important;
}

/* Textareas: full width; selects: compact like gap-fill inputs */
test textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0.65rem 0.75rem !important;
    border: 1px solid var(--lightgray) !important;
    border-radius: 6px !important;
    font-family: var(--ff1) !important;
    font-size: var(--pequeno) !important;
    resize: vertical !important;
}

test select {
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 0.3rem 0.5rem !important;
    border: 1px solid var(--lightgray) !important;
    border-radius: 6px !important;
    font-family: var(--ff1) !important;
    font-size: var(--pequeno) !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Inline gap-fill/dropdown questions inside running text should stay narrow */
test #question select,
test .exercise-db-html select {
    width: auto !important;
    min-width: 7.5em !important;
    max-width: 100% !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    box-sizing: border-box !important;
    padding: 0.3rem 0.5rem !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Single-line inputs: auto width + lighter padding (100% looks huge for gap-fill) */
test input[type="text"],
test input[type="search"],
test input[type="tel"],
test input[type="url"],
test input[type="email"],
test input[type="password"],
test input[type="number"],
test input[type="date"],
test input[type="datetime-local"],
test input[type="month"],
test input[type="week"],
test input[type="time"],
test input:not([type]) {
    width: auto !important;
    min-width: 2.5em !important;
    max-width: 100% !important;
    padding: 0.3rem 0.5rem !important;
    border: 1px solid var(--lightgray) !important;
    border-radius: 6px !important;
    font-family: var(--ff1) !important;
    font-size: var(--pequeno) !important;
}

test input[type="file"] {
    width: auto !important;
    max-width: 100% !important;
    padding: 0.3rem 0 !important;
    border: 1px solid var(--lightgray) !important;
    border-radius: 6px !important;
    font-family: var(--ff1) !important;
    font-size: var(--pequeno) !important;
}

/*
 * Native toggles: no block-sized chrome.
 * margin-right restores gap vs label text; blanket `test input { margin: 0 }` would
 * otherwise glue the control to the following text.
 */
test input[type="checkbox"],
test input[type="radio"] {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    margin: 0 0.4rem 0 0 !important;
    vertical-align: middle !important;
}

test input[type="hidden"] {
    display: none !important;
}

test button {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--botnav) !important;
    line-height: var(--esp) !important;
    color: var(--lightgray) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--red) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
}

test input[type="submit"],
test input[type="button"],
test input[type="reset"] {
    cursor: pointer !important;
}

/* Site button utility classes (scoped from general.css) */
test .botao {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--botnav) !important;
    line-height: var(--esp) !important;
}

test .botaowhite {
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 0 0.8rem 0 0.8rem !important;
    padding: 0.35rem 0.9rem !important;
    border: 1px solid var(--red) !important;
    background-color: var(--white) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-align: center !important;
}

test .botaored {
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 0.35rem 0.9rem !important;
    background-color: var(--red) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-align: center !important;
}

/* Submit CTA: center despite generic .botaored margins above */
test button.submit-button,
test .submit-button {
    display: block !important;
    width: fit-content !important;
    margin: 1rem auto 0 auto !important;
}

/* Table cells (scoped from general.css) */
test th {
    font-family: var(--ff1) !important;
    font-size: var(--tx) !important;
    color: var(--darkgray) !important;
    text-align: left !important;
    vertical-align: middle !important;
}

test td {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    color: var(--darkgray) !important;
    background-color: transparent !important;
    padding: 0.8rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: left !important;
    width: auto !important;
    max-width: 1000px !important;
    /* white-space: nowrap !important; */
    vertical-align: middle !important;
}

test td img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 900px) {
    test table {
        table-layout: auto !important;
        width: 100% !important;
    }

    test th,
    test td {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
}

/* Exercise tag pills (scoped from generalexercices.css + general.css) */
test .exercise-title-row {
    align-items: center !important;
    margin-bottom: 0.85rem !important;
}

test .exercise-title-row + #description {
    margin-top: 0 !important;
}

test .exercise-title-row .exercise-title,
test .exercise-title-row h2 {
    margin: 0 !important;
    line-height: 1.2 !important;
}

test .exercise-title-row .exercise-tags {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

test .exercise-title-row .exercise-tags > p,
test .exercise-title-row .graybox,
test .exercise-title-row .greenbox {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

test .graybox {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 1rem 0.5rem 1rem 0.5rem !important;
    padding: 0.35rem 0.9rem !important;
    background-color: var(--backgray) !important;
    color: var(--darkgray) !important;
    border: none !important;
    box-shadow: 0.05rem 0.05rem 0.1rem 0.04rem rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

test .yellowbox {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 0.35rem 0.9rem !important;
    background-color: var(--lightyellow) !important;
    color: var(--yellow) !important;
    border: none !important;
    box-shadow: 0.05rem 0.05rem 0.1rem 0.04rem rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

test .redbox {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--tx) !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin: 1rem 0 1rem 0 !important;
    padding: 0.35rem 0.9rem !important;
    background-color: var(--lightred) !important;
    color: var(--red) !important;
    border: none !important;
    box-shadow: 0.05rem 0.05rem 0.1rem 0.04rem rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

test .mini {
    font-family: var(--ff1) !important;
    font-weight: var(--fw3) !important;
    font-size: var(--minifs) !important;
    line-height: var(--esp) !important;
}