/*
 * Public CSS Bundle: blog-mc.bundle.css
 * Auto-generated by scripts/bundle_public_css.py
 * DO NOT EDIT - Edit source files instead
 *
 * Sources: blog-mc/blog-mc-base.css, blog-mc/blog-mc-desktop.css, blog-mc/blog-mc-mobile-portrait.css, blog-mc/blog-mc-mobile-landscape.css
 */

/* === blog-mc/blog-mc-base.css === */

/*
 * Mechanical Comprehension blog post (asvab-mechanical-comprehension): the
 * course's own animations and screens inside a post. Base tier, no media
 * query; the three viewport files follow it in blog-mc.bundle.css. Every
 * selector is mcb- and sits under .article-content, so nothing here reaches
 * another post.
 */

/* ── On this page ── */
.article-content .mcb-toc {
    margin: 24px 0 32px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
.article-content .mcb-toc-label {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #475569;
}
.article-content .mcb-toc ol { margin: 0; padding-left: 20px; }
.article-content .mcb-toc li { margin: 4px 0; font-size: 1rem; line-height: 1.5; }

/* ── A rule of the unit, set apart ── */
.article-content .mcb-rule {
    margin: 20px 0;
    padding: 14px 18px;
    background: #fffbeb;
    border-left: 4px solid #fdcc05;
    border-radius: 0 12px 12px 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.4;
    color: #0f172a;
}
.article-content .mcb-rule small {
    display: block;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #475569;
}

/* ── A demo: the course's own moving piece, with Replay ── */
.article-content .mcb-demo {
    margin: 28px 0;
    padding: 18px 16px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-align: center;
}
.article-content .mcb-stage {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.article-content .mcb-demo[data-kind="marks"] .mcb-stage { max-width: 480px; }
.article-content .mcb-stage .mcb-still {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
.article-content .mcb-box { width: 100%; }

.article-content .mcb-pick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.article-content .mcb-pick-btn,
.article-content .mcb-replay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
    cursor: pointer;
}
.article-content .mcb-pick-btn[aria-pressed="true"] {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}
.article-content .mcb-replay { margin-top: 12px; background: #fdcc05; border-color: #0f172a; }
.article-content .mcb-pick-btn:focus-visible,
.article-content .mcb-replay:focus-visible { outline: 3px solid #0264c0; outline-offset: 2px; }

/* The controls belong to the moving piece: with no script there is the still alone. */
.article-content .mcb-demo:not(.is-live) .mcb-pick,
.article-content .mcb-demo:not(.is-live) .mcb-replay { display: none; }

.article-content .mcb-demo figcaption,
.article-content .mcb-shot figcaption {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
    text-align: center;
}

/* ── A real screen of the course (desktop and phone through <picture>) ── */
.article-content .mcb-shot { margin: 24px 0 28px; }
.article-content .mcb-shot picture { display: block; }
/* The picture's shape is stated here, for each of the two screens it can be, so its room is held before it
   loads: read off the width and height attributes alone, a phone held the desktop screen's room for the phone's
   taller screen and the page grew by a third as the pictures came in (measured 2026-11-12, `test page` P9). */
.article-content .mcb-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 750;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}

/* ── A step of the how-to ── */
.article-content .mcb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7em;
    height: 1.7em;
    margin-right: 8px;
    background: #fdcc05;
    border: 2px solid #0f172a;
    border-radius: 50%;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.85em;
    color: #0f172a;
    vertical-align: 0.05em;
}

/* ── The way into the course ── */
.article-content .mcb-open-row { margin: 24px 0; text-align: center; }
.article-content a.mcb-open {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 26px;
    background: #0f172a;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
}
.article-content a.mcb-open:hover { background: #1e293b; color: #ffffff; }

.article-content .mcb-source { font-size: 0.9rem; color: #64748b; }
.article-content .mcb-sign { margin-top: 28px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .article-content .mcb-replay { display: none; }
}


/* === blog-mc/blog-mc-desktop.css === */

/* Mechanical Comprehension blog post: desktop tier. */
@media (min-width: 769px) {
    .article-content .mcb-demo { padding: 22px 24px 16px; }
    .article-content .mcb-stage { max-width: 360px; }
    .article-content .mcb-demo[data-kind="marks"] .mcb-stage { max-width: 520px; }
}


/* === blog-mc/blog-mc-mobile-portrait.css === */

/* Mechanical Comprehension blog post: phone held upright. The phone's own
   screens are shown (the <picture> source), at a phone's width, centered. */
@media (max-width: 768px) and (orientation: portrait) {
    /* the same query as the post's <source>, so the phone's screen and its room always go together */
    .article-content .mcb-shot img { width: min(100%, 300px); aspect-ratio: 390 / 844; }
    .article-content .mcb-stage { max-width: 300px; }
    .article-content .mcb-demo[data-kind="marks"] .mcb-stage { max-width: 100%; }
    .article-content .mcb-rule { font-size: 1.05rem; }
    .article-content .mcb-pick-btn,
    .article-content .mcb-replay { min-height: 44px; }
    /* the four rigs on one row */
    .article-content .mcb-pick { gap: 6px; flex-wrap: nowrap; }
    .article-content .mcb-pick-btn { padding: 8px 10px; font-size: 0.82rem; white-space: nowrap; }
    /* three short columns that fit a phone, never a table cut at the screen's edge */
    .article-content .mcb-facts { display: table; width: 100%; table-layout: fixed; }
    .article-content .mcb-facts th,
    .article-content .mcb-facts td { padding: 10px 8px; white-space: normal; }
}


/* === blog-mc/blog-mc-mobile-landscape.css === */

/* Mechanical Comprehension blog post: phone on its side. A rig is taller than
   it is wide, so it is held to the height of the screen. */
@media (max-width: 926px) and (orientation: landscape) {
    .article-content .mcb-stage { max-width: 250px; }
    .article-content .mcb-demo[data-kind="marks"] .mcb-stage { max-width: 420px; }
    .article-content .mcb-shot img { max-width: 100%; }
}