/*
 * mb2-static.css -- self-contained stylesheet for the STATIC fallback pages
 * (needs_wasm.html, too_old.html, devctm.html) and the index.html <noscript>
 * block. Part of the mb2-doc#1971 UIkit sweep, Stage 3 bead
 * sweep-view-static-pages (plan doc/uikit-utility-sweep-plan-1971.md section 5,
 * per-view step 1).
 *
 * These pages previously inherited UIkit's element-level base/normalize plus a
 * handful of container / table / margin classes from the UIkit stylesheet. That
 * link is now DROPPED from the three fallback pages, so this small stylesheet
 * re-provides ONLY the rules they actually reference:
 *   - an element-level base + typography SUBSET (body/link/paragraph and heading
 *     margins, heading sizes) -- the same rules styles/_reset.scss and
 *     styles/_typography.scss replicate, trimmed to just the elements these
 *     pages use (html, body, a, p, h3, h4);
 *   - the container / table / margin CLASSES they use, re-emitted under mb2-*
 *     names (mb2-container[-xsmall], mb2-table[-small][-shrink],
 *     mb2-margin-bottom);
 *   - `.mb2-fallback { padding-top: 40px }`, a Stage-4/.180 mb2-only top-spacing
 *     rule for the fallback pages (NOT UIkit-derived; see its own comment).
 *
 * Every declaration below EXCEPT the `.mb2-fallback` rule (a Stage-4/.180
 * mb2-only addition, see its own comment) is copied VERBATIM (values
 * byte-for-byte) from UIkit 3.13.10's compiled distribution -- the same
 * source-of-truth the Stage-2 mb2-* SCSS partials copied from
 * (styles/_reset.scss, styles/_typography.scss, styles/_container.scss,
 * styles/_tables.scss, styles/_utilities.scss); the UIkit class prefix is simply
 * swapped for mb2-, and the mb2-* class rules here are declaration-identical to
 * those partials so a fallback page renders the same as the app bundle. If a
 * value ever disagrees with a paraphrase, the dist wins.
 *
 * index.html links this file (after the Stage-4 unlink the SPA no longer links
 * any UIkit bundle), so its <noscript> block -- which the JS-injected mb2-*
 * bundle never reaches when scripting is disabled -- stays styled. With
 * scripting enabled these element/base rules only duplicate ones the mb2-*
 * bundle already emits (identical values), so they move no pixel.
 */

/* Base: element-level normalize + typography subset
 ========================================================================== */

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    color: #666;
}

body {
    margin: 0;
}

a {
    color: #1e87f0;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #0f6ecd;
    text-decoration: underline;
}

p {
    margin: 0 0 20px 0;
}

* + p {
    margin-top: 20px;
}

h3,
h4 {
    margin: 0 0 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    color: #333;
    text-transform: none;
}

* + h3,
* + h4 {
    margin-top: 40px;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h4 {
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Component: Container
 ========================================================================== */

.mb2-container {
    display: flow-root;
    box-sizing: content-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .mb2-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .mb2-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Remove margin from the last-child */
.mb2-container > :last-child {
    margin-bottom: 0;
}

/* Remove padding from nested containers */
.mb2-container .mb2-container {
    padding-left: 0;
    padding-right: 0;
}

.mb2-container-xsmall {
    max-width: 750px;
}

/*
 * Deliberate cosmetic top spacing for the three static fallback pages. Each
 * opens with a heading (<h3>/<h4>) as the container's FIRST child, whose top
 * margin is 0 -- the `* + h3, * + h4 { margin-top: 40px }` rule only applies
 * BETWEEN siblings, not to a first child -- so the heading butts against the
 * viewport top. Scoped to this brand-new class (added only to the fallback
 * pages) so it never touches index.html's shared .mb2-container/body/element
 * rules.
 */
.mb2-fallback {
    padding-top: 40px;
}

/* Utility: Margin
 ========================================================================== */

.mb2-margin-bottom {
    margin-bottom: 20px !important;
}

/* Component: Table
 ========================================================================== */

.mb2-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 20px;
}

/* Add margin if adjacent element */
* + .mb2-table {
    margin-top: 20px;
}

/* Header cell */
.mb2-table th {
    padding: 16px 12px;
    text-align: left;
    vertical-align: bottom;
    font-size: 0.875rem;
    font-weight: 400;
    color: #999;
    text-transform: uppercase;
}

/* Cell */
.mb2-table td {
    padding: 16px 12px;
    vertical-align: top;
}

.mb2-table td > :last-child {
    margin-bottom: 0;
}

/* Footer */
.mb2-table tfoot {
    font-size: 0.875rem;
}

/* Caption */
.mb2-table caption {
    font-size: 0.875rem;
    text-align: left;
    color: #999;
}

/* Row transition (theme hook, animates the hover-row background) */
.mb2-table tbody tr {
    transition: background-color 0.1s linear;
}

/* Size modifier */
.mb2-table-small td,
.mb2-table-small th {
    padding: 10px 12px;
}

/* Cell size modifier */
.mb2-table-shrink {
    width: 1px;
}