/* mybrowser.org additions on top of the original wb.css.
 *
 * 1) Modern browser logos (github.com/alrra/browser-logos) replace the 2014
 *    icons for the families that have them; Android and Dolphin keep the
 *    classic art (no modern equivalent in the repo).
 *    Loaded after wb.css, so equal-specificity overrides win by order.
 */
.Chrome, .svg .Chrome, .mobile .Chrome, .svg .mobile .Chrome {
    background-image: url(images/modern/chrome_128x128.png);
    background-image: -webkit-image-set(url(images/modern/chrome_128x128.png) 1x, url(images/modern/chrome_256x256.png) 2x);
    background-image: image-set(url(images/modern/chrome_128x128.png) 1x, url(images/modern/chrome_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.Firefox, .svg .Firefox, .mobile .Firefox, .svg .mobile .Firefox {
    background-image: url(images/modern/firefox_128x128.png);
    background-image: -webkit-image-set(url(images/modern/firefox_128x128.png) 1x, url(images/modern/firefox_256x256.png) 2x);
    background-image: image-set(url(images/modern/firefox_128x128.png) 1x, url(images/modern/firefox_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.Edge, .svg .Edge, .mobile .Edge, .svg .mobile .Edge {
    background-image: url(images/modern/edge_128x128.png);
    background-image: -webkit-image-set(url(images/modern/edge_128x128.png) 1x, url(images/modern/edge_256x256.png) 2x);
    background-image: image-set(url(images/modern/edge_128x128.png) 1x, url(images/modern/edge_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.Safari, .svg .Safari, .mobile .Safari, .svg .mobile .Safari {
    background-image: url(images/modern/safari_128x128.png);
    background-image: -webkit-image-set(url(images/modern/safari_128x128.png) 1x, url(images/modern/safari_256x256.png) 2x);
    background-image: image-set(url(images/modern/safari_128x128.png) 1x, url(images/modern/safari_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.Opera, .svg .Opera, .mobile .Opera, .svg .mobile .Opera {
    background-image: url(images/modern/opera_128x128.png);
    background-image: -webkit-image-set(url(images/modern/opera_128x128.png) 1x, url(images/modern/opera_256x256.png) 2x);
    background-image: image-set(url(images/modern/opera_128x128.png) 1x, url(images/modern/opera_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.IE, .svg .IE, .mobile .IE, .svg .mobile .IE {
    background-image: url(images/modern/internet-explorer_128x128.png);
    background-image: -webkit-image-set(url(images/modern/internet-explorer_128x128.png) 1x, url(images/modern/internet-explorer_256x256.png) 2x);
    background-image: image-set(url(images/modern/internet-explorer_128x128.png) 1x, url(images/modern/internet-explorer_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 2) Normalize the boxes wb.css shaped for the old tall Edge/IE/Safari art —
 *    the modern logos are square, so drop the offsets and odd sizes. */
.browser-icon .Edge, .browser-icon .IE, .browser-icon .Safari {
    top: 0;
    width: 62px;
    background-size: contain;
}
.browser-icon .Edge span, .browser-icon .IE span, .browser-icon .Safari span {
    bottom: 0;
}
.browser-icon .Opera {
    width: 62px;
    background-size: contain;
}
#browser-active .browser-icon .Edge,
#browser-active .browser-icon .IE,
#browser-active .browser-icon .Safari,
#browser-active .browser-icon .Opera {
    /* keep wb.css's generic span lift (top:-11px) so the icon aligns with the
     * browser-name text the same way Chrome/Firefox do */
    top: -11px;
    width: 62px;
    height: 62px;
}

/* wb.css's .mobile offsets for the old tall art out-rank the rules above
 * (higher specificity), so the square-logo normalization is repeated here
 * at mobile specificity. */
.mobile .browser-icon .Edge,
.mobile .browser-icon .IE,
.mobile .browser-icon .Safari,
.mobile .browser-icon .Opera {
    top: 0;
    background-size: contain;
}
.mobile #browser-active .browser-icon .Edge,
.mobile #browser-active .browser-icon .IE,
.mobile #browser-active .browser-icon .Safari,
.mobile #browser-active .browser-icon .Opera {
    /* keep wb.css's generic mobile span lift (top:-33px) — top:0 made these
     * four icons hang 42px below the h3 and cover the OS-details line */
    top: -33px;
    width: 110px;
    height: 110px;
}

/* 3) Mobile layout sizing for Edge (absent from the 2014 design). */
.mobile .browser-list .Edge {
    width: 115px;
}
.mobile #browser-active .browser-icon .Edge {
    width: 110px;
    height: 110px;
    top: -33px;
}

/* 4) Brave in the try-list (and as detected-browser icon). */
.Brave, .svg .Brave, .mobile .Brave, .svg .mobile .Brave {
    background-image: url(images/modern/brave_128x128.png);
    background-image: -webkit-image-set(url(images/modern/brave_128x128.png) 1x, url(images/modern/brave_256x256.png) 2x);
    background-image: image-set(url(images/modern/brave_128x128.png) 1x, url(images/modern/brave_256x256.png) 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.browser-icon .Brave {
    width: 62px;
}
#browser-active .browser-icon .Brave {
    width: 62px;
    height: 62px;
}
.mobile .browser-list .Brave {
    width: 115px;
}
.mobile #browser-active .browser-icon .Brave {
    width: 110px;
    height: 110px;
}

/* 6 icons must fit the 487px column when nothing is excluded (bots/unknown).
 * wb.css lays the li out inline, so each gap also carries a ~4px word space —
 * 6 icons overflowed and orphaned the last one onto its own row. Flex drops
 * the word spaces (6x62px + 5x22px = 482px < 487px) and centers each row. */
.browser-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 22px;
}
.browser-list li,
[dir="rtl"] .browser-list li {
    margin-right: 0;
    margin-left: 0;
}

/* 5) Responsive desktop layout. The phone (.mobile, 640px viewport) and
 * tablet (.tablet, 1030px viewport) layouts are already handled by the
 * design's own device classes + viewport scaling, so everything here is
 * gated to desktop-class pages only. */
@media (max-width: 1029px) {
    /* the scaled story canvas keeps its 1030px LAYOUT width (transform does
     * not shrink layout) — clip the phantom overflow */
    html:not(.mobile):not(.tablet) body {
        overflow-x: hidden;
    }
    html:not(.mobile):not(.tablet) .page-header-wrapper {
        width: auto;
        max-width: 978px;
        padding: 0 20px;
    }
    html:not(.mobile):not(.tablet) .h1 {
        font-size: clamp(30px, 5.5vw, 46px);
        line-height: 1.25;
    }
    /* stack the two 487px detection columns */
    html:not(.mobile):not(.tablet) #browser-active,
    html:not(.mobile):not(.tablet) .browser-other {
        float: none;
        width: auto;
        max-width: 487px;
        margin: 0 auto;
    }
    html:not(.mobile):not(.tablet) .browser-other {
        border-left: none;
        border-top: 1px solid #e9e9e9;
    }
    html:not(.mobile):not(.tablet) .info-link,
    html:not(.mobile):not(.tablet) .page-footer-wrapper {
        padding: 0 20px;
    }
}
/* .section-story is a 1030px pixel-art canvas (absolutely positioned artwork
 * at fixed coordinates) — it cannot reflow; wb.js scales it to fit instead. */

/* 6) Mobile polish. The .mobile layout is a 640px canvas that a real phone
 * shows scaled by ~0.61 (viewport width=640 on a ~390px screen), so CSS px
 * here must be >=23px to read as >=14px effective. Everything below is
 * .mobile-scoped and does not match desktop/tablet pages. */

/* 6a) Readability: the detected-OS line ('on iOS 18.5 · mobile') and the
 * update-status line inherited 18px = 11px effective. 24px = 14.6px.
 * Weight 400 instead of inherited Light 300, and #6b6b6b (5.3:1) instead of
 * #959595 (3.0:1, fails WCAG AA). */
.mobile .section-detection p {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    color: #6b6b6b;
}
.mobile #browser-active .update {
    font-size: 24px;
    line-height: 38px;
    font-weight: 400;
    color: #6b6b6b;
}
.mobile #browser-active .h2 {
    color: #6b6b6b;
}

/* 6b) Update CTA: was 13px text (7.9px effective) in a ~20px-effective-tall
 * box. Drop it onto its own line as a real button: ~66px CSS tall (~40px
 * effective), 26px text (~16px effective). */
.mobile #browser-active .update a {
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 20px auto 0 auto;
    padding: 16px 32px;
    font-size: 26px;
    line-height: 34px;
    border-radius: 8px;
}

/* 6c) Type hierarchy: browser name is the page's primary answer; section
 * headings should outrank body text. (Both inherited body 28px.) */
.mobile #browser-active .h3 {
    font-size: 40px;
    line-height: 50px;
}
.mobile .section-detection .h2 {
    font-size: 34px;
    line-height: 44px;
}

/* 6d) Try-a-different-browser grid. wb.css centers via inline li +
 * margin-right:70px, which skews each wrapped row ~35px left; flex (set on
 * .browser-list above) centers each row for real. 110px icons + 48px gaps
 * fit 3 per row in the 470px column. */
.mobile .browser-list {
    column-gap: 48px;
}
.mobile .browser-list li {
    margin-right: 0;
}

/* 6d2) Unknown/bot state: the ...unable to be detected message is an .h3
 * .browser-icon with no icon span, but wb.css still gives it the icon box's
 * fixed 68px height + 42px padding — the multi-line message spilled through
 * the section divider. Let it size to its content (no-op where :has() is
 * unsupported, which just keeps today's behavior). */
.mobile #browser-active .browser-icon:not(:has(span)) {
    height: auto;
    padding-top: 0;
    font-size: 34px;
    line-height: 46px;
}

/* 6e) Label/icon overlap: the modern square logos are vertically centered
 * (background-position:center) in the 170px-tall link box, sinking their
 * bottoms into the label band (y 128-170). Anchor the art to the top
 * (y 0-110) and neutralize wb.css's legacy Safari offsets (top:-9px /
 * span bottom:-9px, tuned for the 2014 tall Safari art). */
.browser-list .browser-icon a {
    background-position: center top;
}
.mobile .browser-list .browser-icon a {
    top: 0;
    width: 110px;
    background-size: 110px 110px;
    background-position: center top;
}
.mobile .browser-list .browser-icon a span {
    bottom: 0;
}

/* 6f) Footer links: 18px = 11px effective tap targets. 22px text + padding
 * grows the hit area; #1c6ee8 (4.7:1) replaces #3583f2 (3.7:1) at this size. */
.mobile .page-footer .info-link {
    margin-top: 48px;
    font-size: 22px;
    line-height: 34px;
}

/* 6f2) The 2014 mobile footer split in two: back-to-top left, share widget
 * right, vertical divider between. The share widget is gone from the HTML,
 * which left a centered divider next to an empty half. Drop the divider and
 * center the back-to-top link (.page-footer is already text-align:center). */
.mobile .page-footer:before {
    content: none;
}
.mobile .page-footer .scroll-top {
    float: none;
    display: inline-block;
    width: auto;
    margin: 0;
}
.mobile .page-footer .info-link a {
    display: inline-block;
    padding: 12px 8px;
    color: #1c6ee8;
}

/* 6g) Visible keyboard focus (no rule anywhere set one beyond UA defaults;
 * no rest-state change on any layout). Thicker on mobile to survive the
 * 0.61 scale. */
a:focus-visible {
    outline: 3px solid #1c6ee8;
    outline-offset: 3px;
    border-radius: 4px;
}
.mobile a:focus-visible {
    outline-width: 5px;
}