/* PLACE AT: <your web project>/wwwroot/academy/css/academy.css   (put the file in this folder of your project, keep the file name) */
:root {
    --em: #0b4a38;
    --em2: #1f7a5c;
    --em3: #0f5c45;
    --emd: #06281e;
    --gold: #b8891a;
    --gold2: #e5c765;
    --goldl: #f3e3b0;
    --paper: #fbf8f0;
    --paper2: #f3efe2;
    --card: #fffdf7;
    --ink: #1d2a26;
    --ink2: #44534d;
    --mut: #55645e;
    --goldt: #7d5a0b;
    --ctl: #8a8470;
    --line: #d9d0b4;
    --line2: #e9e2cb;
    --red: #a33a2f;
    --redl: #f6d9d4;
    --grn: #1f7a5c;
    --grnl: #dcefe5;
    --amb: #a86f0c;
    --ambl: #fbf0cf;
    --r: 10px;
    --sh: 0 1px 2px rgba(11,74,56,.06),0 6px 22px rgba(11,74,56,.07);
    --serif: Georgia,'Times New Roman','Noto Serif',serif;
    --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif
}

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--sans);
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto
}

a {
    color: var(--em2)
}

    a:hover {
        color: var(--em)
    }

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--em);
    line-height: 1.22;
    margin: 0 0 .5em;
    font-weight: 700;
    overflow-wrap: anywhere
}

h1 {
    font-size: clamp(26px,4vw,38px)
}

h2 {
    font-size: clamp(21px,2.6vw,26px)
}

h3 {
    font-size: 19px
}

h4 {
    font-size: 16px
}

p {
    margin: 0 0 1em
}

small, .sm {
    font-size: 13.5px
}

.mut {
    color: var(--mut)
}

.ink2 {
    color: var(--ink2)
}

.c {
    text-align: center
}

.r {
    text-align: right
}

.nowrap {
    white-space: nowrap
}

.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap
}

:focus-visible {
    outline: 3px solid var(--em);
    outline-offset: 2px;
    border-radius: 4px
}

.side :focus-visible, .site-foot :focus-visible, .dark :focus-visible, .hero :focus-visible {
    outline-color: var(--gold2)
}

.dark .card :focus-visible, .dark .modal :focus-visible, .dark .co :focus-visible {
    outline-color: var(--em)
}
/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 15px/1 var(--sans);
    padding: 12px 20px;
    border-radius: 8px;
    border: 1.5px solid var(--em);
    background: var(--em);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    transition: transform .08s,box-shadow .15s,background .15s
}

    .btn:hover {
        background: var(--em3);
        color: #fff;
        box-shadow: 0 4px 14px rgba(11,74,56,.25)
    }

    .btn:active {
        transform: translateY(1px)
    }

    .btn.gold {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--emd)
    }

        .btn.gold:hover {
            background: var(--gold2);
            color: var(--emd)
        }

    .btn.ghost {
        background: transparent;
        color: var(--em)
    }

        .btn.ghost:hover {
            background: var(--grnl);
            color: var(--em);
            box-shadow: none
        }

    .btn.danger {
        background: var(--red);
        border-color: var(--red)
    }

    .btn.sm {
        padding: 8px 14px;
        min-height: 36px;
        font-size: 14px
    }

    .btn[disabled] {
        opacity: .5;
        cursor: not-allowed;
        box-shadow: none
    }

.dark .btn.ghost {
    color: #fff;
    border-color: rgba(255,255,255,.55)
}

    .dark .btn.ghost:hover {
        background: rgba(255,255,255,.12);
        color: #fff
    }

.dark .btn.ghost {
    background: transparent
}

.dark .card .btn.ghost {
    color: var(--em);
    border-color: var(--line)
}

    .dark .card .btn.ghost:hover {
        background: var(--grnl);
        color: var(--em)
    }
/* forms */
label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 6px;
    color: var(--ink)
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], input[type=tel], select, textarea {
    width: 100%;
    font: 16px/1.4 var(--sans);
    padding: 11px 13px;
    border: 1.5px solid var(--ctl);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    min-height: 44px
}

textarea {
    min-height: 110px;
    resize: vertical
}

    input:focus, select:focus, textarea:focus {
        border-color: var(--em);
        outline: 3px solid var(--em);
        outline-offset: 2px
    }

.fld {
    margin-bottom: 16px
}

.hint {
    font-size: 13px;
    color: var(--mut);
    margin-top: 5px
}

.err {
    color: var(--red);
    font-size: 14px;
    margin-top: 6px
}

.chk {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400;
    font-size: 14.5px
}

    .chk input {
        margin-top: 4px;
        width: 18px;
        height: 18px;
        flex: none
    }

.row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

    .row > * {
        flex: 1 1 220px;
        min-width: 0
    }
/* cards */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 22px;
    margin-bottom: 20px;
    min-width: 0
}

    .card h3:first-child, .card h2:first-child {
        margin-top: 0
    }

.grid {
    display: grid;
    gap: 18px
}

.g2 {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr))
}

.g3 {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr))
}

.g4 {
    grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr))
}

.kpi {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 18px;
    box-shadow: var(--sh)
}

    .kpi b {
        display: block;
        font: 700 30px/1.1 var(--serif);
        color: var(--em)
    }

    .kpi span {
        font-size: 13px;
        color: var(--mut);
        letter-spacing: .02em
    }

.pill {
    display: inline-block;
    font: 600 12px/1 var(--sans);
    padding: 5px 10px;
    border-radius: 99px;
    background: var(--paper2);
    color: var(--ink2);
    border: 1px solid var(--line);
    white-space: nowrap
}

    .pill.g {
        background: var(--grnl);
        color: #0b4a38;
        border-color: #b6dcc9
    }

    .pill.r {
        background: var(--redl);
        color: #7d2a21;
        border-color: #e6b7af
    }

    .pill.a {
        background: var(--ambl);
        color: #6b4204;
        border-color: #e8d08a
    }

    .pill.e {
        background: var(--em);
        color: #fff;
        border-color: var(--em)
    }

.bar {
    height: 9px;
    border-radius: 99px;
    background: var(--line2);
    overflow: hidden
}

    .bar > i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg,var(--em2),var(--gold));
        border-radius: 99px
    }
/* tables */
.tw {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card)
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14.5px
}

th, td {
    padding: 11px 13px;
    text-align: left;
    border-bottom: 1px solid var(--line2);
    vertical-align: middle
}

th {
    font: 600 12px/1.2 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mut);
    background: var(--paper2);
    position: sticky;
    top: 0;
    white-space: nowrap
}

tr:last-child td {
    border-bottom: 0
}

tbody tr:hover {
    background: #faf6e8
}

td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums
}
/* shell */
.shell {
    display: grid;
    grid-template-columns: 260px minmax(0,1fr);
    min-height: 100vh
}

.side {
    background: linear-gradient(180deg,var(--em) 0%,var(--emd) 100%);
    color: #fff;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

    .side .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 8px 20px;
        border-bottom: 1px solid rgba(255,255,255,.15);
        margin-bottom: 14px
    }

        .side .brand img {
            width: 44px;
            height: 44px;
            border-radius: 9px;
            background: #fff;
            padding: 3px
        }

        .side .brand b {
            font: 700 15px/1.2 var(--serif);
            display: block
        }

        .side .brand span {
            font-size: 11px;
            letter-spacing: .14em;
            color: var(--gold2);
            text-transform: uppercase
        }

    .side nav a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 12px;
        border-radius: 8px;
        color: #dcece4;
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        margin-bottom: 2px;
        min-height: 44px
    }

        .side nav a:hover {
            background: rgba(255,255,255,.1);
            color: #fff
        }

        .side nav a.on {
            background: rgba(229,199,101,.18);
            color: #fff;
            box-shadow: inset 3px 0 0 var(--gold2)
        }

    .side nav .grp {
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gold2);
        padding: 16px 12px 6px
    }

    .side .me {
        margin-top: auto;
        padding: 14px 8px 0;
        border-top: 1px solid rgba(255,255,255,.15);
        font-size: 13.5px;
        color: #c9ddd3
    }

        .side .me b {
            color: #fff;
            display: block;
            overflow-wrap: anywhere
        }

        .side .me .btn {
            margin-top: 10px;
            width: 100%
        }

            .side .me .btn.ghost {
                color: #fff;
                border-color: rgba(255,255,255,.55)
            }

                .side .me .btn.ghost:hover {
                    background: rgba(255,255,255,.12);
                    color: #fff
                }

main {
    padding: 30px clamp(16px,3.2vw,44px) 60px;
    min-width: 0;
    max-width: 1240px;
    width: 100%
}

.top {
    display: none
}

.shell > div {
    min-width: 0
}

.tw {
    max-width: 100%
}

.pg-h {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

    .pg-h h1 {
        margin: 0
    }

    .pg-h p {
        margin: 4px 0 0;
        color: var(--ink2)
    }

@media(max-width:920px) {
    .shell {
        grid-template-columns: minmax(0,1fr)
    }

    .side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .2s;
        height: 100vh
    }

        .side.open {
            transform: none;
            box-shadow: 0 0 0 100vmax rgba(0,0,0,.45)
        }

    .top {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--em);
        color: #fff;
        padding: 10px 14px;
        position: sticky;
        top: 0;
        z-index: 40
    }

        .top button {
            background: none;
            border: 1.5px solid rgba(255,255,255,.5);
            color: #fff;
            border-radius: 8px;
            min-width: 44px;
            min-height: 44px;
            font-size: 20px;
            cursor: pointer
        }

        .top b {
            font-family: var(--serif)
        }
}
/* dark pages */
.dark {
    background: radial-gradient(1200px 600px at 80% -10%,#15694f 0%,transparent 60%),linear-gradient(160deg,var(--em) 0%,var(--emd) 100%);
    color: #fff;
    min-height: 100vh
}

    .dark h1, .dark h2, .dark h3 {
        color: #fff
    }

    .dark a {
        color: var(--gold2)
    }

    .dark .mut {
        color: #b9d3c7
    }

    .dark .card {
        background: var(--card);
        color: var(--ink)
    }

        .dark .card h1, .dark .card h2, .dark .card h3 {
            color: var(--em)
        }

        .dark .card a {
            color: var(--em2)
        }

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(16px,4vw,40px)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    flex-wrap: wrap
}

    .nav .l {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #fff;
        text-decoration: none
    }

    .nav img {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: #fff;
        padding: 3px
    }

    .nav .l b {
        font: 700 17px/1.1 var(--serif);
        color: #fff
    }

    .nav .l span {
        display: block;
        font-size: 11px;
        letter-spacing: .16em;
        color: var(--gold2);
        text-transform: uppercase
    }

.hero {
    padding: clamp(36px,7vw,84px) 0 clamp(36px,6vw,64px);
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    gap: 40px;
    align-items: center
}

@media(max-width:860px) {
    .hero {
        grid-template-columns: 1fr
    }
}

.kicker {
    font: 600 12px/1 var(--sans);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--goldt);
    margin-bottom: 14px;
    display: block
}

.hero h1 {
    font-size: clamp(32px,5.2vw,54px);
    margin-bottom: 18px
}

.hero p.lead {
    font-size: clamp(17px,2vw,20px);
    color: #d4e6dd;
    max-width: 36em
}

.cert-mini {
    background: var(--card);
    color: var(--ink);
    border-radius: 14px;
    padding: 26px;
    border: 2px solid var(--gold);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    position: relative
}

    .cert-mini::before {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid var(--goldl);
        border-radius: 8px;
        pointer-events: none
    }

.sec {
    padding: clamp(36px,6vw,64px) 0
}

    .sec.light {
        background: var(--paper);
        color: var(--ink)
    }

        .sec.light h2 {
            color: var(--em)
        }

.mods {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr))
}

.mod {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px;
    color: var(--ink)
}

    .mod b {
        font: 700 12px/1 var(--sans);
        color: var(--goldt);
        letter-spacing: .14em
    }

    .mod h4 {
        margin: .4em 0 .3em
    }

    .mod p {
        font-size: 14px;
        color: var(--ink2);
        margin: 0
    }
/* lesson content */
.prose {
    font-size: 17.5px;
    line-height: 1.75;
    max-width: 46em
}

    .prose p {
        margin-bottom: 1.1em
    }

    .prose h3 {
        margin-top: 1.6em
    }

    .prose ul, .prose ol {
        padding-left: 1.4em;
        margin: 0 0 1.1em
    }

    .prose li {
        margin-bottom: .45em
    }

.co {
    border-radius: 10px;
    padding: 16px 18px;
    margin: 1.3em 0;
    border: 1px solid;
    border-left-width: 5px;
    max-width: 46em;
    font-size: 16.5px;
    line-height: 1.65
}

    .co b.t {
        display: block;
        font: 700 13px/1 var(--sans);
        letter-spacing: .1em;
        text-transform: uppercase;
        margin-bottom: 8px
    }

    .co p:last-child {
        margin: 0
    }

    .co.note {
        background: #eef6f1;
        border-color: var(--em2)
    }

        .co.note b.t {
            color: var(--em2)
        }

    .co.insight {
        background: var(--ambl);
        border-color: var(--gold)
    }

        .co.insight b.t {
            color: #6b4204
        }

    .co.warn {
        background: #fbebe7;
        border-color: var(--red)
    }

        .co.warn b.t {
            color: var(--red)
        }

.fig {
    margin: 1.6em 0;
    max-width: 52em
}

    .fig img {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--paper);
        display: block
    }

    .fig figcaption {
        font-size: 14px;
        color: var(--mut);
        margin-top: 8px
    }

.formula {
    font: italic 600 21px/1.4 var(--serif);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 1.3em 0;
    max-width: 46em;
    text-align: center;
    overflow-x: auto
}

    .formula small {
        display: block;
        font: 13px var(--sans);
        color: var(--mut);
        font-style: normal;
        margin-top: 4px
    }

.dtable {
    margin: 1.4em 0;
    max-width: 52em
}

    .dtable .tw table {
        font-size: 15px
    }

    .dtable caption {
        caption-side: bottom;
        text-align: left;
        font-size: 13.5px;
        color: var(--mut);
        padding: 8px 2px
    }

.refs {
    border-top: 2px solid var(--gold);
    margin-top: 2em;
    padding-top: 1em;
    max-width: 46em;
    font-size: 14.5px;
    color: var(--ink2)
}

    .refs h4 {
        font-family: var(--sans);
        letter-spacing: .1em;
        text-transform: uppercase;
        font-size: 12px;
        color: var(--mut)
    }

    .refs li {
        margin-bottom: .5em;
        padding-left: 1.5em;
        text-indent: -1.5em;
        list-style: none
    }

.prac {
    background: #fff;
    border: 1.5px solid var(--gold);
    border-radius: 12px;
    padding: 20px;
    margin: 1.8em 0;
    max-width: 52em;
    box-shadow: var(--sh)
}

    .prac > .ph {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        margin-bottom: 12px;
        flex-wrap: wrap
    }

        .prac > .ph b {
            font: 700 12px/1 var(--sans);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--goldt)
        }
/* items */
.stem {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 14px
}

.opts {
    display: grid;
    gap: 9px
}

.opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 9px;
    padding: 12px 14px;
    font: 16px/1.5 var(--sans);
    color: var(--ink);
    cursor: pointer;
    min-height: 48px
}

    .opt:hover {
        border-color: var(--em2);
        background: #f6fbf8
    }

    .opt .k {
        flex: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1.5px solid var(--line);
        display: grid;
        place-items: center;
        font: 700 13px var(--sans);
        color: var(--mut);
        background: var(--paper)
    }

    .opt.sel {
        border-color: var(--em);
        background: #eef6f1;
        box-shadow: inset 0 0 0 1px var(--em)
    }

        .opt.sel .k {
            background: var(--em);
            color: #fff;
            border-color: var(--em)
        }

    .opt.ok {
        border-color: var(--grn);
        background: var(--grnl)
    }

    .opt.no {
        border-color: var(--red);
        background: var(--redl)
    }

.ib {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff
}

    .ib .ir {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 12px;
        padding: 11px 13px;
        border-bottom: 1px solid var(--line2);
        align-items: center
    }

        .ib .ir:last-child {
            border: 0
        }

.ir.ok {
    background: var(--grnl)
}

.ir.no {
    background: var(--redl)
}

.ir select {
    width: auto;
    max-width: 100%;
    min-width: 150px;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 15px
}

@media(max-width:560px) {
    .ib .ir {
        grid-template-columns: 1fr
    }

    .ir select {
        width: 100%
    }
}

.mx {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 10px
}

    .mx table {
        min-width: 520px
    }

    .mx td, .mx th {
        padding: 8px 10px
    }

        .mx th.h {
            white-space: normal;
            max-width: 180px;
            font-size: 12px;
            text-transform: none;
            letter-spacing: 0
        }

.cb {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px
}

    .cb button {
        width: 38px;
        height: 38px;
        border: 1.5px solid var(--line);
        background: #fff;
        border-radius: 7px;
        font: 700 14px var(--sans);
        cursor: pointer;
        color: var(--mut)
    }

        .cb button.C.on {
            background: var(--grnl);
            border-color: var(--grn);
            color: var(--grn)
        }

        .cb button.I.on {
            background: var(--redl);
            border-color: var(--red);
            color: var(--red)
        }

        .cb button.N.on {
            background: var(--paper2);
            border-color: var(--mut);
            color: var(--ink)
        }

        .cb button.ok {
            box-shadow: 0 0 0 3px var(--grn)
        }

.ord {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

    .ord li {
        display: grid;
        grid-template-columns: 34px minmax(0,1fr) auto;
        gap: 10px;
        align-items: center;
        background: #fff;
        border: 1.5px solid var(--line);
        border-radius: 9px;
        padding: 9px 12px
    }

    .ord .n {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--em);
        color: #fff;
        display: grid;
        place-items: center;
        font: 700 13px var(--sans)
    }

    .ord button {
        border: 1.5px solid var(--line);
        background: var(--paper);
        border-radius: 6px;
        width: 36px;
        height: 36px;
        cursor: pointer;
        font-size: 15px
    }

.tt td, .tt th {
    text-align: center
}

.tt button {
    min-width: 44px;
    min-height: 38px;
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 7px;
    font: 700 15px var(--sans);
    cursor: pointer
}

    .tt button.on {
        background: var(--em);
        color: #fff;
        border-color: var(--em)
    }

.tt tr.sel td {
    background: #fff6d6
}

.fb {
    margin-top: 14px;
    border-radius: 9px;
    padding: 14px 16px;
    font-size: 15.5px;
    line-height: 1.6
}

    .fb.ok {
        background: var(--grnl);
        border: 1px solid #b6dcc9
    }

    .fb.no {
        background: var(--redl);
        border: 1px solid #e6b7af
    }

    .fb.part {
        background: var(--ambl);
        border: 1px solid #e8d08a
    }

    .fb b {
        display: block;
        margin-bottom: 4px
    }

.dagsvg {
    width: 100%;
    max-width: 560px;
    height: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: block;
    margin-bottom: 12px
}

.wc {
    font-size: 13px;
    color: var(--mut);
    text-align: right;
    margin-top: 4px
}

    .wc.bad {
        color: var(--red);
        font-weight: 600
    }
/* runner */
.runner {
    display: grid;
    grid-template-columns: minmax(0,1fr) 250px;
    gap: 22px;
    align-items: start
}

@media(max-width:900px) {
    .runner {
        grid-template-columns: 1fr
    }
}

.qnav {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(40px,1fr));
    gap: 7px
}

    .qnav button {
        height: 40px;
        border-radius: 8px;
        border: 1.5px solid var(--line);
        background: #fff;
        font-weight: 700;
        cursor: pointer
    }

        .qnav button.done {
            background: var(--grnl);
            border-color: var(--grn)
        }

        .qnav button.cur {
            box-shadow: 0 0 0 3px var(--gold)
        }

.timer {
    font: 700 28px var(--serif);
    color: var(--em);
    font-variant-numeric: tabular-nums
}

    .timer.low {
        color: var(--red)
    }

.sticky {
    position: sticky;
    top: 18px
}

.score-ring {
    width: 150px;
    height: 150px
}

.steps {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

    .steps a {
        padding: 8px 14px;
        border-radius: 99px;
        border: 1.5px solid var(--line);
        text-decoration: none;
        color: var(--ink2);
        font-weight: 600;
        font-size: 14px;
        background: #fff
    }

        .steps a.on {
            background: var(--em);
            color: #fff;
            border-color: var(--em)
        }

        .steps a.done::after {
            content: " \2713";
            color: var(--grn)
        }

        .steps a.on.done::after {
            color: var(--gold2)
        }

.mcard {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    gap: 16px;
    align-items: center
}

    .mcard .no {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--em);
        color: #fff;
        display: grid;
        place-items: center;
        font: 700 19px var(--serif)
    }

    .mcard.lock {
        opacity: .6
    }

    .mcard.passed .no {
        background: var(--gold)
    }

@media(max-width:620px) {
    .mcard {
        grid-template-columns: 44px minmax(0,1fr)
    }

        .mcard > :last-child {
            grid-column: 1/-1
        }
}

.rpl {
    display: inline-flex;
    gap: 3px;
    align-items: center
}

    .rpl i {
        width: 14px;
        height: 14px;
        border-radius: 3px;
        background: var(--line2);
        display: block
    }

        .rpl i.on {
            background: var(--gold)
        }

.hm td.cell {
    text-align: center;
    font: 600 13px var(--sans);
    min-width: 56px
}

.modal-b {
    position: fixed;
    inset: 0;
    background: rgba(6,40,30,.6);
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 16px
}

.modal {
    background: var(--card);
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    padding: 26px;
    box-shadow: 0 30px 80px rgba(0,0,0,.4)
}

    .modal.wide {
        max-width: 860px
    }

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    background: var(--em);
    color: #fff;
    padding: 13px 22px;
    border-radius: 10px;
    z-index: 200;
    max-width: 92vw;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    font-weight: 500
}

    .toast.bad {
        background: var(--red)
    }

.empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--mut)
}

    .empty b {
        display: block;
        font: 700 18px var(--serif);
        color: var(--em);
        margin-bottom: 6px
    }

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--line);
    margin-bottom: 20px;
    overflow-x: auto
}

    .tabs button {
        background: none;
        border: 0;
        padding: 12px 16px;
        font: 600 15px var(--sans);
        color: var(--ink2);
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        white-space: nowrap;
        min-height: 44px
    }

        .tabs button.on {
            color: var(--em);
            border-color: var(--gold)
        }

.fun {
    display: grid;
    gap: 8px
}

    .fun .fr {
        display: grid;
        grid-template-columns: 130px minmax(0,1fr) 44px;
        gap: 10px;
        align-items: center;
        font-size: 14px
    }

    .fun .fb2 {
        height: 22px;
        background: var(--line2);
        border-radius: 5px;
        overflow: hidden
    }

        .fun .fb2 i {
            display: block;
            height: 100%;
            background: linear-gradient(90deg,var(--em),var(--em2))
        }

@media(max-width:520px) {
    .fun .fr {
        grid-template-columns: 96px minmax(0,1fr) 36px
    }
}

.strength {
    height: 6px;
    border-radius: 99px;
    background: var(--line2);
    margin-top: 8px;
    overflow: hidden
}

    .strength i {
        display: block;
        height: 100%;
        width: 0;
        transition: width .2s,background .2s
    }

.seal {
    width: 110px;
    height: 110px
}
/* certificate */
.cert {
    background: #fffdf5;
    border: 3px double var(--gold);
    border-radius: 6px;
    padding: clamp(22px,5vw,56px);
    text-align: center;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    color: var(--ink)
}

    .cert::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid var(--goldl);
        pointer-events: none
    }

    .cert .lg {
        display: flex;
        justify-content: center;
        gap: 18px;
        align-items: center;
        margin-bottom: 10px
    }

        .cert .lg img {
            width: 64px;
            height: 64px;
            border-radius: 10px
        }

    .cert h1 {
        font-size: clamp(24px,3.6vw,36px);
        margin: .3em 0
    }

    .cert .nm {
        font: italic 700 clamp(30px,5vw,48px)/1.15 var(--serif);
        color: var(--ink);
        border-bottom: 2px solid var(--gold);
        display: inline-block;
        padding: 0 .4em .1em;
        margin: .3em 0 .5em;
        overflow-wrap: anywhere
    }

    .cert .code {
        font: 600 15px ui-monospace,Menlo,Consolas,monospace;
        letter-spacing: .08em
    }

    .cert .sig {
        display: flex;
        justify-content: space-around;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 28px
    }

        .cert .sig div {
            min-width: 200px;
            border-top: 1px solid var(--ink);
            padding-top: 6px;
            font-size: 14px
        }

    .cert .fine {
        font-size: 12.5px;
        color: var(--mut);
        max-width: 42em;
        margin: 20px auto 0
    }

@page stats {
    size: A4 portrait;
    margin: 12mm
}

.stats-doc {
    page: stats
}

@media print {
    .stats-doc .card {
        break-inside: avoid;
        box-shadow: none
    }

    .stats-doc svg {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }

    .side, .top, .nonprint {
        display: none !important
    }
}

@media print {
    body {
        background: #fff
    }

    .nonprint, .side, .top, .btn {
        display: none !important
    }

    .cert {
        border-color: #b8891a;
        box-shadow: none
    }
}

.cert-mini h3 {
    color: #0b3d2e !important;
    font-size: 20px;
    line-height: 1.25
}

.cert-mini .mut, .cert-mini .sm {
    color: #4a5a52 !important
}

.cert-mini .c {
    text-align: center
}
/* two-step verification */
.linkbtn {
    background: none;
    border: 0;
    padding: 4px 0;
    color: var(--em);
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer
}

.dark .linkbtn {
    color: var(--em2)
}

.rcodes {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 8px;
    margin: 14px 0
}

    .rcodes code {
        display: block;
        text-align: center;
        background: #f3efe2;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px 6px;
        font: 700 17px ui-monospace,Menlo,Consolas,monospace;
        letter-spacing: .08em;
        color: #0b4a38
    }

.steps {
    padding-left: 22px;
    margin: 0
}

    .steps > li {
        margin: 0 0 22px
    }

        .steps > li > b {
            display: block;
            margin-bottom: 6px
        }

.qrbox {
    display: inline-block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 6px 0
}

    .qrbox svg {
        display: block;
        max-width: 100%;
        height: auto
    }

.manual {
    margin-top: 8px
}

    .manual summary {
        cursor: pointer;
        color: var(--em);
        font-size: 14px
    }

.skey {
    display: block;
    word-break: break-all;
    background: #f3efe2;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    font: 700 16px ui-monospace,Menlo,Consolas,monospace;
    letter-spacing: .06em;
    margin-top: 6px;
    color: #0b4a38
}

@media print {
    body.print-codes * {
        visibility: hidden
    }

    body.print-codes .rec-wrap, body.print-codes .rec-wrap * {
        visibility: visible
    }

    body.print-codes .rec-wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%
    }

        body.print-codes .rec-wrap button, body.print-codes .rec-wrap label, body.print-codes .rec-wrap .row {
            display: none
        }
}
/* ---- certificate document (A4 landscape, 1123 x 794 css px) ---- */
.certdoc {
    width: 100%;
    position: relative;
    overflow: hidden
}

.cstage {
    width: 1123px;
    transform: scale(var(--cs,1));
    transform-origin: 0 0;
    display: grid;
    gap: 24px
}

.cpage {
    position: relative;
    width: 1123px;
    height: 794px;
    background: #fffdf5;
    color: #1d2a26;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(6,40,30,.25);
    font-family: Georgia,'Times New Roman',serif;
    break-after: page
}

    .cpage .cband {
        position: absolute;
        inset: 0;
        border: 14px solid #0b4a38;
        pointer-events: none
    }

    .cpage .cline {
        position: absolute;
        inset: 14px;
        border: 3px double #b8891a;
        pointer-events: none
    }

    .cpage .cc {
        position: absolute;
        width: 60px;
        height: 60px
    }

.cc.tl {
    left: 22px;
    top: 22px
}

.cc.tr {
    right: 22px;
    top: 22px;
    transform: scaleX(-1)
}

.cc.bl {
    left: 22px;
    bottom: 22px;
    transform: scaleY(-1)
}

.cc.br {
    right: 22px;
    bottom: 22px;
    transform: scale(-1,-1)
}

.cwm {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    opacity: .055;
    pointer-events: none
}

.cin {
    position: absolute;
    inset: 44px 62px 40px;
    display: flex;
    flex-direction: column;
    text-align: center
}

.chead {
    display: grid;
    grid-template-columns: 230px 1fr 230px;
    align-items: center;
    gap: 10px;
    min-height: 92px
}

    .chead .hl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        text-align: left
    }

    .chead .orglogo {
        max-width: 210px;
        max-height: 72px;
        object-fit: contain
    }

    .chead .orgn {
        font: 700 13px/1.25 Georgia,serif;
        color: #0b4a38;
        max-width: 220px
    }

    .chead .hr {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px
    }

    .chead .alx {
        display: flex;
        gap: 8px
    }

        .chead .alx img {
            width: 58px;
            height: 58px;
            border-radius: 9px;
            background: #fff;
            border: 1px solid #d9d0b4;
            padding: 2px
        }

    .chead .alxn {
        font: 700 10px Georgia,serif;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #6b4d00
    }

    .chead .kick {
        font: 700 12px Georgia,serif;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: #6b4d00
    }

    .chead .cert-of {
        font: italic 400 26px Georgia,serif;
        color: #0b4a38;
        margin-top: 4px
    }

.ctitle {
    font: 700 33px/1.2 Georgia,serif;
    color: #0b4a38;
    margin: 14px 0 8px;
    letter-spacing: .01em
}

.cthat {
    margin: 6px 0 0;
    font: italic 17px Georgia,serif;
    color: #44534d
}

.cname {
    align-self: center;
    font: italic 700 58px/1.1 Georgia,serif;
    color: #1d2a26;
    border-bottom: 2px solid #b8891a;
    padding: 0 40px 8px;
    margin: 12px 0 16px;
    max-width: 100%;
    overflow-wrap: anywhere
}

.cbody {
    max-width: 800px;
    align-self: center;
    margin: 0 0 6px;
    font: 17px/1.6 Georgia,serif;
    color: #2c3a35
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin: auto 0
}

.stat {
    border: 1px solid #d9d0b4;
    border-top: 3px solid #b8891a;
    background: #fbf8ee;
    padding: 14px 6px 12px
}

    .stat b {
        display: block;
        font: 700 30px Georgia,serif;
        color: #0b4a38
    }

    .stat span {
        font: 11px Georgia,serif;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #6b7a74
    }

.cbot {
    display: grid;
    grid-template-columns: 1fr 124px 1fr;
    gap: 16px;
    align-items: end;
    margin-top: auto;
    padding-bottom: 6px
}

.sigs {
    display: flex;
    gap: 26px;
    justify-content: flex-start;
    text-align: left
}

.sg {
    min-width: 190px;
    max-width: 260px
}

    .sg .sline {
        border-top: 1.5px solid #1d2a26;
        margin-bottom: 5px;
        height: 38px
    }

    .sg b {
        display: block;
        font: 700 15px Georgia,serif
    }

    .sg span {
        display: block;
        font: 13px/1.3 Georgia,serif;
        color: #44534d
    }

.cseal {
    display: flex;
    justify-content: center
}

.cver {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: left
}

    .cver .qr {
        background: #fff;
        padding: 3px;
        border: 1px solid #d9d0b4
    }

        .cver .qr svg {
            display: block;
            width: 96px;
            height: 96px
        }

    .cver .vt b {
        display: block;
        font: 700 13px ui-monospace,Menlo,Consolas,monospace;
        letter-spacing: .04em;
        color: #0b4a38
    }

    .cver .vt span {
        display: block;
        font: 12px/1.4 Georgia,serif;
        color: #44534d
    }

.cfoot {
    border-top: 1px solid #d9d0b4;
    padding-top: 6px;
    margin-top: 6px
}

    .cfoot .cdis {
        font: 10.5px/1.4 Georgia,serif;
        color: #6b7a74;
        max-width: 960px;
        margin: 0 auto
    }

.cfoot {
    padding-left: 36px;
    padding-right: 36px
}

    .cfoot .cmeta {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        font: 10.5px Georgia,serif;
        color: #44534d;
        margin-top: 4px
    }

.chead.small {
    min-height: 70px
}

.rname {
    margin: 8px 0 12px;
    font: 15px Georgia,serif;
    color: #44534d
}

.r2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    text-align: left;
    flex: 1
}

    .r2 h3 {
        font: 700 15px Georgia,serif;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #0b4a38;
        margin: 0 0 8px;
        border-bottom: 2px solid #b8891a;
        padding-bottom: 4px
    }

.rt {
    width: 100%;
    border-collapse: collapse;
    font: 15px Georgia,serif
}

    .rt th {
        font: 700 11px Georgia,serif;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #6b7a74;
        text-align: left;
        padding: 3px 6px
    }

    .rt td {
        padding: 8px 6px;
        border-bottom: 1px solid #e9e2cb
    }

    .rt .num {
        text-align: right;
        white-space: nowrap
    }

    .rt .tot td {
        font-weight: 700;
        background: #fbf8ee
    }

.comp {
    display: grid;
    gap: 0
}

.cr {
    display: grid;
    grid-template-columns: 1fr auto 28px;
    gap: 8px;
    align-items: center;
    padding: 6.2px 0;
    border-bottom: 1px solid #e9e2cb;
    font: 14px Georgia,serif
}

    .cr em {
        font: 700 11.5px ui-monospace,Menlo,Consolas,monospace;
        color: #44534d;
        font-style: normal
    }

    .cr .dots {
        display: flex;
        gap: 3px
    }

        .cr .dots i {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            border: 1.5px solid #b8891a;
            display: block
        }

            .cr .dots i.on {
                background: #b8891a
            }

.note2 {
    font: 12px/1.45 Georgia,serif;
    color: #6b7a74;
    margin: 8px 0 0
}

.samp {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-18deg);
    font: 700 150px Georgia,serif;
    letter-spacing: .1em;
    color: rgba(163,58,47,.13);
    pointer-events: none
}

@media print {
    html, body {
        background: #fff !important
    }

        body.dark {
            background: #fff !important
        }

    .certdoc {
        width: 1122px !important;
        height: auto !important;
        overflow: visible
    }

    .cstage {
        transform: none !important;
        gap: 0;
        width: 1122px
    }

    .cpage {
        width: 1122px;
        height: 793px;
        box-shadow: none
    }

        .cpage:last-child {
            break-after: auto
        }

    @page {
        size: A4 landscape;
        margin: 0
    }

    #app > .wrap {
        max-width: none !important;
        padding: 0 !important
    }

        #app > .wrap > *:not(.cwrap) {
            display: none !important
        }

    .cwrap {
        margin: 0 !important
    }

    .nonprint, .side, .top, .btn, .toast {
        display: none !important
    }

    .cpage .cband, .cpage .cline, .cpage .cc, .cwm, .stat, .cr .dots i, .cseal, .tot td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact
    }
}
/* footer */
.site-foot {
    background: #06281e;
    color: #c9ddd3;
    font: 13px/1.5 var(--sans);
    padding: 16px;
    margin-top: auto;
    border-top: 3px solid #b8891a;
    position: relative;
    z-index: 1
}

    .site-foot .sf-in {
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 12px 24px;
        flex-wrap: wrap;
        align-items: center
    }

    .site-foot .sf-l {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap
    }

    .site-foot img {
        border-radius: 6px;
        background: #fff;
        padding: 2px
    }

    .site-foot nav {
        display: flex;
        gap: 6px 18px;
        flex-wrap: wrap
    }

    .site-foot a {
        color: #e5c765;
        text-decoration: underline
    }

.shell + .site-foot, #app + .site-foot {
    margin-top: 0
}

img[src$="splashwsa.png"], img[src$="anllc.png"] {
    object-fit: contain
}

.bbb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px 22px;
    flex-wrap: wrap;
    background: #fff;
    color: #14231c;
    border: 2px solid #b8891a;
    border-radius: 14px;
    padding: 12px 18px;
    max-width: 760px;
    margin: 0 auto;
    font: 13px/1.4 var(--sans);
    box-shadow: 0 2px 10px rgba(0,0,0,.12)
}

    .bbb .bbb-seal {
        display: block;
        line-height: 0
    }

        .bbb .bbb-seal img {
            display: block;
            width: 250px;
            max-width: 100%;
            height: auto;
            border: 0;
            background: none;
            padding: 0;
            border-radius: 0
        }

    .bbb .bbb-t {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 150px;
        text-align: left
    }

        .bbb .bbb-t b {
            font: 700 15px/1.2 var(--serif,Georgia,serif);
            color: #0b4a38
        }

        .bbb .bbb-t span {
            color: #4a5a52
        }

        .bbb .bbb-t a {
            color: #0b4a38;
            text-decoration: underline;
            margin-top: 3px;
            font-weight: 600
        }

    .bbb .bbb-q {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        color: #4a5a52;
        text-decoration: none
    }

        .bbb .bbb-q img {
            width: 88px;
            height: 88px;
            border: 1px solid #d9d0b4;
            border-radius: 6px;
            padding: 0;
            background: #fff
        }

        .bbb .bbb-q small {
            font-size: 11px
        }

    .bbb .bbb-fb {
        display: inline-block;
        padding: 14px 18px;
        border-radius: 8px;
        background: #0b4a38;
        color: #fff;
        font-weight: 700
    }

.sf-bbb {
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.15)
}

#bbb-slot {
    margin: 6px auto 0;
    max-width: 1180px;
    padding: 26px 16px 0
}

@media (max-width:520px) {
    .bbb {
        flex-direction: column;
        text-align: center
    }

        .bbb .bbb-t {
            align-items: center;
            text-align: center
        }
}

.cfoot .cbbb {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

    .cfoot .cbbb img {
        width: 26px;
        height: 26px;
        border: 1px solid #d9d0b4
    }

.chead .bbbrow {
    margin-top: 4px;
    line-height: 0
}

.chead .bbbseal {
    height: 24px;
    width: auto;
    border: 0;
    background: none;
    padding: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
}

@media print {
    .chead .bbbseal {
        height: 24px
    }
}

/* two-minute code window on the sign-in code screen */
.mfa-timer {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--paper2);
    --tc: var(--em2)
}

    .mfa-timer .mt-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px
    }

    .mfa-timer .mt-l {
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--ink2)
    }

    .mfa-timer .mt-clock {
        font: 700 30px/1 ui-monospace,Menlo,Consolas,monospace;
        color: var(--tc);
        font-variant-numeric: tabular-nums
    }

    .mfa-timer .mt-bar {
        height: 6px;
        border-radius: 99px;
        background: var(--line2);
        margin: 9px 0 7px;
        overflow: hidden
    }

        .mfa-timer .mt-bar i {
            display: block;
            height: 100%;
            width: 100%;
            background: var(--tc);
            border-radius: 99px;
            transition: width .25s linear,background-color .3s
        }

    .mfa-timer .mt-note {
        font-size: 13px;
        color: var(--ink2)
    }

    .mfa-timer.warn {
        --tc: var(--amb);
        background: var(--ambl);
        border-color: var(--amb)
    }

    .mfa-timer.crit {
        --tc: var(--red);
        background: var(--redl);
        border-color: var(--red)
    }

        .mfa-timer.crit .mt-note {
            font-weight: 700;
            color: var(--red)
        }

    .mfa-timer.out {
        --tc: var(--red);
        background: var(--redl);
        border-color: var(--red)
    }

        .mfa-timer.out .mt-note {
            font-weight: 700;
            color: var(--red)
        }

@media (prefers-reduced-motion:reduce) {
    .mfa-timer .mt-bar i {
        transition: none
    }
}

/* ---- Accessibility (WCAG 2.2 AA) ---- */
.hero .kicker, .side .kicker, .site-foot .kicker {
    color: var(--gold2)
}

a {
    overflow-wrap: anywhere
}

.btn {
    max-width: 100%;
    white-space: normal;
    text-align: center
}

.site-foot a, .bbb a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 3px
}

.site-foot nav a {
    margin: 0 2px
}

.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000;
    background: var(--em);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 10px 10px;
    font: 700 15px/1.2 var(--sans);
    text-decoration: none;
    border: 2px solid var(--gold2);
    transition: top .15s
}

    .skip:focus {
        top: 0;
        color: #fff;
        outline: 3px solid #fff;
        outline-offset: 0;
        box-shadow: 0 0 0 6px var(--em)
    }

[role=main]:focus, main:focus {
    outline: none
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

@media (forced-colors:active) {
    .btn, .opt, .card, .pill, input, select, textarea {
        border: 1px solid ButtonText !important
    }

    :focus-visible {
        outline: 3px solid Highlight !important
    }

    .btn.sel, .opt.sel {
        outline: 2px solid Highlight
    }
}

.dark .card .mut {
    color: var(--mut)
}

.dark .card .ink2 {
    color: var(--ink2)
}

body:not(.dark) .nav .l b {
    color: var(--em)
}

body:not(.dark) .nav .l span {
    color: var(--goldt)
}

body:not(.dark) .nav .l {
    color: var(--em)
}

body:not(.dark) .nav .btn.ghost {
    color: var(--em);
    border-color: var(--ctl);
    background: transparent
}

td a, th a, .fld a, a.sm, p > a:only-child, .hint a {
    display: inline-block;
    padding: 3px 2px;
    min-height: 24px
}

sup a {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    text-align: center;
    line-height: 24px;
    padding: 0
}

.pill.g, .opt.ok .k {
    color: #0b4a38
}

.co.warn b.t {
    color: #7a2018
}

.cb button.C.on {
    color: #0b4a38
}

.bbb :focus-visible {
    outline-color: var(--em)
}

input[type=file] {
    min-height: 44px;
    padding: 10px 8px;
    max-width: 100%
}
/* Language picker in the footer (added by i18n.js) */
.lang-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #c9ddd3;
    font: 13px/1.4 var(--sans);
    max-width: 100%;
    flex-wrap: wrap;
    white-space: nowrap
}

.pdf-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.pdf-lang {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--ink2,#44524c)
}

    .pdf-lang select {
        min-height: 40px;
        padding: 6px 10px;
        font-size: 15px;
        max-width: 100%;
        width: auto;
        border: 1px solid var(--line,#d9d0b4);
        border-radius: 8px;
        background: #fff;
        color: var(--ink,#1d2a26)
    }

@media(max-width:560px) {
    .pdf-row, .pdf-lang {
        width: 100%
    }

        .pdf-lang select {
            flex: 1 1 auto
        }
}

.lang-box select {
    background: #0b3a2b;
    color: #f4e6b8;
    border: 1px solid #b8891a;
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 44px;
    font: 14px var(--sans);
    max-width: 100%
}

    .lang-box select:focus-visible {
        outline: 3px solid var(--gold2);
        outline-offset: 2px
    }
/* Right-to-left languages (Arabic): mirror the layout and keep long words inside their boxes */
html[dir=rtl] body {
    text-align: start
}

html[dir=rtl] .site-foot .sf-in, html[dir=rtl] .side nav a {
    direction: rtl
}

html[lang=hi] body, html[lang=ar] body, html[lang=ja] body, html[lang=ko] body, html[lang=zh] body {
    line-height: 1.6
}

body, .card, .btn, button, td, th, label, p, h1, h2, h3, li {
    overflow-wrap: anywhere
}