/* Multiples and the divisibility tests.

   A column of test cards and a live tester. Each card gives one test, its
   rule, the rule run on 4,932, and a fold holding the reason the rule can be
   trusted; the tester runs the six syllabus tests on a number of the reader's
   own.

   Everything else comes from lesson.css.

   No viewport media queries: .layout is a fixed 900px panel that shared.css
   scales with transform under 900px, so nothing here may reflow. */

/* SIX TESTS ON ONE NUMBER -----------------------------------------------

   A number of the reader's own, and the six syllabus tests run on it. Rows are
   built once and rewritten in place. A refused number hides the rows with
   visibility so the panel keeps its size, and a dashed panel says what is
   needed instead — the house's quiet invalid state, not a warning. */

.tester {
    margin: 22px 0 8px;
    border: 2px solid #c9dce8;
    border-radius: 22px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%);
    box-shadow: 0 12px 30px rgba(20, 57, 78, .14);
}

.tester__head {
    display: flex;
    justify-content: center;
    padding: 18px 24px 8px;
}

.tester__field {
    display: grid;
    gap: 5px;
    justify-items: center;
}

.tester__field > span {
    color: #41535c;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .035em;
}

.tester__field input {
    width: 150px;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 2px solid #b8cbd7;
    border-radius: 12px;
    outline: none;
    background: #fff;
    color: #173849;
    font: 700 1.18rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tester__field input:focus {
    border-color: #116e93;
    box-shadow: 0 0 0 4px rgba(17, 110, 147, .12);
}

.tester__hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* The rows and the refusal share one cell, so the panel never changes height
   between a number and no number. */
.tester__body {
    position: relative;
    display: grid;
    padding: 6px 24px 20px;
}

.tester__list {
    grid-area: 1 / 1;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tester__row {
    display: grid;
    grid-template-columns: 2.6em 1fr auto;
    align-items: baseline;
    gap: 14px;
    padding: 9px 16px;
    border: 2px solid #d9e2ec;
    border-left: 5px solid #b8cbd7;
    border-radius: 14px;
    background: #fff;
}

/* A yes and a no are told apart by the word itself and by the weight of the
   left edge, not by colour alone. */
.tester__row.is-yes {
    border-left-color: #5d91b0;
}

.tester__row.is-no {
    border-left-color: #d9e2ec;
}

.tester__by {
    color: #09539d;
    font: 700 1.12rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.tester__evidence {
    color: #41535c;
    font-size: .95rem;
    line-height: 1.5;
}

.tester__verdict {
    color: #09539d;
    font: 700 .95rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tester__row.is-no .tester__verdict {
    color: #52666f;
}

.tester__summary {
    grid-area: 2 / 1;
    margin: 12px 0 0;
    color: #243a45;
    font-size: .97rem;
    line-height: 1.5;
    text-align: center;
}

.tester__list.is-hidden,
.tester__summary.is-hidden {
    visibility: hidden;
}

/* display: grid on the refusal would otherwise beat the hidden attribute. */
.tester__empty[hidden] {
    display: none;
}

.tester__empty {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    border: 2px dashed #b8cbd7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    color: #687b84;
    font-size: .97rem;
    text-align: center;
}

/* ONE TEST TO A CARD ----------------------------------------------------

    Each test gives the rule, a worked number, and a fold holding the reason it
    can be trusted. */

.tests {
    display: grid;
    gap: 14px;
    margin: 24px 0;
}

.test {
    padding: 16px 20px 14px;
    border: 2px solid #d9e2ec;
    border-left: 5px solid #5d91b0;
    border-radius: 14px;
    background: #f8fbfd;
}

.test__by {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 8px;
    color: #09539d;
    font-size: 1.12rem;
}

.test__rule {
    margin: 0 0 10px;
    color: #173849;
    font-size: 1rem;
    line-height: 1.5;
}

/* Not a flex row: flex makes every run of text its own item, which parts a
   comma from the number it belongs to. This is a sentence, so it is laid out
   as one. */
.test__work {
    margin: 0;
    color: #41535c;
    font-size: .95rem;
    line-height: 1.75;
}

/* The answer sits inline at the end of the working, in the page's ink rather
   than set apart underneath it: it is the last step of the sentence, not a
   banner. */
.test__verdict {
    margin-left: .5em;
    color: #09539d;
    font-weight: 700;
    white-space: nowrap;
}

/* THE FOLD --------------------------------------------------------------

   <details> so it needs no script, opens with the keyboard, and is open in
   print and in flattened text. Every fold is extracurricular — the course wants
   the tests, not the proofs — so all twelve carry the violet, which is also
   what keeps a column of blue cards from reading as one block.

   The marker is drawn rather than left to the browser's default triangle,
   which differs on every platform. */

.why {
    margin: 12px -20px -14px;
    padding: 10px 20px 12px;
    border-top: 1px solid #e4edf3;
    border-radius: 0 0 11px 11px;
    background: #f7f4fc;
}

.why>summary {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #5b4a86;
    cursor: pointer;
    font-size: .86rem;
    font-weight: 700;
    letter-spacing: .05em;
    list-style: none;
    text-transform: uppercase;
}

.why>summary::-webkit-details-marker {
    display: none;
}

.why>summary::before {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #8579a8;
    content: "";
    transition: transform .18s ease;
}

.why[open]>summary::before {
    transform: rotate(90deg);
}

.why>summary:focus-visible {
    outline: 2px solid #5b4a86;
    outline-offset: 3px;
    border-radius: 4px;
}

.why p {
    margin: 10px 0 0;
    color: #4f4666;
    font-size: .92rem;
    line-height: 1.6;
}