/* learn base shell
 *
 * Lifted out of base_learn.html so it is fetched ONCE and
 * then served from cache for every following page. It used to be an
 * inline <style> block, which meant every navigation re-downloaded the
 * same 14 KB of rules that had not changed -- the wrong trade for a
 * course site, where a learner walks through 63 lessons in one sitting.
 *
 * Page-specific rules stay inline in their own template on purpose:
 * those genuinely differ per page and belong in the document.
 */
/* Light-only by design: the main site treats dark mode as opt-in, and
           learn has no theme toggle yet, so there is no prefers-color-scheme
           block here. Add tokens for both themes together if that changes. */
        :root {
            /* The identity's own indigo, taken from the mark's plate, not a
               generic UI blue. #2563eb sat between the CSEO tier blue (#2878B5)
               and this indigo and matched neither, so every primary button read
               as a fourth blue that belonged to nothing. */
            --brand: #17307A;
            --brand-dark: #0F2059;
            --ink: #0f172a;
            --ink-soft: #334155;
            /* #64748b measured 4.48:1 on the CSEP paper -- a hair under the
               4.5 AA needs for small text, and this token is what the price
               label and the struck former price are painted in. Darkened
               just enough to clear it on every tier background. */
            --ink-muted: #5b6779;
            --line: #e2e8f0;
            --surface: #ffffff;
            --surface-alt: #f8fafc;
            --header-dark: #1a1d29;
            --radius: 14px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--surface);
            color: var(--ink);
            line-height: 1.6;
            min-width: 320px;
            /* Both declarations, in this order, on purpose.
               overflow-x: hidden makes the body a scroll container, which
               silently breaks position:sticky on every descendant -- the
               apply wizard's pay bar scrolls away instead of holding to the
               viewport. overflow-x: clip clips exactly the same way WITHOUT
               creating a scroll container, so sticky keeps working. Browsers
               too old to know `clip` ignore that line and keep `hidden`,
               landing back on the old behaviour rather than on a page that
               scrolls sideways. */
            overflow-x: hidden;
            overflow-x: clip;
            /* Sticky footer: short pages (e.g. /verify/) used to leave the
               footer floating mid-screen with blank space beneath it. dvh so
               mobile browser chrome does not cause a phantom scroll. */
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
        }
        main { flex: 1 0 auto; }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; height: auto; }

        .learn-shell { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

        /* ── Header ── */
        .learn-header {
            background: var(--header-dark);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .learn-header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            /* Sticky, so every pixel here is taken off the content area on
               every page and every scroll position. 52 is the floor that still
               clears the 26px mark with a comfortable optical margin. */
            height: 52px;
        }
        .learn-brand { display: flex; align-items: center; gap: 0.6rem; }
        .learn-brand img { width: 26px; height: 26px; }
        .learn-brand-text { color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
        /* The lockup is ISE alone. The parent belongs in the copy, not
           beside the mark: two names in one lockup is two brands competing for
           the same glance, and "by Trusted Rw" says more where a sentence can
           carry it -- the standfirst, and the issuing line on every card. */
        /* ── Navigation ───────────────────────────────────────────────────
           Words, not icons. Every link used to carry a Font Awesome glyph in
           front of its label, which at 0.88rem reads as a toolbar rather than
           as navigation; and below the breakpoint the labels were hidden,
           leaving three undecodable glyphs in a row -- an award, a magnifier
           and a gauge. The rule that hid them (`.learn-nav a span`) could not
           reach Sign out, because that one is a <button> inside a form, so the
           least important and most destructive action was the only thing in
           the header still wearing a word.

           Labels always, icons never, and on a phone a real menu behind a
           burger instead of a row of mysteries. No JavaScript: the menu is a
           checkbox and a label, the same mechanism the forum header uses, so
           it cannot be left stuck open by a script that failed to load. */
        .learn-nav { display: flex; align-items: center; gap: 1.6rem; }
        .learn-nav a,
        .learn-linkbtn {
            display: inline-flex; align-items: center;
            background: none; border: 0; padding: 0; cursor: pointer;
            font: inherit; font-size: 0.88rem; font-weight: 500;
            color: rgba(255, 255, 255, 0.72);
            white-space: nowrap;
            transition: color 0.15s ease;
        }
        .learn-nav a:hover, .learn-linkbtn:hover { color: #fff; }
        /* Which page you are on. Without it the header looks identical on all
           four pages, and the light blue is the one the LEARN tag already
           uses -- the header gets no new colour out of this. */
        .learn-nav a.is-on { color: #fff; font-weight: 600; position: relative; }
        .learn-nav a.is-on::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: -7px;
            height: 2px; background: #93c5fd; border-radius: 2px;
        }
        /* Signing out is not a destination, so it does not sit in the row of
           places you can go: it is past a divider and a shade quieter. */
        .learn-account { display: flex; align-items: center; gap: 1.6rem; }
        .learn-account::before {
            content: ''; width: 1px; height: 17px; background: rgba(255, 255, 255, 0.16);
        }
        .learn-account .learn-linkbtn { color: rgba(255, 255, 255, 0.55); }

        /* ── The phone menu ── */
        /* Visually hidden rather than display:none: a checkbox that cannot be
           focused is a menu that cannot be opened from a keyboard. */
        .learn-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
        .learn-burger {
            display: none;
            align-items: center; justify-content: center;
            width: 42px; height: 42px; margin-right: -0.55rem;
            color: #fff; font-size: 1.02rem; cursor: pointer;
            border-radius: 9px;
            transition: background 0.15s ease;
        }
        .learn-burger:hover { background: rgba(255, 255, 255, 0.08); }
        .learn-menu-toggle:checked ~ .learn-shell .learn-burger { background: rgba(255, 255, 255, 0.12); }
        /* Hidden at every width by default. Declared only inside the media
           query it renders as a second nav row on every desktop page. */
        .learn-menu { display: none; }

        /* ── Footer ── */
        /* No margin-top here: <main> already absorbs the slack, and a margin
           would push the footer past the viewport and invent a scrollbar on
           short pages. Breathing room above it belongs to each page's own
           bottom padding, so ANY page long enough to scroll must set one or its
           last element will touch the footer. Not done globally on <main>
           because the application wizard is tuned to fit a step without
           scrolling and extra padding would break that. */
        .learn-footer {
            background: var(--header-dark);
            color: rgba(255, 255, 255, 0.6);
            margin-top: 0;
            padding: 2rem 0;
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .learn-footer-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .learn-footer a { color: rgba(255, 255, 255, 0.75); }
        .learn-footer a:hover { color: #fff; text-decoration: underline; }
        .learn-footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

        /* 780, not 640: the labels are words now, and "Certifications Verify
           My learning | Sign out" alongside the brand needs about 620px of
           header before it starts crowding the mark. Measured, not guessed --
           move it only with a screenshot in hand. */
        @media (max-width: 780px) {
            .learn-nav { display: none; }
            .learn-burger { display: inline-flex; }
            .learn-menu-toggle:checked ~ .learn-menu { display: block; }
            .learn-menu {
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                padding-bottom: 0.6rem;
            }
            /* Full-width rows, each one a comfortable target, each one with
               its name on it. */
            .learn-menu a,
            .learn-menu .learn-linkbtn {
                display: flex; align-items: center; width: 100%;
                min-height: 48px; padding: 0.55rem 0;
                font-size: 0.98rem; font-weight: 500; text-align: left;
                color: rgba(255, 255, 255, 0.82);
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            }
            .learn-menu a.is-on { color: #fff; font-weight: 600; }
            /* Same rule as on the desktop row: the way out is not a
               destination. Last item, no rule under it, quieter. */
            .learn-menu form { margin-top: 0.35rem; }
            .learn-menu .learn-linkbtn {
                border-bottom: 0;
                color: rgba(255, 255, 255, 0.55);
            }
            /* Signed out, the last row is Sign in (an <a>) rather than the
               Sign out <button>, and it was leaving a hairline hanging under
               the end of the menu. Signed in this matches nothing: the last
               child is the logout <form>, so every anchor keeps its rule. */
            .learn-menu a:last-child { border-bottom: 0; }
        }

        /* ── Credential card design system ─────────────────────────────────
           Shared by the certifications index and every detail page so the
           branding rule holds: logo, typography, layout, seal, badge shape and
           issuing-body wording stay IDENTICAL across levels, and only the
           colour system (field / metal / paper / tier ink) varies.
           Edit here, never per page. ──────────────────────────────────────── */
        .cert-card {
            display: flex;
            flex-direction: column;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 18px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                        0 10px 26px -14px rgba(15, 23, 42, 0.22);
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.28s ease;
        }
        a.cert-card:hover,
        .cert-card:hover {
            transform: translateY(-7px);
            border-color: transparent;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                        0 28px 50px -18px var(--glow);
        }

        /* Header: the credential's own mark, on a light tier-tinted ground.
           It replaced a jewel-tone panel carrying the level name and the
           abbreviation in type. The mark sets both itself, so the panel was
           saying twice over what the artwork already said, and it forced the
           card to shout in a colour the mark then had to compete with. */
        .cert-head {
            position: relative;
            display: flex;
            justify-content: center;
            padding: 1.6rem 1.5rem 1.5rem;
            background: var(--paper);
            overflow: hidden;
        }
        /* The tier wash. A flat tint token would need a fifth colour per level
           and a fresh contrast measurement; the field at 6% over paper stays in
           step with whatever the field is set to. */
        .cert-head::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--field);
            opacity: 0.06;
        }
        .cert-head::before {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            z-index: 1;
            height: 3px;
            background: linear-gradient(90deg, var(--metal) 0%, var(--metal-light) 50%, var(--metal) 100%);
        }
        .cert-mark {
            position: relative;
            z-index: 1;
            display: block;
            /* Over the 96px floor the mark's two issuing lines need, and capped
               so it does not swell on the widest card in the 3-up grid. */
            width: min(178px, 64%);
            height: auto;
        }

        /* Body: warm off-white ground, not pure white. */
        .cert-body {
            display: flex;
            flex-direction: column;
            flex: 1;
            /* Side padding trimmed from 1.5rem: it buys the 12px that lets the
               longest certification name hold one line. */
            padding: 1.4rem 1.15rem 1.25rem;
            background: var(--paper);
        }
        /* Sized so all three names sit on a single row in the 3-up grid.
           Measured at a 303px content box: "Certified Service Excellence
           Professional" is the longest and needs 294px here, 9px of slack.
           1.02rem overflowed by 16px. Wrapping is deliberately still allowed so
           a narrower card or a longer future name degrades instead of clipping. */
        .cert-name {
            font-size: 0.94rem;
            font-weight: 700;
            letter-spacing: -0.015em;
            color: var(--ink);
            line-height: 1.35;
            margin-bottom: 0.6rem;
        }
        .cert-positioning {
            color: var(--ink-soft);
            font-size: 0.87rem;
            margin-bottom: 1.4rem;
        }
        /* Issuing-body line: identical on every card and page. */
        .cert-card-foot {
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid rgba(15, 23, 42, 0.09);
            font-size: 0.79rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--ink-soft);
        }
        .cert-card-foot i {
            font-size: 0.95rem;
            flex-shrink: 0;
        }

        /* ── Cookie consent notice ──────────────────────────────────────
           Markup and behaviour come from templates/analytics/cookie_consent
           .html, shared with trusted.rw and the forum; only the paint is
           learn's own. It is a strip of the same white card the rest of the
           site is built from, floated over the page rather than dropped in
           as a dark bar: a black slab across the foot of a light page is the
           one thing this design system does not do.

           Accept is the identity's indigo -- the same button the apply
           wizard uses -- because it is the ordinary action here, and
           Decline sits beside it as a real, readable second choice rather
           than a grey hint. */
        #ckc {
            position: fixed;
            bottom: 24px;
            left: 50%;
            z-index: 9999;
            transform: translateX(-50%) translateY(24px) scale(.98);
            opacity: 0;
            pointer-events: none;
            display: flex;
            align-items: center;
            gap: 14px;
            width: calc(100% - 32px);
            max-width: 560px;
            padding: 14px 16px;
            background: var(--surface);
            color: var(--ink-soft);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            font-size: .8125rem;
            line-height: 1.5;
            box-shadow: 0 12px 40px rgba(15, 23, 42, .16), 0 3px 10px rgba(15, 23, 42, .07);
            transition: opacity .34s ease, transform .42s cubic-bezier(.22, .68, 0, 1.10);
        }
        #ckc.ckc--on {
            opacity: 1;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
        }
        .ckc-ico {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            line-height: 1;
            background: rgba(23, 48, 122, .08);
            box-shadow: inset 0 0 0 1px rgba(23, 48, 122, .16);
        }
        .ckc-msg { flex: 1; min-width: 0; }
        #ckc strong {
            display: block;
            color: var(--ink);
            font-weight: 600;
            font-size: .875rem;
            margin-bottom: 1px;
        }
        #ckc a { color: var(--brand); font-weight: 600; text-decoration: none; }
        #ckc a:hover { text-decoration: underline; }
        #ckc-btns { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
        .ckc-decline, .ckc-accept {
            padding: 9px 16px;
            border-radius: 9px;
            cursor: pointer;
            font-family: inherit;
            font-size: .75rem;
            font-weight: 600;
            white-space: nowrap;
            transition: background .15s, border-color .15s, color .15s;
        }
        .ckc-decline {
            background: transparent;
            color: var(--ink-muted);
            border: 1px solid var(--line);
        }
        .ckc-decline:hover { background: var(--surface-alt); color: var(--ink); }
        .ckc-accept {
            background: var(--brand);
            color: #fff;
            border: 1px solid var(--brand);
        }
        .ckc-accept:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
        .ckc-decline:focus-visible, .ckc-accept:focus-visible {
            outline: 2px solid var(--brand);
            outline-offset: 2px;
        }
        /* Below this width the two buttons cannot sit beside the text without
           one of them wrapping mid-word: the notice becomes two rows and the
           buttons take a full-width half each, at a thumb-sized height. */
        @media (max-width: 560px) {
            #ckc {
                bottom: 10px;
                left: 10px;
                right: 10px;
                width: auto;
                max-width: none;
                flex-wrap: wrap;
                gap: 12px;
                padding: 16px;
                transform: translateY(24px) scale(.98);
            }
            #ckc.ckc--on { transform: translateY(0) scale(1); }
            #ckc-btns { width: 100%; gap: 10px; }
            .ckc-decline, .ckc-accept { flex: 1; padding: 12px 16px; font-size: .8125rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            #ckc { transition: opacity .01s linear; }
        }