/* =====================================================================================================
   siteStyle.css (2.0.228): the site's colours, as custom properties every stylesheet uses.
   Loaded first in the layout. <html data-site-style="classic"> switches to the classic colours; anything else (or no
   attribute) is the MSL brand. The attribute is set before the page draws (js/shellEarly.js, from the last answer this
   browser had) and kept up to date by js/siteStyle.js:
     - the site's default: Admin -> Display settings (ADMIN);
     - a user's own choice: the account menu, for users with the Switch Site Style permission.
   Emails keep the brand colours whatever is chosen.
   ===================================================================================================== */
:root {
    --brand-navy: #24225B;           /* MSL dark blue (R36 G34 B91) */
    --brand-navy-deep: #1d1b4f;      /* hover / pressed */
    --brand-navy-rgb: 36, 34, 91;    /* for see-through shades: rgba(var(--brand-navy-rgb), .2) */
    --brand-yellow: #F2E900;         /* MSL yellow (R242 G233 B0) */
    --brand-yellow-hover: #d9d000;
    --brand-yellow-rgb: 242, 233, 0;
}

html[data-site-style="classic"] {
    --brand-navy: #151a66;
    --brand-navy-deep: #10144f;
    --brand-navy-rgb: 21, 26, 102;
    --brand-yellow: #FBC63B;
    --brand-yellow-hover: #f0b72a;
    --brand-yellow-rgb: 251, 198, 59;
}

/* The chooser in the account menu (js/siteStyle.js). */
.site-style-chooser {
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--brand-navy-rgb), .18);
    border-radius: 10px;
}

    .site-style-chooser[hidden] {
        display: none !important;
    }

    .site-style-chooser__title {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: .8;
    }

    .site-style-chooser label {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 4px 0;
        font-size: 14px;
        cursor: pointer;
    }

    .site-style-chooser input[type="radio"] {
        accent-color: var(--brand-navy);
    }

.site-style-swatch {
    display: inline-flex;
    flex: none;
    overflow: hidden;
    width: 28px;
    height: 14px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

    .site-style-swatch > span {
        flex: 1;
    }

.site-style-swatch--brand > span:first-child { background: #24225B; }
.site-style-swatch--brand > span:last-child { background: #F2E900; }
.site-style-swatch--classic > span:first-child { background: #151a66; }
.site-style-swatch--classic > span:last-child { background: #FBC63B; }

.site-style-chooser__note {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: .75;
}