/* TOPIC PAGES

   The pages that teach. They read in the site's blues, which is what separates
   them at a glance from the practice pages that drill the same material in
   ochre. Shared pieces — .sf notation, the onward links, the page margins —
   live in curriculum.css.

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

/* THE RULE — a definition set apart so it can be checked at a glance. */

.rule-card {
    padding: 24px 26px;
    border: 2px solid #d9e2ec;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}

.rule-card__statement {
    margin: 0 0 16px;
    color: #09539d;
    font-size: 1.6rem;
    text-align: center;
}

.rule-card__conditions { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }

.rule-card__conditions li {
    flex: 1 1 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef5fb;
    font-size: .95rem;
    line-height: 1.5;
}

/* IMPORTANT FACTS — short ideas pupils should notice and remember. */

.important-box {
    margin: 24px 0;
    padding: 18px 22px;
    border: 2px solid #d99a20;
    border-left-width: 7px;
    border-radius: 14px;
    background: #fff8df;
    box-shadow: 0 5px 14px rgba(122, 84, 10, .12);
}

.important-box__title {
    margin: 0 0 6px;
    color: #7a540a;
    font-size: 1.1rem;
}

.important-box p:last-child { margin-bottom: 0; }

/* WORKED EXAMPLES — method on the left, reason on the right, as a mark scheme
   would set it out. The reason column is the part worth reading twice. */

.wex { margin-bottom: 22px; padding: 22px 26px; border: 2px solid #d9e2ec; border-radius: 18px; background: #f8fbfd; }
.wex:last-child { margin-bottom: 0; }
.wex__title { margin: 0 0 4px; color: #09539d; font-size: 1.2rem; }
.wex__task { margin: 0 0 16px; color: #4d5c62; font-size: .95rem; }
.wex__steps { margin: 0; padding: 0; list-style: none; counter-reset: wex; }

.wex__steps li {
    display: grid;
    gap: 16px;
    grid-template-columns: 34px 1fr 1fr;
    align-items: baseline;
    padding: 10px 0;
    border-top: 1px solid #dde8ef;
}

.wex__steps li::before {
    counter-increment: wex;
    content: counter(wex);
    color: #116e93;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.wex__do { font-size: 1.02rem; }
.wex__why { color: #4d5c62; font-size: .92rem; line-height: 1.5; }

/* A worked example that plays instead of sitting still. The card pins itself
   while it is being read, so no box is drawn around it: an empty border would
   be left drifting behind the card for the length of the calculation. */

.worked { margin: 34px 0 30px; }
.worked:last-child { margin-bottom: 0; }
.worked__title { margin: 0 0 4px; color: #09539d; font-size: 1.2rem; }
.worked__answer { margin: 14px 0 0; color: #173849; font-size: 1.06rem; text-align: center; }

/* WHERE MARKS ARE LOST — the named misconceptions, each with its correction.
   Red is a warning here, not a page type, so it stays on the teaching pages. */

.slips { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }

.slips li {
    padding: 16px 18px;
    border: 2px solid #d9e2ec;
    border-left: 5px solid #a3352b;
    border-radius: 14px;
    background: #fff;
}

/* Child combinators: the sentences inside carry their own <span class="sf">
   notation, which must stay inline. */
.slips li > b { display: block; margin-bottom: 6px; color: #a3352b; font-size: .98rem; }
.slips li > span { display: block; color: #41535c; font-size: .92rem; line-height: 1.55; }

/* PREREQUISITES — one line at the head of a lesson, naming what the reader is
   assumed to be able to do already and linking to the pages that teach it. */
.prereq {
    display: flex;
    gap: 12px;
    margin: 0 0 22px;
    padding: 12px 18px;
    align-items: baseline;
    border-left: 5px solid #5d91b0;
    border-radius: 0 12px 12px 0;
    background: #f1f7fb;
    color: #41535c;
    font-size: .92rem;
    line-height: 1.55;
}

.prereq b { flex: none; color: #173849; }

/* THE RECAP — the page's claims, gathered in a few lines at the end. */
.recap { margin: 0; padding: 0; list-style: none; counter-reset: recap; }

.recap li {
    position: relative;
    margin-bottom: 10px;
    padding: 12px 18px 13px 52px;
    border: 2px solid #d9e2ec;
    border-radius: 14px;
    background: #f8fbfd;
    color: #243a45;
    line-height: 1.55;
}

.recap li:last-child { margin-bottom: 0; }

.recap li::before {
    position: absolute;
    top: 12px;
    left: 15px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: #116e93;
    color: #fff;
    content: counter(recap);
    counter-increment: recap;
    font-size: .8rem;
    font-weight: 700;
}