/* ============================================================
   PLUME ENERGIE - REDESIGNED COMPONENTS
   Loaded last, so these rules win over the legacy style.css
   at equal specificity. Tokens live in theme.css.
   ============================================================ */

/* ============================================================
   SHARED PIECES
   ============================================================ */

/* Pill buttons used by the hero, the cta band and the header. */
.pe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--pe-radius-pill);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.pe-btn:hover {
    transform: translateY(-2px);
}

.pe-btn-primary {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    box-shadow: var(--pe-shadow-sm);
}

.pe-btn-primary:hover {
    background: var(--pe-primary-bg-hover);
    box-shadow: var(--pe-shadow-md);
}

.pe-btn-outline {
    background: transparent;
    color: var(--pe-navy);
    border-color: var(--pe-navy);
}

.pe-btn-outline:hover {
    background: var(--pe-navy);
    color: #FFFFFF;
}

body.dark-mode .pe-btn-outline {
    color: var(--pe-yellow);
    border-color: var(--pe-yellow);
}

body.dark-mode .pe-btn-outline:hover {
    background: var(--pe-yellow);
    color: var(--pe-navy);
}

/* ============================================================
   CALL TO ACTION BAND  (public page, above the footer)
   ============================================================ */

.pe-cta {
    max-width: var(--pe-page-width);
    margin: 60px auto 70px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.pe-cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: var(--pe-surface);
    border-radius: var(--pe-radius-md);
    padding: 42px 48px;
}

.pe-cta-title {
    margin: 0 0 14px 0;
    font-size: var(--pe-fs-xl);
    font-weight: 700;
    color: var(--pe-text);
}

.pe-cta-text {
    margin: 0 0 26px 0;
    max-width: 420px;
    font-size: var(--pe-fs-base);
    line-height: var(--pe-lh);
    color: var(--pe-text-muted);
}

.pe-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pe-cta-art {
    flex-shrink: 0;
    line-height: 0;
}

.pe-cta-art img {
    width: 150px;
    height: auto;
}

/* the navy outline of the bulb would sink into the dark panel */
body.dark-mode .pe-cta-art img {
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.45));
}

@media (max-width: 900px) {
    .pe-cta-panel {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 24px;
        padding: 32px 28px;
    }

    /*
        Stacked, the bulb sits centred above the words, so the words are centred under
        it - left aligned text under a centred image reads as a mistake.

        align-self overrides the panel's align-items: flex-start, which would otherwise
        shrink this block to its content and leave nothing to centre within.
    */
    .pe-cta-copy {
        align-self: stretch;
        text-align: center;
    }

    /* the paragraph is narrower than the panel, so it has to be centred itself */
    .pe-cta-text {
        margin-left: auto;
        margin-right: auto;
    }

    .pe-cta-actions {
        justify-content: center;
    }

    .pe-cta-art {
        align-self: center;
    }

    .pe-cta-art img {
        width: 112px;
    }

}

@media (max-width: 500px) {
    .pe-cta {
        margin: 40px auto 50px auto;
        padding: 0 14px;
    }

    .pe-cta-panel {
        padding: 26px 20px;
    }

    .pe-cta-actions .pe-btn {
        flex: 1 1 100%;
    }
}

/* ============================================================
   PAGE GROUND
   The mockup drops the watercolour texture for a plain surface.
   ============================================================ */

body {
    background-color: var(--pe-bg);
    color: var(--pe-text);
}

body::before,
body::after {
    display: none;
}

/* ============================================================
   HEADER  (mockup slides 1 and 6)
   ============================================================ */

.pe-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 84px;
    padding: 0 clamp(16px, 3vw, 40px);
    background: var(--pe-header-bg);
    border-bottom: 1px solid var(--pe-border);
    box-shadow: none;
    backdrop-filter: none;
    z-index: 150;
}

.pe-header .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

.pe-header .header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pe-header .header-title {
    margin: 0;
    font-size: var(--pe-fs-lg);
    font-weight: 700;
    color: var(--pe-navy);
    white-space: nowrap;
}

body.dark-mode .pe-header .header-title {
    color: #FFFFFF;
}

/* ---------- search ---------- */

.pe-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 18px;
    height: 48px;
    background: var(--pe-surface);
    border: 1px solid transparent;
    border-radius: var(--pe-radius-pill);
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.pe-search:focus-within {
    border-color: var(--pe-navy);
    background: var(--pe-bg);
}

body.dark-mode .pe-search:focus-within {
    border-color: var(--pe-yellow);
}

.pe-search > i {
    color: var(--pe-text-muted);
    font-size: 16px;
    flex-shrink: 0;
}

.pe-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: var(--pe-fs-base);
    color: var(--pe-text);
}

.pe-search input::placeholder {
    color: var(--pe-text-muted);
}

.pe-search input::-webkit-search-cancel-button {
    display: none;
}

.pe-search-clear {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pe-search-clear:hover {
    background: var(--pe-surface-hover);
    color: var(--pe-text);
}

/* ---------- round icon buttons ---------- */

.pe-header .header-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    position: relative;
}

.pe-icon-btn {
    box-sizing: border-box;   /* the legacy .settings-icon adds padding */
    padding: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--pe-border);
    background: var(--pe-bg);
    color: var(--pe-navy);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.pe-icon-btn:hover {
    background: var(--pe-surface);
    border-color: var(--pe-border-strong);
    transform: translateY(-1px);
}

body.dark-mode .pe-icon-btn {
    color: var(--pe-yellow);
}

.pe-signin {
    padding: 12px 28px;
    white-space: nowrap;
}

.pe-header .desktop-user-icon {
    font-size: 30px;
    color: var(--pe-navy);
    cursor: pointer;
}

body.dark-mode .pe-header .desktop-user-icon {
    color: var(--pe-yellow);
}

@media (max-width: 1000px) {
    .pe-header {
        height: 72px;
        gap: 14px;
    }

    .pe-search {
        max-width: none;
    }

    .pe-header .header-title {
        display: none;
    }
}

@media (max-width: 700px) {
    .pe-search {
        height: 42px;
        padding: 0 14px;
    }

    /* the theme and language controls also live in the burger menu;
       the sign in pill stays, it is the main call to action */
    .pe-icon-btn {
        display: none;
    }

    .pe-signin {
        padding: 11px 18px;
    }
}

/* ============================================================
   HERO  (mockup slide 1)
   ============================================================ */

.pe-hero {
    position: relative;
    max-width: var(--pe-page-width);
    margin: 28px auto 0 auto;
    /*
        The floor is 340 rather than 320: a phone reaches it (46vw of a 390px screen is
        179), and the twenty it adds is what lets the wording sit clear of the dots
        instead of resting on them. Anything from about 740px up is on the 46vw term
        and is unaffected.
    */
    height: clamp(340px, 46vw, 560px);
    border-radius: var(--pe-radius-lg);
    overflow: hidden;
    isolation: isolate;
}

.pe-hero-media {
    position: absolute;
    inset: 0;
}

.pe-hero .cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.pe-hero .cover-image.active {
    opacity: 1;
}

/* readable text over any photograph */
.pe-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(7, 20, 51, 0.88) 0%, rgba(7, 20, 51, 0.55) 45%, rgba(7, 20, 51, 0.12) 100%);
    z-index: 1;
}

/*
    The width the wording is allowed, and the reason it is 840 and not a round 800.

    Six headlines and six subtitles rotate through here in each language. Measured in
    Inter at the sizes below, the longest headline ("Découvrez de Nouvelles
    Perspectives") runs 798px and the longest subtitle 762px, so 840 carries every one
    of the twenty four on a single line with a little room to spare. The old 640 cut
    two headlines in half - one of them by six pixels - while the hero around them was
    still 1200 wide.

    It is a max-width, so a narrow window still wraps them, which is what phones want.

    Keeping every slide to one line also holds the hero still: the block is anchored
    from the bottom, so a headline that wrapped used to push the top edge up and the
    banner changed shape twice per cycle.
*/
.pe-hero-content {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    right: clamp(24px, 4vw, 56px);
    bottom: clamp(60px, 9vw, 96px);
    z-index: 2;
    max-width: 840px;
}

.pe-hero .knowledge-title h1 {
    margin: 0 0 12px 0;
    font-size: var(--pe-fs-2xl);
    line-height: var(--pe-lh-tight);
    font-weight: 700;
    color: #FFFFFF;
}

.pe-hero .knowledge-subtitle h5 {
    margin: 0 0 26px 0;
    /* no cap of its own: it takes the block's width, and wraps when that is narrow */
    font-size: var(--pe-fs-md);
    font-weight: 600;
    line-height: 1.45;
    color: var(--pe-yellow);
}

.pe-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.pe-hero-btn-light {
    background: #FFFFFF;
    color: var(--pe-navy);
}

.pe-hero-btn-light:hover {
    background: var(--pe-yellow);
}

.pe-hero-btn-ghost {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.85);
}

.pe-hero-btn-ghost:hover {
    background: #FFFFFF;
    color: var(--pe-navy);
}

/* the outbound arrow belongs to the phone form of this link, further down */
.pe-hero-btn-out {
    display: none;
}

/* ---------- carousel dots ---------- */

.pe-hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.pe-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.pe-hero-dot.active {
    width: 22px;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-yellow);
}

/* ---------- quiz progress (temporary, leaves with the inline quizzes) ---------- */

.pe-hero-progress {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    right: clamp(24px, 4vw, 56px);
    bottom: 44px;
    z-index: 2;
}

.pe-hero-progress #progress-text {
    position: static;
    margin: 0 0 8px 0;
    font-size: var(--pe-fs-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.pe-hero-progress .bar-progression {
    position: static;
    width: min(320px, 60%);
    height: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 700px) {
    .pe-hero {
        margin-top: 16px;
        border-radius: var(--pe-radius-md);
    }

    /*
        The dots sit 22px off the bottom and stand 9px tall, so they end at 31. At 40
        the buttons came down to within nine pixels of them and read as one crowded
        block; at 52 there is a clear band between the two.
    */
    .pe-hero-content {
        bottom: 52px;
    }

    /*
        One action, and a way out.

        Two pills of the same weight need 308px and a 375px phone gives the column
        279, so they stacked - and stacked they made the block taller than the banner
        had room for, 274px of wording and buttons above 264px of space. Anchored from
        the bottom, it was the headline that went off the top.

        So the company link stops being a pill here and becomes what it always was:
        the quieter of the two. The block comes to 244px and clears by 20, both labels
        are kept whole, and the phone gets the single obvious action it wants.
    */
    /*
        Two gaps, because the row they end up on is not decided here.

        Beside each other they want air between them - 12px - and stacked they want to
        read as one thing with a footnote, so 4px. The pair needs 280px: a 390px phone
        gives the column 294 and they sit on one line, a 375px one gives 279 and they
        stack. Neither is wrong, and nothing overflows either way.

        Centred rather than stretched, or the pill would grow to match the taller link
        whenever they share a row, and be its own height again when they do not.
    */
    .pe-hero-actions {
        gap: 4px 12px;
        align-items: center;
    }

    .pe-hero-actions .pe-btn {
        padding: 10px 16px;
        white-space: nowrap;
    }

    /* scoped like the rule above it, or that one keeps the pill padding */
    .pe-hero-actions .pe-hero-btn-ghost {
        /*
            No flex-basis: it is not sent to its own row any more, it goes there only
            when there is no room beside the button.
        */
        gap: 6px;   /* centred like everything else in the phone hero, via .pe-btn */

        /* reads as text, still answers to a thumb: 16px of line in a 44px target */
        padding: 14px 0;

        border: none;
        background: none;
        color: #FFFFFF;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .pe-hero-actions .pe-hero-btn-ghost:hover,
    .pe-hero-actions .pe-hero-btn-ghost:focus-visible {
        background: none;
        color: var(--pe-yellow);
    }

    .pe-hero-btn-out {
        display: inline-flex;
        font-size: 15px;
    }
}

/*
    Narrower than a Galaxy - the old small iPhones and the like. Even shortened, the
    two pills want 245px and there is only 224px, so they go back to stacking and the
    banner grows enough to hold them rather than cropping the words again.
*/
@media (max-width: 359px) {
    .pe-hero {
        height: 380px;
    }
}

/* ============================================================
   ARTICLES SECTION  (mockup slides 2 and 3)
   ============================================================ */

.pe-articles {
    max-width: var(--pe-page-width);
    margin: clamp(40px, 6vw, 80px) auto 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.pe-section-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.pe-section-head h2 {
    margin: 0;
    font-size: var(--pe-fs-xl);
    font-weight: 700;
    color: var(--pe-navy);
    text-align: center;
}

body.dark-mode .pe-section-head h2 {
    color: var(--pe-yellow);
}

.pe-section-rule {
    width: clamp(30px, 6vw, 70px);
    height: 3px;
    border-radius: 2px;
    background: var(--pe-yellow);
}

.pe-articles-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 44px;
    align-items: start;
}

.pe-articles-filterline {
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pe-border);
    font-size: var(--pe-fs-md);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .pe-articles-filterline {
    color: var(--pe-yellow);
}

/* the legacy two column split is gone, the list simply fills its cell */
.pe-articles-main .quiz-container {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    overflow: visible;
    display: block;
}

.pe-articles-main .blogs-container {
    display: block;
}

/* ============================================================
   ARTICLE ROW
   ============================================================ */

.blog.pe-post {
    display: block;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pe-border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 26px 0;
    margin: 0;
}

body.dark-mode .blog.pe-post,
body.dark-mode .blog.pe-post:hover {
    background: transparent;
    border-color: var(--pe-border);
    box-shadow: none;
}

.pe-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.pe-post-byline {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-text);
}

.pe-post-byline span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pe-post-byline i {
    color: var(--pe-navy);
    font-size: 16px;
}

/* the pin of the category chip reads with the byline, so it matches its size */
.blog.pe-post .blog-type i,
.blog.pe-article .blog-type i {
    font-size: 15px;
}

.pe-trend-meta i {
    font-size: 14px;
}

body.dark-mode .pe-post-byline i {
    color: var(--pe-yellow);
}

/* The legacy .blog.hidden and .blog.pe-post carry the same weight, and this file
   comes last - so a filtered out card kept its display and stayed on screen while
   "no article" appeared underneath it. */
.blog.pe-post.hidden,
.blog.pe-article.hidden {
    display: none;
}

/* the category chip of the row */
.blog.pe-post .blog-type {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pe-surface);
    box-shadow: none;
    border-radius: var(--pe-radius-pill);
    padding: 7px 15px;
    flex-shrink: 0;
}

/* The legacy badge was absolutely positioned, so its ::after (inset: 0) covered
   only the badge. Here the badge is static, which makes that overlay stretch to
   the whole card and swallow every click - the title, "Voir plus", the actions. */
.blog.pe-post .blog-type::after,
.blog.pe-article .blog-type::after {
    content: none;
}

.blog.pe-post .blog-type:hover {
    transform: none;
    box-shadow: none;
    background: var(--pe-surface-hover);
}

.blog.pe-post .blog-type i,
.blog.pe-post .blog-type h5 {
    color: var(--pe-text-muted);
}

.blog.pe-post .blog-type h5 {
    font-size: var(--pe-fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.pe-post-body {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

.pe-post-text {
    flex: 1;
    min-width: 0;
}

.pe-post-title {
    text-decoration: none;
    display: block;
}

.pe-post-title .blog-title {
    margin: 0 0 6px 0;
    font-size: var(--pe-fs-md);
    font-weight: 700;
    line-height: 1.35;
    color: var(--pe-text);
    transition: color 0.2s ease;
}

.pe-post-title:hover .blog-title {
    color: var(--pe-navy);
}

body.dark-mode .pe-post-title:hover .blog-title {
    color: var(--pe-yellow);
}

.pe-post-subtitle {
    margin: 0 0 10px 0;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text-muted);
}

/*
    Three lines are read in full and a fourth begins and fades away under the
    gradient below, the way the old cards did it: the row shows that the article
    goes on without cutting a word off, and "Voir plus" opens it.

    The height is four lines of 1.65, and the fade covers the last one and a half
    of them. It is switched on per row by BlogLoader.markClippedExcerpts, so a
    short article that fits is not veiled for nothing.
*/
.pe-post-excerpt {
    position: relative;
    margin: 0;
    font-size: var(--pe-fs-sm);
    line-height: 1.65;
    color: var(--pe-text-muted);
    display: block;
    max-height: 6.6em;
    overflow: hidden;
}

.pe-post-excerpt.is-clipped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.6em;
    pointer-events: none;
    /* transparent is rgba(0,0,0,0) and gradients interpolate premultiplied, so
       this fades to the page ground in either theme without greying on the way. */
    background: linear-gradient(to bottom, transparent, var(--pe-bg) 88%);
}

/*
    The picture runs the height of the text beside it - the top of the title down to
    the foot of the fade - rather than sitting in a fixed box that ended short of it.
    align-self overrides the flex-start of .pe-post-body for this item only, so the
    text still starts at the top and the picture is the one that stretches; whatever
    the title wraps to, the two stay flush.
*/
.pe-post-thumb {
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
    width: 250px;
    height: auto;
    /* a card with little text keeps a picture worth looking at */
    min-height: 132px;
    border-radius: var(--pe-radius-sm);
    overflow: hidden;
    display: block;
}

/*
    Taken out of the flow so the picture contributes no height of its own. In the
    flow its intrinsic height (250px wide at the photograph's own ratio, some 173px)
    was taller than the text and set the height of the row - the text then stretched
    to the picture instead of the other way round, and the two still did not line up.
*/
.pe-post-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pe-post-thumb:hover img {
    transform: scale(1.05);
}

.pe-post-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

.pe-post-more {
    padding: 10px 22px;
    font-size: var(--pe-fs-sm);
}

/* the action pills of the row sit on white, not on a photograph */
.blog.pe-post .blog-likes,
.blog.pe-post .blog-comments,
.blog.pe-post .blog-share {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 6px;
    color: var(--pe-text-muted);
    font-size: var(--pe-fs-sm);
}

.blog.pe-post .blog-likes:hover,
.blog.pe-post .blog-comments:hover,
.blog.pe-post .blog-share:hover {
    background: transparent;
    transform: translateY(-2px);
    box-shadow: none;
    color: var(--pe-navy);
}

body.dark-mode .blog.pe-post .blog-likes:hover,
body.dark-mode .blog.pe-post .blog-comments:hover,
body.dark-mode .blog.pe-post .blog-share:hover {
    color: var(--pe-yellow);
}

.blog.pe-post .heart-icon,
.blog.pe-post .comment-icon,
.blog.pe-post .share-icon {
    color: inherit;
    font-size: 16px;
}

.blog.pe-post .likes-count,
.blog.pe-post .comments-count {
    color: inherit;
    font-weight: 600;
}

.blog.pe-post .blog-likes.liked .heart-icon {
    color: #e0245e;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.pe-sidebar {
    position: sticky;
    top: 104px;
    padding-left: 40px;
    border-left: 1px solid var(--pe-border);
}

.pe-side-block {
    margin-bottom: 34px;
}

.pe-side-block h3 {
    margin: 0 0 16px 0;
    font-size: var(--pe-fs-md);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .pe-side-block h3 {
    color: var(--pe-yellow);
}

.pe-trending-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pe-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pe-chip {
    padding: 10px 18px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-surface);
    color: var(--pe-text-muted);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.pe-chip:hover {
    background: var(--pe-surface-hover);
    transform: translateY(-1px);
}

.pe-chip.selected {
    background: var(--pe-navy);
    color: #FFFFFF;
}

body.dark-mode .pe-chip.selected {
    background: var(--pe-yellow);
    color: var(--pe-navy);
}

.pe-showall {
    margin-top: 14px;
    padding: 0;
    border: none;
    background: none;
    color: var(--pe-navy);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.dark-mode .pe-showall {
    color: var(--pe-yellow);
}

.pe-showall:hover {
    text-decoration: underline;
}

/* ---------- trending ---------- */

.pe-trending {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pe-trend {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}

.pe-trend + .pe-trend {
    border-top: 1px solid var(--pe-border);
}

.pe-trend-rank {
    flex-shrink: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--pe-border);
}

body.dark-mode .pe-trend-rank {
    color: rgba(255, 255, 255, 0.16);
}

.pe-trend-body {
    min-width: 0;
}

.pe-trend-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
    font-size: var(--pe-fs-xs);
    font-weight: 600;
    color: var(--pe-text);
}

.pe-trend-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pe-trend-meta i {
    color: var(--pe-navy);
}

body.dark-mode .pe-trend-meta i {
    color: var(--pe-yellow);
}

.pe-trend-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--pe-text);
    text-decoration: none;
}

.pe-trend-title:hover {
    color: var(--pe-navy);
}

body.dark-mode .pe-trend-title:hover {
    color: var(--pe-yellow);
}

/* ============================================================
   PAGINATION
   ============================================================ */

/* The row sits at the end of the article column, not under its middle. */
.pe-articles .blog-pagination {
    justify-content: flex-end;
    gap: 6px;
    margin: 34px 0 0 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.pe-articles .page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    /* none, not a colour: the legacy sheet draws a 2px border and its dark rule
       only recolours it, so removing the style is what actually clears it. */
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--pe-text-muted);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    box-shadow: none;
    transform: none;
}

/* The legacy sheet sizes the number buttons with width, which a min-width cannot
   override - including inside its own phone queries. */
.pe-articles .page-num {
    width: auto;
    min-width: 34px;
    padding: 0 10px;
}

/*
    Two hover languages, because the two kinds of button read differently: Prec and
    Suiv are labels, so only their text answers the pointer; a page number is a
    target, so it takes the grey ground the rest of the page uses for a hovered
    surface. Nothing draws a border or a shadow.

    Every selector below names .page-btn as well as its own class on purpose: the
    legacy hover rules are .page-btn:hover:not(.disabled):not(.active), which is
    four classes deep, so .pe-articles .page-num:hover would have lost to them.
*/
.pe-articles .page-btn:hover:not(.disabled) {
    border: none;
    transform: none;
    box-shadow: none;
}

.pe-articles .page-btn.page-prev:hover:not(.disabled),
.pe-articles .page-btn.page-next:hover:not(.disabled) {
    background: transparent;
    color: var(--pe-navy);
}

.pe-articles .page-btn.page-num:hover:not(.active) {
    background: var(--pe-surface-hover);
    color: var(--pe-text);
}

.pe-articles .page-btn.active,
.pe-articles .page-btn.active:hover {
    background: var(--pe-navy);
    border: none;
    color: #FFFFFF;
    transform: none;
    box-shadow: none;
}

/* The dark sheet gives every button a faint panel and a yellow outline. */
body.dark-mode .pe-articles .page-btn {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.dark-mode .pe-articles .page-btn:hover:not(.disabled) {
    border: none;
    box-shadow: none;
}

body.dark-mode .pe-articles .page-btn.page-prev:hover:not(.disabled),
body.dark-mode .pe-articles .page-btn.page-next:hover:not(.disabled) {
    background: transparent;
    color: var(--pe-yellow);
}

body.dark-mode .pe-articles .page-btn.page-num:hover:not(.active) {
    background: var(--pe-surface-hover);
    color: var(--pe-text);
}

body.dark-mode .pe-articles .page-btn.active,
body.dark-mode .pe-articles .page-btn.active:hover {
    background: var(--pe-yellow);
    border: none;
    color: var(--pe-navy);
    box-shadow: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
    .pe-articles-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .pe-sidebar {
        position: static;
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 700px) {
    .pe-articles {
        padding: 0 16px;
    }

    .pe-post-body {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .pe-post-thumb {
        width: 100%;
        height: 168px;
    }

    .pe-post-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pe-post-actions {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ============================================================
   SINGLE BLOG PAGE  (mockup slides 6 to 8)
   ============================================================ */

.pe-article-nav {
    max-width: var(--pe-page-width);
    margin: 0 auto;
    padding: 22px 24px 0 24px;
    box-sizing: border-box;
}

.pe-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--pe-fs-base);
    font-weight: 700;
    color: var(--pe-navy);
    cursor: pointer;
    transition: gap 0.25s ease;
}

.pe-back:hover {
    gap: 16px;
}

body.dark-mode .pe-back {
    color: var(--pe-yellow);
}

/* the article sits in a narrow reading column */
body.blog-page .quiz-container {
    max-width: 760px;
    padding: 26px 24px 80px 24px;
}

.blog.pe-article {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.pe-article-cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--pe-radius-sm);
    margin-bottom: 22px;
}

.pe-article-title {
    margin: 0 0 8px 0;
    font-size: var(--pe-fs-lg);
    font-weight: 700;
    line-height: 1.35;
    color: var(--pe-text);
}

.pe-article-subtitle {
    margin: 0 0 20px 0;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text-muted);
}

.pe-rule {
    height: 1px;
    background: var(--pe-border);
}

.pe-article-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
}

.pe-article-byline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

/* the four actions of the article, plain glyphs on the page background */
.pe-article-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.blog.pe-article .blog-likes,
.blog.pe-article .blog-comments,
.blog.pe-article .blog-share,
.blog.pe-article .blog-download {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    padding: 4px;
    min-width: 0;
    color: var(--pe-text-muted);
    font-size: var(--pe-fs-sm);
}

.blog.pe-article .blog-likes:hover,
.blog.pe-article .blog-comments:hover,
.blog.pe-article .blog-share:hover,
.blog.pe-article .blog-download:hover {
    background: transparent;
    box-shadow: none;
    transform: translateY(-2px);
    color: var(--pe-navy);
}

body.dark-mode .blog.pe-article .blog-likes:hover,
body.dark-mode .blog.pe-article .blog-comments:hover,
body.dark-mode .blog.pe-article .blog-share:hover,
body.dark-mode .blog.pe-article .blog-download:hover {
    color: var(--pe-yellow);
}

.blog.pe-article .heart-icon,
.blog.pe-article .comment-icon,
.blog.pe-article .share-icon,
.blog.pe-article .download-icon {
    color: inherit;
    font-size: 17px;
}

.blog.pe-article .likes-count,
.blog.pe-article .comments-count {
    color: inherit;
    font-weight: 600;
}

.blog.pe-article .blog-likes.liked .heart-icon {
    color: #e0245e;
}

/* ---------- article body ---------- */

.pe-article-body {
    padding: 24px 0 8px 0;
    font-size: var(--pe-fs-base);
    line-height: 1.75;
    color: var(--pe-text);
    max-height: none;
    overflow: visible;
}

.pe-article-body p {
    margin: 0 0 18px 0;
}

.pe-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pe-radius-sm);
}

.pe-article-body h1,
.pe-article-body h2,
.pe-article-body h3 {
    margin: 26px 0 12px 0;
    line-height: 1.35;
    color: var(--pe-text);
}

.pe-article-body a {
    color: var(--pe-navy);
    text-decoration: underline;
}

body.dark-mode .pe-article-body a {
    color: var(--pe-yellow);
}

/* the collapsed teaser of the old card never applies here */
.pe-article-body.collapsed::after {
    display: none;
}

/* ============================================================
   QUIZ  (mockup slides 7 and 8)
   ============================================================ */

.pe-quiz {
    margin-top: 10px;
}

.pe-quiz-empty {
    padding: 20px 0;
    text-align: center;
    color: var(--pe-text-muted);
}

.pe-quiz-item .question {
    margin: 26px 0 16px 0;
    font-size: var(--pe-fs-base);
    font-weight: 700;
    line-height: 1.45;
    color: var(--pe-navy);
}

body.dark-mode .pe-quiz-item .question {
    color: var(--pe-yellow);
}

.pe-quiz-item .form {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    max-width: none;
}

.pe-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* one answer card */
.pe-options .input-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    min-height: 66px;
    margin: 0;
    padding: 12px 16px;
    background: var(--pe-surface);
    border: 2px solid transparent;
    border-radius: var(--pe-radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.pe-options .input-container:hover {
    background: var(--pe-surface-hover);
}

.pe-options .option-badge {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pe-navy);
    color: var(--pe-yellow);
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pe-options .response {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--pe-text);
    text-align: left;
}

/* the state circle: empty, then filled by QuizManager with a check or a cross */
.pe-options .cercle-response {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--pe-border-strong);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pe-quiz-confirm {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.pe-quiz-item .confirmation {
    padding: 12px 30px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: auto;
    margin: 0;
}

.pe-quiz-item .confirmation:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow-md);
}

/* the answer feedback line */
.pe-quiz-item .correction {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    background: none;
    border: none;
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    color: var(--pe-text);
}

.pe-quiz-item .cercle-correction-True,
.pe-quiz-item .cercle-correction-False {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: relative;
}

.pe-quiz-item .cercle-correction-True {
    background: #22A447;
}

.pe-quiz-item .cercle-correction-False {
    background: #E23B3B;
}

.pe-quiz-item .cercle-correction-True::after,
.pe-quiz-item .cercle-correction-False::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
}

.pe-quiz-item .cercle-correction-True::after {
    content: "\2713";
}

.pe-quiz-item .cercle-correction-False::after {
    content: "\2715";
}

/* The legacy rule is width 60% with margin auto on the sides; this file only meant
   to change the vertical rhythm, but writing the margin shorthand zeroed the sides
   and left the line hugging the left edge. auto puts it back under the middle. */
.pe-quiz-item .separator {
    height: 1px;
    margin: 26px auto 0 auto;
    background: var(--pe-border);
}

/*
    The line belongs between two questions, not after the last one, where it drew a
    second rule a few pixels above the one that opens "Vous aimerez aussi". The quiz
    holds nothing but questions, so the last item is the last child.
*/
.pe-quiz .pe-quiz-item:last-child .separator {
    display: none;
}

@media (max-width: 700px) {
    .pe-article-nav {
        padding: 16px 16px 0 16px;
    }

    body.blog-page .quiz-container {
        padding: 18px 16px 60px 16px;
    }

    .pe-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .pe-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .pe-quiz-confirm {
        justify-content: stretch;
    }

    .pe-quiz-item .confirmation {
        width: 100%;
    }
}

/* ============================================================
   DARK MODE OF THE BLOG PAGE AND THE QUIZ
   The legacy stylesheet still carries its own dark rules for these
   elements, with the previous yellow. Same specificity, later file,
   so these win and everything lands back on the tokens.
   ============================================================ */

body.dark-mode.blog-page {
    background-color: var(--pe-bg);
}

body.dark-mode .pe-article-title,
body.dark-mode .pe-article-body,
body.dark-mode .blog.pe-article .blog-title {
    color: var(--pe-text);
}

body.dark-mode .pe-article-subtitle,
body.dark-mode .pe-article-byline {
    color: var(--pe-text-muted);
}

body.dark-mode .pe-article-byline {
    color: var(--pe-text);
}

body.dark-mode .pe-rule,
body.dark-mode .pe-quiz-item .separator {
    background: var(--pe-border);
}

/* ---------- quiz ---------- */

body.dark-mode .pe-options .input-container {
    background: var(--pe-surface);
    border-color: transparent;
}

body.dark-mode .pe-options .input-container:hover {
    background: var(--pe-surface-hover);
}

body.dark-mode .pe-options .option-badge {
    background: var(--pe-yellow);
    color: var(--pe-navy);
}

body.dark-mode .pe-options .response {
    color: var(--pe-text);
}

body.dark-mode .pe-options .cercle-response {
    border-color: var(--pe-border-strong);
    background: transparent;
}

body.dark-mode .pe-quiz-item .confirmation {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    box-shadow: none;
}

body.dark-mode .pe-quiz-item .correction {
    color: var(--pe-text);
}

body.dark-mode .pe-quiz-empty {
    color: var(--pe-text-muted);
}

/* ============================================================
   EMPTY STATE AND FILTER TAB
   ============================================================ */

/*
    The active filter reads as a row of tabs sitting on the hairline. Each pick is
    its own tab, so the blue underline runs under the words and stops between them -
    the grey hairline of the row shows through in the gap. That gap is the separator;
    there is no character between the names.
*/
.pe-articles-filterline {
    padding-bottom: 0;
}

/*
    One line, scrolled sideways when there is more of it than there is room.

    Wrapping put the categories on one row and the authors on the next, which reads
    as two separate things rather than one sentence about what is being shown - and
    it moved the article list down by a row every time a second filter was picked.

    The scrollbar is hidden and the right edge is faded instead: the fade only bites
    when something is actually running past it, so a short selection shows no hint
    and a long one shows there is more.
*/
.pe-articles-filterline #activeFilterLabel {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0 18px;
    border-bottom: none;

    overflow-x: auto;
    overflow-y: hidden;

    /*
        The tabs dip 1px below the box so their underline sits on the hairline of the
        row. Hiding the vertical overflow would shave that dip off, so the box is
        given the pixel back and then pulled down by it again.
    */
    padding-bottom: 2px;
    margin-bottom: -2px;

    scrollbar-width: none;
    -ms-overflow-style: none;

    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.pe-articles-filterline #activeFilterLabel::-webkit-scrollbar {
    display: none;
}

.pe-articles-filterline .pe-filter-tab {
    display: inline-block;
    flex: 0 0 auto;             /* a name is never squeezed to make the row fit */
    white-space: nowrap;
    padding-bottom: 12px;
    margin-bottom: -1px;
    border-bottom: 2px solid var(--pe-navy);
}

body.dark-mode .pe-articles-filterline .pe-filter-tab {
    border-bottom-color: var(--pe-yellow);
}

/* nothing to show: a single quiet bar, no icon, no button */
.no-results.pe-empty {
    /* the legacy rule floats it absolutely in the middle of the page */
    position: static;
    transform: none;
    display: none;              /* BlogManager switches this to flex */
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;            /* the legacy rule caps it at 500px */
    min-height: 64px;
    margin: 26px 0 0 0;
    padding: 20px 24px;
    background: var(--pe-surface);
    border: none;
    border-radius: var(--pe-radius-md);
    box-shadow: none;
    backdrop-filter: none;
    text-align: center;
    box-sizing: border-box;
}

.no-results.pe-empty span {
    font-size: var(--pe-fs-base);
    color: var(--pe-text-muted);
}

body.dark-mode .no-results.pe-empty {
    background: var(--pe-surface);
    border: none;
    box-shadow: none;
}

/* ============================================================
   PHONE: THE FILTERS COME BEFORE THE ARTICLES
   The aside becomes transparent to the grid so its blocks can be
   ordered individually: chips first, list, then trending.
   ============================================================ */

@media (max-width: 1000px) {
    .pe-sidebar {
        display: contents;
    }

    .pe-articles-main {
        order: 2;
    }

    /* categories and authors */
    .pe-sidebar .pe-side-block:nth-child(1),
    .pe-sidebar .pe-side-block:nth-child(2) {
        order: 1;
        margin-bottom: 24px;
    }

    /* trending closes the page */
    .pe-sidebar .pe-side-block:nth-child(3) {
        order: 3;
        margin-top: 8px;
        padding-top: 28px;
        border-top: 1px solid var(--pe-border);
    }
}

/* ============================================================
   ICONS
   Tabler ships no spin utility, so the loaders keep their own.
   ============================================================ */

.ti-spin {
    animation: ti-spin 1s linear infinite;
}

@keyframes ti-spin {
    to { transform: rotate(360deg); }
}

/* the glyphs sit on the text baseline a touch low by default */
.ti {
    line-height: 1;
    vertical-align: -0.08em;
}

/* ============================================================
   SKELETON LOADING
   The page paints its own placeholders, so the content area is
   never blank and never covered by an overlay. BlogLoader and
   SidebarManager overwrite them as soon as the data arrives.
   ============================================================ */

.pe-sk {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--pe-surface);
    border-radius: 6px;
}

/* the sweep that says "still loading" without a spinner */
.pe-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 100%);
    animation: pe-sk-sweep 1.4s ease-in-out infinite;
}

body.dark-mode .pe-sk::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 100%);
}

@keyframes pe-sk-sweep {
    100% { transform: translateX(100%); }
}

/* motion sensitive readers get a quiet pulse instead of a sweep */
@media (prefers-reduced-motion: reduce) {
    .pe-sk::after {
        animation: none;
    }

    .pe-sk {
        animation: pe-sk-pulse 2s ease-in-out infinite;
    }

    @keyframes pe-sk-pulse {
        50% { opacity: 0.55; }
    }
}

/* ---------- shapes ---------- */

.pe-sk-line {
    height: 12px;
    width: 100%;
    margin-bottom: 8px;
}

.pe-sk-title {
    height: 18px;
    width: 85%;
    margin-bottom: 12px;
    border-radius: 7px;
}

.pe-sk-chip {
    height: 34px;
    width: 96px;
    border-radius: var(--pe-radius-pill);
}

.pe-sk-thumb {
    flex-shrink: 0;
    width: 190px;
    height: 108px;
    border-radius: var(--pe-radius-sm);
}

.pe-sk-btn {
    height: 38px;
    width: 118px;
    border-radius: var(--pe-radius-pill);
}

.pe-sk-dot {
    height: 20px;
    width: 34px;
    border-radius: 6px;
}

.pe-sk-rank {
    flex-shrink: 0;
    height: 30px;
    width: 30px;
    border-radius: 6px;
}

/* ---------- the article row placeholder ---------- */

.pe-skeleton-row {
    padding: 26px 0;
    border-bottom: 1px solid var(--pe-border);
}

.pe-skeleton-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 14px;
}

.pe-skeleton-head .pe-sk-chip {
    margin-left: auto;
    width: 110px;
    height: 30px;
}

.pe-skeleton-body {
    display: flex;
    align-items: flex-start;
    gap: 26px;
}

.pe-skeleton-text {
    flex: 1;
    min-width: 0;
}

.pe-skeleton-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 18px;
}

/* the sidebar chips sit in a flex row already */
#categoryChips .pe-sk-chip,
#authorChips .pe-sk-chip {
    width: 104px;
}

#authorChips .pe-sk-chip:nth-child(2) {
    width: 132px;
}

@media (max-width: 700px) {
    .pe-skeleton-body {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .pe-sk-thumb {
        width: 100%;
        height: 168px;
    }

    .pe-skeleton-head {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ============================================================
   AUTHENTICATION PAGES  (mockup slides 10 and 11)
   /login, /register and /forgot-password. One centred column
   between the shared header and the shared footer: a title, grey
   pill fields with a leading icon, a compact black action, then
   the Google alternative.
   ============================================================ */

.pe-auth-body {
    background: var(--pe-bg);
}

.pe-auth {
    /* pushes the footer to the bottom of short viewports */
    min-height: 62vh;
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 96px) 24px clamp(48px, 6vw, 80px) 24px;
    box-sizing: border-box;
    text-align: center;
}

.pe-auth-title {
    margin: 0 0 clamp(28px, 4vw, 52px) 0;
    font-size: var(--pe-fs-2xl);
    font-weight: 800;
    line-height: var(--pe-lh-tight);
    letter-spacing: -0.02em;
    color: var(--pe-text);
}

/* the sentence that explains a step, above the field it introduces */
.pe-auth-hint {
    max-width: 380px;
    margin: -18px auto clamp(24px, 3vw, 34px) auto;
    font-size: var(--pe-fs-sm);
    line-height: 1.6;
    color: var(--pe-text-muted);
}

.pe-auth-form {
    display: flex;
    flex-direction: column;
    max-width: 380px;
    margin: 0 auto;
    text-align: left;
}

/* ---------- one grey pill field ---------- */

.pe-field {
    /*
        The colour of the field, named once. The wrapper paints it, and the rule for an
        autofilled input further down repaints it with the same token - the two used to
        carry the colour separately, which is how they came to disagree.
    */
    --pe-field-fill: var(--pe-surface);

    position: relative;
    display: flex;
    align-items: center;
    background: var(--pe-field-fill);
    border: 1.5px solid transparent;
    border-radius: var(--pe-radius-sm);

    /*
        An autofilled input repaints itself with a square inset shadow. Unclipped it
        runs past the rounded ends of the pill and over the border, so the corner looks
        cut off and the border looks broken. The wrapper clips it to its own shape.
    */
    overflow: hidden;

    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pe-field:focus-within {
    --pe-field-fill: var(--pe-bg);
    border-color: var(--pe-navy);
}

body.dark-mode .pe-field:focus-within {
    --pe-field-fill: var(--pe-surface-hover);
    border-color: var(--pe-yellow);
}

.pe-field-icon {
    flex-shrink: 0;
    width: 52px;
    text-align: center;
    font-size: 18px;
    color: var(--pe-text);
}

.pe-field input {
    flex: 1;
    min-width: 0;
    height: 56px;
    padding: 0 14px 0 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--pe-fs-base);
    font-weight: 600;
    color: var(--pe-text);
}

.pe-field input::placeholder {
    font-weight: 700;
    color: var(--pe-text-muted);
    opacity: 1;
}

/*
    The browser paints its own background over an autofilled field and ignores
    background-color there, so an opaque inset shadow is the only way to put ours back.
    It reads --pe-field-fill, which means it follows the field into focus and into dark
    mode instead of staying on one colour: the pale icon half against a grey input half,
    with a seam down the middle, was this shadow keeping --pe-surface while the wrapper
    had already moved to --pe-bg.

    :hover and :active are listed because Chrome re-applies its own background on them.
*/
.pe-field input:-webkit-autofill,
.pe-field input:-webkit-autofill:hover,
.pe-field input:-webkit-autofill:focus,
.pe-field input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--pe-text);
    box-shadow: 0 0 0 1000px var(--pe-field-fill) inset;
}

.pe-field-eye {
    flex-shrink: 0;
    /* drawn inside: the wrapper clips, and a ring on the outside would be cut */
    outline-offset: -3px;
    width: 48px;
    height: 56px;
    padding: 0;
    border: none;
    background: none;
    color: var(--pe-text-muted);
    font-size: 17px;
    cursor: pointer;
}

.pe-field-eye:hover {
    color: var(--pe-text);
}

/* a field the visitor has to fix */
.pe-field.pe-invalid {
    border-color: #E23B3B;
}

.pe-field-error {
    display: none;
    margin: 7px 2px 0 2px;
    font-size: var(--pe-fs-xs);
    font-weight: 500;
    color: #E23B3B;
}

.pe-field-error.show {
    display: block;
}

/* the fields are spaced by the gap between a message and the next field */
.pe-field + .pe-field,
.pe-field-error + .pe-field {
    margin-top: 18px;
}

.pe-field-error.show + .pe-field {
    margin-top: 14px;
}

/* ---------- actions ---------- */

.pe-auth-forgot {
    align-self: flex-end;
    margin-top: 14px;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-text-muted);
    text-decoration: none;
}

.pe-auth-forgot:hover {
    color: var(--pe-navy);
    text-decoration: underline;
}

body.dark-mode .pe-auth-forgot:hover {
    color: var(--pe-yellow);
}

/* the primary action is compact and centred, not the width of the fields */
.pe-auth-submit {
    align-self: center;
    margin-top: clamp(22px, 3vw, 32px);
    padding: 14px 34px;
    min-width: 150px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-auth-action-bg);
    color: var(--pe-auth-action-fg);
    font-family: inherit;
    font-size: var(--pe-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.pe-auth-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow-md);
}

.pe-auth-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- the divider and the Google alternative ---------- */

.pe-auth-or {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 380px;
    margin: clamp(26px, 4vw, 40px) auto clamp(22px, 3vw, 32px) auto;
}

.pe-auth-or::before,
.pe-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--pe-border);
}

.pe-auth-or span {
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pe-text-muted);
}

.pe-auth-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 310px;
    padding: 13px 24px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-auth-action-bg);
    color: var(--pe-auth-action-fg);
    font-family: inherit;
    font-size: var(--pe-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pe-auth-google:hover {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow-md);
}

.pe-auth-google svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

/* ---------- the line that sends you to the other page ---------- */

.pe-auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: clamp(18px, 2.5vw, 26px) 0 0 0;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

.pe-auth-switch a,
.pe-auth-linkbtn {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--pe-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pe-auth-switch a:hover,
.pe-auth-linkbtn:hover {
    color: var(--pe-navy);
}

body.dark-mode .pe-auth-switch a:hover,
body.dark-mode .pe-auth-linkbtn:hover {
    color: var(--pe-yellow);
}

.pe-auth-linkbtn:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 700px) {
    .pe-auth {
        min-height: 0;
        padding-left: 18px;
        padding-right: 18px;
    }

    .pe-field-icon {
        width: 46px;
    }
}

/* ============================================================
   QUIZ SCORE MODAL  (mockup slides 10-11)
   ------------------------------------------------------------
   The card and the filters are fixed; only the review list under
   the separator scrolls, so the scrollbar starts on that line.
   Loaded after style.css, so these win over the legacy rules.
   ============================================================ */

.score-display-overlay {
    background: rgba(20, 22, 28, 0.62);
    backdrop-filter: blur(2px);
    padding: 24px 16px;
}

body.dark-mode .score-display-overlay {
    background: rgba(4, 8, 18, 0.72);
}

.score-display.pe-score {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(860px, 100%);
    max-width: none;
    max-height: min(86vh, 820px);
    padding: 26px 30px 0 30px;
    background: var(--pe-bg);
    backdrop-filter: none;
    border: none;
    border-radius: var(--pe-radius-lg);
    box-shadow: 0 24px 70px rgba(11, 35, 91, 0.28);

    /* the whole modal no longer scrolls - only .pe-score-review does */
    overflow: hidden;
}

body.dark-mode .score-display.pe-score {
    background: var(--pe-bg);
    border: 1px solid var(--pe-border);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.pe-score-close {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-score-close:hover {
    background: var(--pe-surface);
    color: var(--pe-text);
}

/* ---------- the result card ---------- */

.pe-score-card {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 22px;
    padding: 20px 24px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    background: var(--pe-bg);
}

body.dark-mode .pe-score-card {
    background: var(--pe-surface);
}

.pe-score-art {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.pe-score-copy {
    flex: 1;
    min-width: 0;
}

.pe-score-headline {
    margin: 0 0 6px 0;
    font-size: var(--pe-fs-md);
    font-weight: 700;
    line-height: 1.35;
    color: var(--pe-navy);
}

body.dark-mode .pe-score-headline {
    color: var(--pe-yellow);
}

.pe-score-sub {
    margin: 0 0 18px 0;
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-text-muted);
}

/* ---------- the three stats ---------- */

.pe-score-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.pe-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 18px;
    border-right: 1px solid var(--pe-border);
}

.pe-stat:last-child {
    padding-right: 0;
    border-right: none;
}

.pe-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pe-stat-label {
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text-muted);
}

.pe-stat-value {
    font-size: var(--pe-fs-base);
    font-weight: 800;
    color: var(--pe-navy);
}

body.dark-mode .pe-stat-value {
    color: var(--pe-text);
}

.pe-stat-icon {
    flex-shrink: 0;
    font-size: 30px;
    color: var(--pe-text-muted);
}

/* the accuracy ring: the filled part is set from js as --pe-donut-pct */
.pe-donut {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: conic-gradient(var(--pe-donut-color, #E23B3B) calc(var(--pe-donut-pct, 0) * 1%),
                               var(--pe-border-strong) 0);
    -webkit-mask: radial-gradient(circle, transparent 11px, #000 11.5px);
            mask: radial-gradient(circle, transparent 11px, #000 11.5px);
}

/* ---------- retry ---------- */

.pe-score-retry {
    flex-shrink: 0;
    align-self: center;
    padding: 13px 28px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    font-family: inherit;
    font-size: var(--pe-fs-base);
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pe-score-retry:hover {
    transform: translateY(-2px);
    box-shadow: var(--pe-shadow-md);
}

/* ---------- filters ---------- */

.pe-score-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 0;
}

.pe-score-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-surface);
    color: var(--pe-text);
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-score-chip:hover {
    background: var(--pe-surface-hover);
}

.pe-score-chip.active {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
}

/* a filled disc with a white glyph, drawn in css */
.pe-chip-count {
    font-weight: 700;
}

.pe-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.pe-chip-icon.right {
    background: #21B55A;
}

.pe-chip-icon.right::after {
    content: "✓";
}

.pe-chip-icon.wrong {
    background: #E91E4D;
}

.pe-chip-icon.wrong::after {
    content: "✕";
}

/* ---------- the scrolling review list ---------- */

.review-container.pe-score-review {
    flex: 1;
    min-height: 0;              /* lets the flex child actually shrink and scroll */
    display: block;
    max-height: none;
    margin: 0 -30px;            /* the separator runs the full width of the modal */
    padding: 0 30px 26px 30px;
    border-top: 1px solid var(--pe-border);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* the scrollbar of the rest of the app, starting on the separator */
.review-container.pe-score-review::-webkit-scrollbar {
    width: 6px;
}

.review-container.pe-score-review::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.review-container.pe-score-review::-webkit-scrollbar-thumb {
    background: rgba(11, 35, 91, 0.3);
    border-radius: 3px;
}

.review-container.pe-score-review::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 35, 91, 0.5);
}

body.dark-mode .review-container.pe-score-review::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .review-container.pe-score-review::-webkit-scrollbar-thumb {
    background: rgba(250, 229, 5, 0.3);
}

body.dark-mode .review-container.pe-score-review::-webkit-scrollbar-thumb:hover {
    background: rgba(250, 229, 5, 0.5);
}

/* ---------- one article group ---------- */

.pe-review-blog {
    margin: 26px 0 14px 0;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    line-height: 1.4;
    color: #1B76D6;
    text-decoration: none;
    display: block;
}

a.pe-review-blog:hover {
    text-decoration: underline;
}

body.dark-mode .pe-review-blog {
    color: #6FB4F5;
}

/* ---------- one question ---------- */

.pe-review-q {
    margin-bottom: 22px;
}

.pe-review-q[hidden] {
    display: none;
}

.pe-review-question {
    margin: 0 0 14px 0;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    line-height: 1.45;
    color: var(--pe-navy);
}

body.dark-mode .pe-review-question {
    color: var(--pe-text);
}

.pe-review-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* one answer row */
.pe-review-opt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: var(--pe-radius-sm);
    background: var(--pe-surface);
}

.pe-review-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pe-navy);
    color: var(--pe-yellow);
    font-size: var(--pe-fs-xs);
    font-weight: 700;
}

.pe-review-text {
    flex: 1;
    min-width: 0;
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    line-height: 1.45;
    color: var(--pe-text);
}

.pe-review-mark {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* the right answer and the one the reader picked sit on a coloured block */
.pe-review-opt.is-right {
    background: #E9F9EF;
    box-shadow: 5px 6px 0 #21B55A;
}

.pe-review-opt.is-right .pe-review-mark {
    background: #21B55A;
}

.pe-review-opt.is-right .pe-review-mark::after {
    content: "✓";
}

.pe-review-opt.is-wrong {
    background: #FDEFF2;
    box-shadow: 5px 6px 0 #E91E4D;
}

.pe-review-opt.is-wrong .pe-review-mark {
    background: #E91E4D;
}

.pe-review-opt.is-wrong .pe-review-mark::after {
    content: "✕";
}

body.dark-mode .pe-review-opt.is-right {
    background: rgba(33, 181, 90, 0.16);
}

body.dark-mode .pe-review-opt.is-wrong {
    background: rgba(233, 30, 77, 0.16);
}

/* nothing matches the active filter */
.pe-review-empty {
    padding: 34px 0;
    text-align: center;
    font-size: var(--pe-fs-sm);
    color: var(--pe-text-muted);
}

/* ---------- phones ---------- */

@media (max-width: 760px) {
    .score-display.pe-score {
        padding: 22px 18px 0 18px;
        max-height: 92vh;
    }

    .pe-score-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px;
    }

    .pe-score-art {
        width: 84px;
        height: 84px;
        align-self: center;
    }

    .pe-score-stats {
        gap: 14px;
    }

    .pe-stat {
        padding-right: 14px;
    }

    .pe-score-retry {
        width: 100%;
    }

    .pe-score-filters {
        padding: 18px 0;
        gap: 8px;
    }

    .pe-score-chip {
        padding: 10px 16px;
    }

    .review-container.pe-score-review {
        margin: 0 -18px;
        padding: 0 18px 20px 18px;
    }

    .pe-review-opt {
        padding: 12px 14px;
        gap: 12px;
    }
}

/* ============================================================
   HEADER CONTROLS AND HERO TEXT - REVISION
   Loaded after the first pass of the redesign, so these win.
   ============================================================ */

/* the logo sits left, everything else is pushed to the right edge */
.pe-header .header-icons {
    margin-left: auto;
}

/* ---------- the theme and language glyphs ----------
   No disc, no border: a plain glyph that only changes colour on hover,
   the way the sign in pill does. */

.pe-icon-btn {
    box-sizing: content-box;
    width: auto;
    height: auto;
    padding: 6px;
    border: none;
    border-radius: 0;
    background: transparent;
    /* the legacy .settings-icon paints a disc and a glow around the globe */
    box-shadow: none;
    color: var(--pe-navy);
    font-size: 26px;
    line-height: 1;
    transition: color 0.25s ease;
}

.pe-icon-btn:hover,
.settings-dropdown.active .settings-icon.pe-icon-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--pe-primary-bg-hover);
}

body.dark-mode .pe-icon-btn {
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--pe-yellow);
}

body.dark-mode .pe-icon-btn:hover,
body.dark-mode .settings-dropdown.active .settings-icon.pe-icon-btn {
    background: transparent;
    box-shadow: none;
    color: var(--pe-primary-bg-hover);
}

/* ---------- sign in: colour only, no lift ---------- */

.pe-signin,
.pe-signin:hover {
    transform: none;
}

.pe-signin:hover {
    box-shadow: var(--pe-shadow-sm);
}

/* ---------- the search, collapsed to its magnifier ---------- */

.pe-header .pe-search {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 38px;                       /* just the glyph until it is opened */
    max-width: none;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--pe-radius-pill);
    overflow: hidden;
    transition: width 0.3s ease, background-color 0.3s ease, padding 0.3s ease;
}

.pe-header .pe-search.open {
    width: clamp(190px, 24vw, 320px);
    padding-right: 6px;
    background: var(--pe-surface);
}

.pe-header .pe-search.open:focus-within {
    border-color: var(--pe-navy);
    background: var(--pe-bg);
}

body.dark-mode .pe-header .pe-search.open:focus-within {
    border-color: var(--pe-yellow);
}

.pe-search-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--pe-navy);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease;
}

.pe-search-toggle:hover {
    color: var(--pe-primary-bg-hover);
}

body.dark-mode .pe-search-toggle {
    color: var(--pe-yellow);
}

body.dark-mode .pe-search-toggle:hover {
    color: var(--pe-primary-bg-hover);
}

.pe-header .pe-search:not(.open) .pe-search-clear,
.pe-header .pe-search:not(.open) .pe-search-results {
    display: none;
}

.pe-header .pe-search input {
    flex: 1;
    min-width: 0;
    width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.pe-header .pe-search.open input {
    padding: 0 4px 0 2px;
    opacity: 1;
    pointer-events: auto;
}

/* ---------- hero copy: aligned on the buttons, never centred ---------- */

.pe-hero .knowledge-title,
.pe-hero .knowledge-subtitle {
    width: auto;
    text-align: left;
}

.pe-hero .knowledge-title h1,
.pe-hero .knowledge-subtitle h5 {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* Phones keep the centred wording of the current design. */
@media (max-width: 700px) {
    .pe-hero-content {
        text-align: center;
    }

    .pe-hero .knowledge-title,
    .pe-hero .knowledge-subtitle,
    .pe-hero .knowledge-title h1,
    .pe-hero .knowledge-subtitle h5 {
        text-align: center;
    }

    .pe-hero .knowledge-subtitle h5 {
        margin-left: auto;
        margin-right: auto;
    }

    .pe-hero-actions {
        justify-content: center;
    }

    /* An open field and the sign in pill do not fit the row together, and the
       overflow pushes the whole page wider than the screen. While the field is
       open it owns the row; the pill comes back when it folds away. */
    /* !important is deliberate: updateUserUI writes display straight onto the
       element, and an inline style cannot be outranked any other way. */
    .pe-header.search-open .pe-signin {
        display: none !important;
    }

    .pe-header .pe-search.open {
        width: min(300px, 62vw);
    }
}

/* ============================================================
   HEADER SEARCH RESULTS
   The panel hangs under the field, so the form can no longer clip
   its own overflow - the collapsed state relies on the input being
   zero width instead.
   ============================================================ */

.pe-header .pe-search {
    position: relative;
    overflow: visible;
}

.pe-search-results {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 200;
    width: min(440px, calc(100vw - 32px));
    max-height: min(60vh, 460px);

    /*
        The rows scroll, not the panel. Scrolling the panel itself put the scrollbar
        against the rounded corner, where its square track showed outside the curve,
        and it carried the heading and the "show the rest" button out of sight with it.
    */
    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding: 10px;
    background: var(--pe-bg);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    box-shadow: var(--pe-shadow-md);
    text-align: left;
}

.pe-search-results[hidden] {
    display: none;
}

.pe-search-heading {
    margin: 6px 10px 8px 10px;
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pe-text-muted);
}

/* one matching article */
.pe-search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--pe-radius-sm);
    text-decoration: none;
    color: inherit;
}

.pe-search-hit:hover,
.pe-search-hit:focus-visible,
.pe-search-hit.is-active {
    background: var(--pe-surface);
    outline: none;
}

/* how many articles matched, beside the "Articles" label */
.pe-search-count {
    margin-left: 6px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/*
    The line that says why a result is in the list: the piece of text that actually
    matched. One line only, like the two the title is allowed, so a long paragraph
    cannot push the panel open.
*/
.pe-search-hit-why {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    font-size: var(--pe-fs-xs);
    line-height: 1.45;
    color: var(--pe-text-muted);
}

/* shown only when the quoted text is not in the language being read */
.pe-search-hit-lang {
    display: inline-block;
    margin-right: 5px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--pe-surface);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--pe-text-muted);
}

.pe-search-hit mark {
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(250, 229, 5, 0.45);
    color: inherit;
    font-weight: 700;
}

body.dark-mode .pe-search-hit mark {
    background: rgba(250, 229, 5, 0.25);
    color: var(--pe-text);
}

body.dark-mode .pe-search-hit.is-active,
body.dark-mode .pe-search-hit:hover {
    background: var(--pe-surface-hover);
}

/* the rest of the matches, when there are more than the panel shows at once */
.pe-search-more {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 12px;
    border: none;
    border-top: 1px solid var(--pe-border);
    background: none;
    color: var(--pe-text-muted);
    font-family: inherit;
    font-size: var(--pe-fs-xs);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.pe-search-more:hover {
    color: var(--pe-text);
}

.pe-search-more[hidden] {
    display: none;
}

.pe-search-hit-cover {
    flex-shrink: 0;
    width: 64px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--pe-radius-sm);
    background: var(--pe-surface);
}

.pe-search-hit-cover.is-empty {
    display: block;
}

.pe-search-hit-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pe-search-hit-title {
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--pe-text);

    /* two lines at most, so a long title cannot push the panel open */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pe-search-hit-meta {
    font-size: var(--pe-fs-xs);
    color: var(--pe-text-muted);
}

.pe-search-empty,
.pe-search-hint {
    margin: 0;
    padding: 16px 12px 20px 12px;
    text-align: center;
    font-size: var(--pe-fs-sm);
    color: var(--pe-text-muted);
}

.pe-search-empty[hidden],
.pe-search-hint[hidden] {
    display: none;
}

.pe-search-hits {
    overflow-y: auto;
    min-height: 0;   /* a flex child will not shrink below its content without this */
}

.pe-search-hits::-webkit-scrollbar {
    width: 6px;
}

.pe-search-hits::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

.pe-search-hits::-webkit-scrollbar-thumb {
    background: rgba(11, 35, 91, 0.3);
    border-radius: 3px;
}

body.dark-mode .pe-search-hits::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .pe-search-hits::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

body.dark-mode .pe-search-results::-webkit-scrollbar-thumb {
    background: rgba(250, 229, 5, 0.3);
}

@media (max-width: 700px) {
    /* On a phone the panel spans the screen rather than the field. Anchoring it to
       the field would centre it on something sitting right of centre, and a full
       width panel would then hang off the left edge - so it is pinned to the
       viewport, just under the header. */
    .pe-search-results {
        position: fixed;
        top: 80px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        transform: none;
    }
}

/* ============================================================
   HERO GUTTER, ARTICLE WIDTH AND QUIZ ANSWERS - REVISION
   ============================================================ */

/* The hero used to be exactly the content width, so on a window that happens to be
   that wide it ran edge to edge. This keeps a gutter whatever the window. */
.pe-hero {
    width: calc(100% - 48px);
    max-width: var(--pe-page-width);
}

/* A wider reading column: less empty margin on either side of an article. */
body.blog-page .quiz-container {
    max-width: 880px;
}

/* ---------- answer cards ---------- */

/* No outline on the option a reader picks, nor on an answered question: the tint of
   the card and the check or cross carry the state. */
.pe-options .input-container.is-picked {
    background: var(--pe-surface-hover);
    border-color: transparent;
}

body.dark-mode .pe-options .input-container.is-picked {
    background: var(--pe-surface-hover);
    border-color: transparent;
}

/* the letter of the option, a size down */
.pe-options .option-badge {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-radius: 50%;
    font-size: 11px;
}

/* ---------- the state circle of an option ---------- */

.pe-options .cercle-response {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid var(--pe-border-strong);
    background: transparent;
    box-shadow: none;
    font-size: 13px;
}

/* the right answer: a filled disc, no ring around it */
.pe-options .cercle-response.is-right {
    background: var(--pe-navy);
    border-color: var(--pe-navy);
    color: #FFFFFF;
}

body.dark-mode .pe-options .cercle-response.is-right {
    background: var(--pe-yellow);
    border-color: var(--pe-yellow);
    color: var(--pe-navy);
}

/* the answer that was picked and was wrong: the cross alone */
.pe-options .cercle-response.is-wrong {
    background: transparent;
    border-color: var(--pe-border-strong);
    color: var(--pe-text-muted);
}

body.dark-mode .pe-options .cercle-response.is-wrong {
    border-color: var(--pe-border-strong);
    color: var(--pe-text-muted);
}

/* ---------- the correction line ---------- */

/* the legacy rule puts a coloured glow around this dot */
.pe-quiz-item .cercle-correction-True,
.pe-quiz-item .cercle-correction-False,
body.dark-mode .pe-quiz-item .cercle-correction-True,
body.dark-mode .pe-quiz-item .cercle-correction-False {
    box-shadow: none;
}

/* ---------- confirm ---------- */

.pe-quiz-item .confirmation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 0;
    line-height: 1;
}

/* ============================================================
   PROFILE DROPDOWN
   The same card as the language menu next to it: same width,
   same border, same rows.
   ============================================================ */

.pe-header .user-dropdown,
.pe-header .settings-menu {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    box-sizing: border-box;
    background: var(--pe-bg);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    box-shadow: var(--pe-shadow-md);
    overflow: hidden;
}

.pe-header .user-dropdown .user-menu {
    display: block;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/*
    border-box is what makes the tick visible. Without it the row is 100% of the
    panel plus its own 32px of padding, so it ran 25px past the panel, and the
    panel clips what overflows - taking the tick at the end of the row with it.
*/
.pe-header .user-dropdown .user-menu-item,
.pe-header .settings-menu .settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--pe-radius-sm);
    background: transparent;
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    color: var(--pe-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.25s ease, padding-left 0.25s ease, color 0.25s ease;
}

.pe-header .user-dropdown .user-menu-item:hover,
.pe-header .settings-menu .settings-item:hover {
    background: rgba(11, 35, 91, 0.08);
    padding-left: 24px;
    color: var(--pe-navy);
    transform: none;
}

body.dark-mode .pe-header .user-dropdown .user-menu-item:hover,
body.dark-mode .pe-header .settings-menu .settings-item:hover {
    background: rgba(250, 229, 5, 0.15);
    color: var(--pe-yellow);
}

/* signing out closes the menu, so it reads as the last of the two */
.pe-header .user-dropdown .user-menu-item.is-signout {
    margin-top: 4px;
    border-top: 1px solid var(--pe-border);
    border-radius: 0 0 var(--pe-radius-sm) var(--pe-radius-sm);
    font-weight: 700;
}

/* ============================================================
   ACCOUNT PAGE
   Same column as the sign in and register pages.
   ============================================================ */

.pe-account .pe-auth-form {
    max-width: 420px;
}

.pe-field-label {
    margin: 18px 2px 8px 2px;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

.pe-auth-form > .pe-field-label:first-of-type {
    margin-top: 0;
}

/* a small action living inside a field, like "Vérifier" next to the email */
.pe-field-action {
    flex-shrink: 0;
    margin-right: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    font-family: inherit;
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.pe-field-action:disabled {
    opacity: 0.55;
    cursor: default;
}

.pe-account-badge {
    margin: 8px 2px 0 2px;
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    color: #21B55A;
}

.pe-account-inline {
    display: flex;
    gap: 18px;
    margin-top: 10px;
}

.pe-account-link {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

body.dark-mode .pe-account-link {
    color: var(--pe-yellow);
}

.pe-account-link:disabled {
    opacity: 0.55;
    cursor: default;
}

/* the notifications switch */
.pe-account-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 26px;
    padding: 14px 16px;
    background: var(--pe-surface);
    border-radius: var(--pe-radius-sm);
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-text);
}

/* the password strength bar of the account form */
.pe-account .password-strength-account {
    height: 4px;
    margin: 8px 2px 0 2px;
    border-radius: 2px;
    background: var(--pe-border);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pe-account .password-strength-account.show {
    opacity: 1;
}

.pe-account .strength-bar-account {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pe-account .strength-bar-account.weak {
    width: 33%;
    background: #E23B3B;
}

.pe-account .strength-bar-account.medium {
    width: 66%;
    background: #F0A020;
}

.pe-account .strength-bar-account.strong {
    width: 100%;
    background: #21B55A;
}

/* a field the form is complaining about */
.pe-field input.input-error,
.pe-field input.error {
    color: #E23B3B;
}

.pe-field:has(input.input-error),
.pe-field:has(input.error) {
    border-color: #E23B3B;
}

.pe-field-error.error-message-account {
    display: none;
}

.pe-field-error.error-message-account.show {
    display: block;
}

/* deleting the account: text only, and unmistakably the dangerous one */
.pe-account-delete {
    align-self: center;
    margin-top: 16px;
    padding: 12px 28px;
    border: 1px solid #E23B3B;
    border-radius: var(--pe-radius-pill);
    background: transparent;
    color: #E23B3B;
    font-family: inherit;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-account-delete:hover {
    background: #E23B3B;
    color: #FFFFFF;
}

/* ============================================================
   MOBILE DRAWER
   Full screen as before, on the page background: white in light,
   navy in dark. Everything here outranks the legacy rules either
   by carrying .pe-drawer or by arriving later in the cascade.
   ============================================================ */

.mobile-menu-overlay.pe-drawer {
    background: rgba(20, 22, 28, 0.45);
    backdrop-filter: blur(2px);
}

.pe-drawer .mobile-menu-content,
.pe-drawer-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    background: var(--pe-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--pe-text);
    overflow: hidden;
}

/* ---------- head: brand on the left, collapse on the right ---------- */

.pe-drawer .pe-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 20px 18px 16px 18px;
    background: none;
    border: none;
}

.pe-drawer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.pe-drawer-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 8px;
}

.pe-drawer-brand span {
    font-size: var(--pe-fs-md);
    font-weight: 700;
    color: var(--pe-navy);
    white-space: nowrap;
}

body.dark-mode .pe-drawer-brand span {
    color: var(--pe-yellow);
}

.pe-drawer .pe-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--pe-radius-sm);
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-drawer .pe-drawer-close:hover {
    background: var(--pe-surface);
    color: var(--pe-text);
}

/* ---------- the rows ---------- */

.pe-drawer-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 10px 20px 10px;
}

.pe-drawer .pe-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    margin: 2px 0;
    padding: 13px 14px;
    border: none;
    border-radius: var(--pe-radius-sm);
    background: transparent;
    box-shadow: none;
    font-size: var(--pe-fs-base);
    font-weight: 500;
    color: var(--pe-text-muted);
    text-decoration: none;
    cursor: pointer;
    transform: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-drawer .pe-drawer-item:hover,
.pe-drawer .pe-drawer-item.active,
.pe-drawer .pe-drawer-item.open {
    background: var(--pe-surface);
    color: var(--pe-text);
    transform: none;
    box-shadow: none;
}

.pe-drawer .pe-drawer-item > i:first-child {
    flex-shrink: 0;
    width: 22px;
    font-size: 21px;
    text-align: center;
    color: inherit;
    background: none;
    padding: 0;
}

.pe-drawer .pe-drawer-item > span {
    flex: 1;
    min-width: 0;
    color: inherit;
}

.pe-drawer .pe-drawer-caret {
    flex-shrink: 0;
    font-size: 17px;
    color: var(--pe-text-muted);
    transition: transform 0.25s ease;
}

.pe-drawer .settings-mobile-trigger.open .settings-arrow {
    transform: rotate(180deg);
}

.pe-drawer-sep {
    height: 1px;
    margin: 14px 14px;
    background: var(--pe-border);
}

/* ---------- submenus ---------- */

.pe-drawer .pe-drawer-sub {
    display: none;
    margin: 2px 0 6px 0;
    padding: 4px 0 4px 36px;
    background: none;
    border: none;
    box-shadow: none;
}

.pe-drawer .pe-drawer-sub.open,
.pe-drawer .pe-drawer-sub.show {
    display: block;
}

.pe-drawer .pe-drawer-subitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin: 2px 0;
    border: none;
    border-radius: var(--pe-radius-sm);
    background: transparent;
    font-size: var(--pe-fs-sm);
    font-weight: 500;
    color: var(--pe-text-muted);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.pe-drawer .pe-drawer-subitem:hover {
    background: var(--pe-surface);
    color: var(--pe-text);
}

.pe-drawer .pe-drawer-subitem .flag-icon {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.pe-drawer .pe-drawer-subitem span {
    flex: 1;
}

.pe-drawer .pe-drawer-subitem .language-check {
    display: none;
    font-size: 16px;
    color: var(--pe-navy);
}

body.dark-mode .pe-drawer .pe-drawer-subitem .language-check {
    color: var(--pe-yellow);
}

.pe-drawer .pe-drawer-subitem.active .language-check,
.pe-drawer .pe-drawer-subitem.selected .language-check {
    display: inline-block;
}

/* ---------- the account row at the foot ---------- */

.pe-drawer-foot {
    flex-shrink: 0;
    padding: 10px 10px 18px 10px;
    border-top: 1px solid var(--pe-border);
    background: none;
}

.pe-drawer .pe-drawer-user {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    margin: 0;
    padding: 12px 14px;
    border: none;
    border-radius: var(--pe-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--pe-text);
    cursor: pointer;
    transform: none;
    transition: background-color 0.2s ease;
}

.pe-drawer .pe-drawer-user:hover {
    background: var(--pe-surface);
    transform: none;
    box-shadow: none;
}

.pe-drawer .pe-drawer-user > i:first-child {
    flex-shrink: 0;
    font-size: 34px;
    color: var(--pe-navy);
    background: none;
    padding: 0;
}

body.dark-mode .pe-drawer .pe-drawer-user > i:first-child {
    color: var(--pe-yellow);
}

.pe-drawer-user-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pe-drawer-user-text > span:first-child {
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

.pe-drawer-user-sub {
    font-size: var(--pe-fs-xs);
    color: var(--pe-text-muted);
}

/* the submenu of the account opens upward, above its row */
.pe-drawer-foot .pe-drawer-sub {
    padding-left: 14px;
}

/* ------------------------------------------------------------
   Neutralising the old drawer.
   The legacy rules carry an element selector (body.dark-mode ...),
   which outranks a plain class chain - so every counter here adds
   .pe-drawer on top of the same selector.
   ------------------------------------------------------------ */

/* the panel itself: the page background, not a gradient */
body.dark-mode .pe-drawer .mobile-menu-content,
body.dark-mode .pe-drawer .pe-drawer-panel {
    background: var(--pe-bg);
    background-image: none;
    box-shadow: none;
}

/* the sliding accent bar of a row */
.pe-drawer .mobile-menu-item::before,
body.dark-mode .pe-drawer .mobile-menu-item::before {
    content: none;
}

/* rows: no pill, no lift */
.pe-drawer .mobile-menu-item,
body.dark-mode .pe-drawer .mobile-menu-item,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.pe-drawer .mobile-menu-item:hover,
.pe-drawer .mobile-menu-item.active,
.pe-drawer .mobile-menu-item.settings-mobile-trigger.open,
body.dark-mode .pe-drawer .mobile-menu-item:hover,
body.dark-mode .pe-drawer .mobile-menu-item.active,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger:hover,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger.open {
    background: var(--pe-surface);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

/* icons: a plain glyph, never a badge */
.pe-drawer .mobile-menu-item i:not(.settings-arrow):not(.mobile-user-arrow),
.pe-drawer .mobile-menu-item:hover i:not(.settings-arrow):not(.mobile-user-arrow),
.pe-drawer .mobile-menu-item.active i:not(.settings-arrow):not(.mobile-user-arrow),
.pe-drawer .mobile-menu-item.settings-mobile-trigger:hover i:not(.settings-arrow):not(.mobile-user-arrow),
.pe-drawer .mobile-menu-item.settings-mobile-trigger.open i:not(.settings-arrow):not(.mobile-user-arrow),
body.dark-mode .pe-drawer .mobile-menu-item i:not(.settings-arrow):not(.mobile-user-arrow),
body.dark-mode .pe-drawer .mobile-menu-item:hover i:not(.settings-arrow):not(.mobile-user-arrow),
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger i:not(.settings-arrow):not(.mobile-user-arrow),
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger:hover i:not(.settings-arrow):not(.mobile-user-arrow) {
    width: 22px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    color: inherit;
    font-size: 21px;
}

/* the label of a row follows the row, in both themes */
.pe-drawer .mobile-menu-item span,
.pe-drawer .mobile-menu-item:hover span,
.pe-drawer .mobile-menu-item.active span,
.pe-drawer .mobile-menu-item.settings-mobile-trigger span,
.pe-drawer .mobile-menu-item.settings-mobile-trigger:hover span,
body.dark-mode .pe-drawer .mobile-menu-item span,
body.dark-mode .pe-drawer .mobile-menu-item:hover span,
body.dark-mode .pe-drawer .mobile-menu-item.active span,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger span,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger:hover span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.pe-drawer .settings-arrow,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger .settings-arrow,
body.dark-mode .pe-drawer .mobile-menu-item.settings-mobile-trigger.open .settings-arrow {
    color: var(--pe-text-muted);
    background: none;
    box-shadow: none;
}

/* submenus: the legacy ones animate a max-height and pull themselves
   out of the padding of the drawer */
.pe-drawer .mobile-settings-submenu,
.pe-drawer .mobile-user-submenu,
body.dark-mode .pe-drawer .mobile-user-submenu {
    max-height: none;
    overflow: visible;
    margin: 2px 0 6px 0;
    background: none;
}

.pe-drawer .mobile-settings-submenu.open,
.pe-drawer .mobile-user-submenu.open {
    max-height: none;
    padding: 4px 0 4px 36px;
}

.pe-drawer .mobile-settings-item,
.pe-drawer .mobile-user-item:not(.mobile-user-arrow),
body.dark-mode .pe-drawer .mobile-settings-item,
body.dark-mode .pe-drawer .mobile-user-item {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.pe-drawer .mobile-settings-item:hover,
.pe-drawer .mobile-user-item:hover,
body.dark-mode .pe-drawer .mobile-settings-item:hover,
body.dark-mode .pe-drawer .mobile-user-item:hover {
    background: var(--pe-surface);
    box-shadow: none;
    transform: none;
}

.pe-drawer .mobile-settings-item span,
.pe-drawer .mobile-user-item span,
body.dark-mode .pe-drawer .mobile-settings-item span,
body.dark-mode .pe-drawer .mobile-user-item span,
body.dark-mode .pe-drawer .mobile-user-item:hover span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* the tick of the selected language */
.pe-drawer .mobile-settings-item .language-check,
body.dark-mode .pe-drawer .mobile-settings-item .language-check {
    margin-left: auto;
    opacity: 1;
}

/* the account row */
.pe-drawer .pe-drawer-user i:not(.mobile-user-arrow),
body.dark-mode .pe-drawer .pe-drawer-user i:not(.mobile-user-arrow),
body.dark-mode .pe-drawer .pe-drawer-user:hover i:not(.mobile-user-arrow) {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
    font-size: 34px;
}

.pe-drawer .pe-drawer-user .pe-drawer-user-text > span:first-child,
body.dark-mode .pe-drawer .pe-drawer-user .pe-drawer-user-text > span:first-child {
    color: var(--pe-text);
    font-size: var(--pe-fs-sm);
    font-weight: 700;
}

.pe-drawer .pe-drawer-user .pe-drawer-user-sub,
body.dark-mode .pe-drawer .pe-drawer-user .pe-drawer-user-sub {
    color: var(--pe-text-muted);
    font-size: var(--pe-fs-xs);
    font-weight: 500;
}

/* the drawer scrollbar, like the rest of the app */
.pe-drawer .mobile-menu-content::-webkit-scrollbar,
.pe-drawer-nav::-webkit-scrollbar {
    width: 6px;
}

.pe-drawer-nav::-webkit-scrollbar-track {
    background: transparent;
}

.pe-drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(11, 35, 91, 0.25);
    border-radius: 3px;
}

body.dark-mode .pe-drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(250, 229, 5, 0.3);
}

/* ------------------------------------------------------------
   A liked article gets a solid heart. This build of Tabler ships
   outline hearts only - there is no ti-heart-filled - so the glyph
   is swapped for the text heart, which is filled by definition.
   The variation selector keeps it a glyph rather than an emoji.
   ------------------------------------------------------------ */

.blog .blog-likes.liked .heart-icon::before {
    content: "♥\FE0E";
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
    font-size: 19px;
    line-height: 1;
}

.blog.pe-post .blog-likes.liked .heart-icon,
.blog.pe-article .blog-likes.liked .heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e0245e;
}

/* ------------------------------------------------------------
   No pill behind the like button, in any state or any context.
   The old design floated these actions over a photograph, so it
   gave them a tinted capsule and a red one once liked; the cards
   and the article page put them on the page itself.
   ------------------------------------------------------------ */

.blog-likes,
.blog-likes:hover,
.blog-likes.liked,
.blog-likes.liked:hover,
.blog-comments,
.blog-comments:hover,
.blog-share,
.blog-share:hover,
.blog-download,
.blog-download:hover {
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

/* ============================================================
   WIDE SCREENS - LESS EMPTY MARGIN
   The content column was a fixed 1320px, which reads well on a
   laptop but leaves 300px of blank page on either side of an
   external monitor. It now grows with the window in steps, and
   the reading column of an article grows with it - more slowly,
   because a line of prose stops being readable past ~1100px.
   ============================================================ */

@media (min-width: 1500px) {
    :root {
        --pe-page-width: 1440px;
    }

    body.blog-page .quiz-container {
        max-width: 960px;
    }
}

@media (min-width: 1700px) {
    :root {
        --pe-page-width: 1600px;
    }

    body.blog-page .quiz-container {
        max-width: 1020px;
    }
}

@media (min-width: 1900px) {
    :root {
        --pe-page-width: 1780px;
    }

    body.blog-page .quiz-container {
        max-width: 1120px;
    }
}

@media (min-width: 2300px) {
    :root {
        --pe-page-width: 2040px;
    }
}

/* ============================================================
   DARK MODE - NO BOX AROUND A ROW OR ITS CATEGORY
   The legacy cards were floating panels: body.dark-mode .blog gave
   them a full border and body.dark-mode .blog-type gave the badge
   a yellow one. Those selectors carry an element (body), so they
   outrank .blog.pe-post and .blog.pe-post .blog-type here however
   late this file loads - the rows kept a full outline in the dark
   theme while the light one showed only the separator. Restated
   at the same weight, with the border shorthand rather than just
   its colour, so nothing is left to inherit.
   ============================================================ */

body.dark-mode .blog.pe-post,
body.dark-mode .blog.pe-post:hover {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--pe-border);
}

body.dark-mode .blog.pe-post .blog-type,
body.dark-mode .blog.pe-article .blog-type {
    background: var(--pe-surface);
    border: none;
    box-shadow: none;
    transform: none;
}

/* the chip still answers the pointer, it just does it with its fill */
body.dark-mode .blog.pe-post .blog-type:hover,
body.dark-mode .blog.pe-article .blog-type:hover {
    background: var(--pe-surface-hover);
    border: none;
    box-shadow: none;
    transform: none;
}

body.dark-mode .blog.pe-post .blog-type i,
body.dark-mode .blog.pe-post .blog-type h5,
body.dark-mode .blog.pe-article .blog-type i,
body.dark-mode .blog.pe-article .blog-type h5 {
    color: var(--pe-text-muted);
}

/* ============================================================
   AUTHOR CHIPS - TWO TO A LINE WHERE THEY FIT
   The list already wraps; the chips were simply too padded for two
   names to share a row, so every author took one. A tighter chip
   lets short names pair up, and a long one still claims its own
   line rather than being cut.
   ============================================================ */

#authorChips .pe-chip {
    padding: 9px 13px;
}

/* ============================================================
   TRENDING META - TOGETHER WHERE THEY FIT, STACKED WHERE THEY DO NOT
   A name is never cut. When it cannot share the line with the date
   the two stack, and the row gap is small enough that they still
   read as one entry rather than two.
   ============================================================ */

.pe-trend-meta {
    flex-wrap: wrap;
    /* 2px between the stacked lines, 10px between the name and the date when
       they do share one. The 10px also buys back the two pixels that names
       like "Soufiyan Ettahiri" were overrunning the line by. */
    gap: 2px 10px;
}

.pe-trend-meta span {
    gap: 5px;
}

/* each part holds together; only the row between them breaks */
.pe-trend-who,
.pe-trend-when {
    white-space: nowrap;
}

/* ============================================================
   LANGUAGE MENU - THE TICK ON THE CURRENT LANGUAGE
   The legacy sheet hides the tick with opacity alone, at a weight
   the redesigned menu can reach past. Stated here on the menu
   itself, and with visibility as well as opacity so an invisible
   tick cannot be clicked or read out. The chosen row also carries
   the accent and a heavier weight, so which language is current
   survives even where an icon font fails to load.
   ============================================================ */

.pe-header .settings-menu .settings-item .language-check {
    margin-left: auto;
    font-size: 16px;
    opacity: 0;
    visibility: hidden;
}

.pe-header .settings-menu .settings-item.active .language-check {
    opacity: 1;
    visibility: visible;
}

.pe-header .settings-menu .settings-item.active {
    color: var(--pe-navy);
    font-weight: 700;
}

body.dark-mode .pe-header .settings-menu .settings-item.active {
    color: var(--pe-yellow);
}

.pe-header .settings-menu .settings-item.active .language-check {
    color: currentColor;
}

/* The drawer already gates its own tick on display, a few blocks up
   (.pe-drawer-subitem .language-check), so it needs nothing here. */

/* ============================================================
   SUGGESTED ARTICLES  (foot of a single blog page, slide 13)
   Three cards: cover with the category pinned to it, the byline,
   the title. The three actions appear over the cover on hover -
   icons only, as circles.
   ============================================================ */

.pe-suggested {
    margin: 56px 0 0 0;
    padding-top: 34px;
    border-top: 1px solid var(--pe-border);
}

.pe-suggested-head {
    margin: 0 0 22px 0;
    font-size: var(--pe-fs-lg);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .pe-suggested-head {
    color: var(--pe-yellow);
}

.pe-suggested-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.pe-suggest {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---------- the cover ---------- */

.pe-suggest-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--pe-radius-md);
    overflow: hidden;
    background: var(--pe-surface);
}

.pe-suggest-media {
    display: block;
    width: 100%;
    height: 100%;
}

.pe-suggest-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* the category, pinned to the top right of the cover */
.blog-type.pe-suggest-cat {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 14px;
    border: none;
    border-radius: var(--pe-radius-pill);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px rgba(11, 35, 91, 0.14);
    transform: none;
    pointer-events: none;
}

/*
    The legacy sheet hides every badge on an article page - "the category badge of
    the card now lives in the toolbar" - and that rule carries an element, so it
    outranks the badge above and took the one on these cards with it. Restated with
    the page class so the two agree about which badge is meant.
*/
body.blog-page .blog-type.pe-suggest-cat {
    display: inline-flex;
}

/* The legacy badge fills itself with an inset ::after, which over a static badge
   stretches to the whole card and swallows every click underneath it. */
.blog-type.pe-suggest-cat::after {
    content: none;
}

.blog-type.pe-suggest-cat i,
.blog-type.pe-suggest-cat h5 {
    margin: 0;
    color: var(--pe-navy);
    font-size: var(--pe-fs-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.blog-type.pe-suggest-cat i {
    font-size: 15px;
}

body.dark-mode .blog-type.pe-suggest-cat {
    /* the surface of the dark theme, kept translucent over the photograph */
    background: rgba(22, 33, 60, 0.94);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .blog-type.pe-suggest-cat i,
body.dark-mode .blog-type.pe-suggest-cat h5 {
    color: #FFFFFF;
}

/* ---------- the actions over the cover ---------- */

.pe-suggest-actions {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.pe-suggest:hover .pe-suggest-actions,
.pe-suggest-cover:focus-within .pe-suggest-actions {
    opacity: 1;
    transform: none;
}

/*
    A circle behind each icon here, against the rule that strips the pill everywhere
    else: on a photograph the icons need their own ground to stay legible, which is
    what the reference shows. Named with three classes so it outranks that rule.
*/
.pe-suggest .pe-suggest-actions .blog-likes,
.pe-suggest .pe-suggest-actions .blog-comments,
.pe-suggest .pe-suggest-actions .blog-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(11, 35, 91, 0.22);
    color: var(--pe-navy);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pe-suggest .pe-suggest-actions .blog-likes:hover,
.pe-suggest .pe-suggest-actions .blog-comments:hover,
.pe-suggest .pe-suggest-actions .blog-share:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(11, 35, 91, 0.28);
}

.pe-suggest .pe-suggest-actions i {
    font-size: 19px;
    color: var(--pe-navy);
}

/* Icons only. The counts stay in the markup because LikeManager abandons a button
   that has no .likes-count - and the red heart goes with it. */
.pe-suggest .pe-suggest-actions .likes-count,
.pe-suggest .pe-suggest-actions .comments-count {
    display: none;
}

.pe-suggest .pe-suggest-actions .blog-likes.liked i,
.pe-suggest .pe-suggest-actions .blog-likes.liked .heart-icon {
    color: #e0245e;
}

body.dark-mode .pe-suggest .pe-suggest-actions .blog-likes,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-comments,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-share,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-likes:hover,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-comments:hover,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-share:hover {
    background: var(--pe-surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body.dark-mode .pe-suggest .pe-suggest-actions i {
    color: var(--pe-yellow);
}

/* A pointer that cannot hover never reveals them, so on a touch screen they stay. */
@media (hover: none) {
    .pe-suggest-actions {
        opacity: 1;
        transform: none;
    }
}

/* ---------- the byline and the title ---------- */

/* The name and the date share one line. A card is only about a third of the
   column, so they are set a little smaller than the byline of an article row and
   the month is abbreviated - the two together leave some 70px of slack for a long
   name instead of pushing the date onto a line of its own. */
.pe-suggest-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pe-text);
}

.pe-suggest-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* A name longer than the slack gives way rather than breaking the line; the date
   never shrinks, so the pair still reads as one byline. */
.pe-suggest-who {
    min-width: 0;
}

.pe-suggest-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe-suggest-when {
    flex-shrink: 0;
}

.pe-suggest-meta i {
    font-size: 14px;
    color: var(--pe-navy);
}

body.dark-mode .pe-suggest-meta i {
    color: var(--pe-yellow);
}

.pe-suggest-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* a step under the article rows: three of these sit side by side */
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    /* The body text colour, which is the near black of the palette in the light
       theme and near white in the dark one - so one declaration covers both and the
       accent is kept for the hover, as on the article rows and the trending list. */
    color: var(--pe-text);
    text-decoration: none;
}

.pe-suggest-title:hover {
    color: var(--pe-navy);
    text-decoration: underline;
}

body.dark-mode .pe-suggest-title:hover {
    color: var(--pe-yellow);
}

@media (max-width: 760px) {
    .pe-suggested-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .pe-suggested {
        margin-top: 40px;
    }
}

/* ------------------------------------------------------------
   The two header menus carried a frozen #16213e in the dark
   theme, from the legacy sheet and at a weight this file's
   var(--pe-bg) could not reach. It happens to sit two units
   from the new surface, so nothing moves on screen - but the
   token means the next change to the grounds carries here too.
   ------------------------------------------------------------ */

body.dark-mode .pe-header .settings-menu,
body.dark-mode .pe-header .user-dropdown {
    background: var(--pe-surface);
}

/* ============================================================
   COMMENTS - REDESIGN
   One quiet card: a title with the count, the close button of the
   share modal, a scrolling thread of avatar rows, and the field
   to write in at the foot. No filter and no like, dislike or
   reply - the app has none of them. The three dots belong to the
   reader's own comments and hold update and delete.
   ============================================================ */

.comments-modal-overlay {
    background: rgba(7, 20, 51, 0.55);
    backdrop-filter: blur(3px);
}

.comments-modal {
    width: min(720px, calc(100vw - 32px));
    max-height: min(82vh, 780px);
    padding: 0;
    background: var(--pe-bg);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-lg);
    box-shadow: var(--pe-shadow-md);
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- header ---------- */

.comments-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px 18px 26px;
    margin: 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pe-border);
}

.comments-modal-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: var(--pe-fs-lg);
    font-weight: 700;
    color: var(--pe-navy);
}

body.dark-mode .comments-modal-title {
    color: #FFFFFF;
}

.comments-modal-count {
    font-weight: 700;
    color: var(--pe-text-muted);
}

/* the close button of the share modal, to the letter */
.comments-modal .close-comments {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.comments-modal .close-comments:hover {
    background: var(--pe-surface);
    color: var(--pe-navy);
    transform: none;
}

body.dark-mode .comments-modal .close-comments:hover {
    background: var(--pe-surface);
    color: var(--pe-yellow);
}

/* ---------- the thread ---------- */

.comments-list-container {
    flex: 1;
    min-height: 0;
    padding: 6px 26px;
    overflow-y: auto;
}

.comment-item {
    padding: 18px 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.comment-item:hover {
    background: none;
    transform: none;
    box-shadow: none;
}

.comment-item + .comment-item {
    border-top: 1px solid var(--pe-border);
}

/* avatar, then the text, then the menu */
.comment-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.comment-main {
    flex: 1;
    min-width: 0;
}

.comments-list .comment-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 50%;
    background: var(--pe-navy);
    color: #FFFFFF;
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    box-shadow: none;
}

body.dark-mode .comments-list .comment-avatar {
    background: var(--pe-yellow);
    color: var(--pe-navy);
}

.comment-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 6px 0;
    padding: 0;
    border: none;
}

.comment-author-name {
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

.comment-date {
    font-size: var(--pe-fs-xs);
    font-weight: 500;
    color: var(--pe-text-muted);
}

.comment-text {
    margin: 0;
    padding: 0;
    font-size: var(--pe-fs-sm);
    line-height: 1.6;
    color: var(--pe-text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- the three dots ---------- */

.comment-menu {
    position: relative;
    flex-shrink: 0;
}

.comment-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.comment-menu-trigger:hover {
    background: var(--pe-surface);
    color: var(--pe-text);
}

/* the dropdown panel is gone: the actions open in place of the dots */

/* ---------- editing in place ---------- */

.comment-edit-form {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
}

.comment-edit-textarea {
    width: 100%;
    min-height: 84px;
    padding: 12px 14px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-sm);
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    line-height: 1.6;
    color: var(--pe-text);
    resize: vertical;
    box-sizing: border-box;
}

.comment-edit-textarea:focus {
    outline: none;
    border-color: var(--pe-navy);
    background: var(--pe-bg);
}

body.dark-mode .comment-edit-textarea:focus {
    border-color: var(--pe-yellow);
}

.comment-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.comment-edit-save,
.comment-edit-cancel {
    padding: 8px 18px;
    border: none;
    border-radius: var(--pe-radius-pill);
    font-family: var(--pe-font);
    font-size: var(--pe-fs-xs);
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.comment-edit-save {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
}

.comment-edit-cancel {
    background: var(--pe-surface);
    color: var(--pe-text-muted);
}

.comment-edit-cancel:hover {
    background: var(--pe-surface-hover);
}

/* ---------- writing, at the foot ---------- */

.comment-input-section {
    flex-shrink: 0;
    padding: 18px 26px 22px 26px;
    margin: 0;
    background: none;
    border: none;
    border-top: 1px solid var(--pe-border);
}

.comment-input-wrapper {
    position: relative;
    display: block;
    padding: 0;
    background: none;
    border: none;
}

.comment-textarea {
    /* block, so the wrapper is exactly the field: inline-block leaves descender
       room under it, and the send button - placed against the wrapper - was
       sitting that much closer to the field's edge than its offset said. */
    display: block;
    width: 100%;
    min-height: 92px;
    padding: 14px 66px 14px 16px;
    background: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius-md);
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    line-height: 1.6;
    color: var(--pe-text);
    resize: none;
    box-sizing: border-box;
}

.comment-textarea:focus {
    outline: none;
    border-color: var(--pe-navy);
    background: var(--pe-bg);
}

body.dark-mode .comment-textarea:focus {
    border-color: var(--pe-yellow);
}

/* the send button rides inside the field, as a disc */
.send-comment-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 50%;
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    font-size: 19px;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.send-comment-btn:hover {
    background: var(--pe-primary-bg-hover);
    transform: none;
    box-shadow: none;
}

/* ---------- empty and error ---------- */

/*
    An empty thread: two lines sitting where the first comment would be, left aligned
    on the same indent as a comment's own text. No icon, no box - the count in the
    header already says there is nothing.
*/
.no-comments {
    padding: 26px 0 20px 0;
    text-align: center;
    color: var(--pe-text-muted);
}

.no-comments p {
    margin: 0;
}

.no-comments-title {
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-text);
}

.no-comments-invite {
    margin-top: 4px;
    font-size: var(--pe-fs-sm);
    line-height: 1.6;
    color: var(--pe-text-muted);
}

/* The load failure keeps its icon, so it cannot be mistaken for an empty thread. */
.no-comments.is-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 20px;
    text-align: center;
}

.no-comments.is-error i {
    font-size: 30px;
    color: #e0245e;
}

@media (max-width: 700px) {
    .comments-modal {
        width: 100%;
        max-height: 88vh;
    }

    .comments-modal-header,
    .comment-input-section,
    .comments-list-container {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ------------------------------------------------------------
   The dark theme of the old comment sheet, restated on the
   tokens. Those rules carry body as an element, so a class on
   its own could not reach past them however late this file
   loads: the card kept a hardcoded #1a1a2e, the field a white
   wash and the send button lost its yellow altogether.
   ------------------------------------------------------------ */

body.dark-mode .comments-modal {
    background: var(--pe-bg);
    border-color: var(--pe-border);
    backdrop-filter: none;
}

body.dark-mode .comments-modal-header,
body.dark-mode .comment-input-section {
    background: none;
    border-color: var(--pe-border);
}

body.dark-mode .comment-item {
    background: none;
    border: none;
}

body.dark-mode .comment-item:hover {
    background: none;
}

body.dark-mode .comment-item + .comment-item {
    border-top: 1px solid var(--pe-border);
}

body.dark-mode .comment-author-name {
    color: var(--pe-text);
}

body.dark-mode .comment-date,
body.dark-mode .comment-text {
    color: var(--pe-text-muted);
}

body.dark-mode .comment-textarea,
body.dark-mode .comment-edit-textarea {
    background: var(--pe-surface);
    border-color: var(--pe-border);
    color: var(--pe-text);
}

body.dark-mode .comment-textarea:focus,
body.dark-mode .comment-edit-textarea:focus {
    background: var(--pe-bg);
    border-color: var(--pe-yellow);
}

body.dark-mode .send-comment-btn {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
    box-shadow: none;
}

body.dark-mode .send-comment-btn:hover {
    background: var(--pe-primary-bg-hover);
    color: var(--pe-primary-fg);
    box-shadow: none;
}

body.dark-mode .comment-edit-save {
    background: var(--pe-primary-bg);
    color: var(--pe-primary-fg);
}

body.dark-mode .comment-edit-cancel {
    background: var(--pe-surface);
    color: var(--pe-text-muted);
}

body.dark-mode .comment-menu-trigger:hover {
    background: var(--pe-surface-hover);
    color: var(--pe-text);
}

/* ============================================================
   COMMENTS - CORRECTIONS
   The close button of the share modal to the letter, the count
   in the colour of the word beside it, no rule between the
   comments, the date next to the name, a smaller send disc, and
   the actions as a strip that opens in place of the dots.
   ============================================================ */

/* ---------- the count ---------- */

.comments-modal-title {
    /* a hair's gap, not a word's */
    gap: 5px;
}

.comments-modal-count {
    /* the colour of the word it follows, one step down in size */
    color: inherit;
    font-size: 0.82em;
    font-weight: 700;
}

/* ---------- the close button, copied from the share modal ---------- */

.comments-modal .close-comments {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #FFFFFF;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.comments-modal .close-comments:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #111827;
    transform: none;
}

body.dark-mode .comments-modal .close-comments {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .comments-modal .close-comments:hover {
    background: rgba(250, 229, 5, 0.2);
    border-color: rgba(250, 229, 5, 0.35);
    color: var(--pe-yellow);
}

/* ---------- no rule between the comments ---------- */

.comment-item + .comment-item,
body.dark-mode .comment-item + .comment-item {
    border-top: none;
}

.comment-item {
    padding: 14px 0;
}

/* ---------- the date sits beside the name ---------- */

/*
    The old sheet spreads this row with space-between, which threw the date to the
    far edge of the card. Here the two belong together, as the mockup reads them.
*/
.comments-list .comment-header {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.comment-date {
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- the send disc ---------- */

.send-comment-btn {
    right: 12px;
    /* off the foot of the field rather than against it */
    bottom: 14px;
    width: 34px;
    height: 34px;
    font-size: 16px;
}

/* the label is gone for good: only the arrow lives in the disc */
.send-comment-btn span {
    display: none;
}

/* ---------- the actions strip ---------- */

.comment-menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

/*
    Closed, the two actions take no room at all; open, they sit to the left of the
    chevron that puts them away. Nothing floats over the thread, so the scrolling
    list cannot clip them wherever the comment happens to be.
*/
.comment-menu-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.22s ease, opacity 0.22s ease;
}

.comment-menu.open .comment-menu-actions {
    max-width: 80px;
    opacity: 1;
}

.comment-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pe-text-muted);
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.comment-menu-icon:hover {
    background: var(--pe-surface-hover);
    color: var(--pe-navy);
}

.comment-menu-icon.is-delete:hover {
    background: rgba(224, 36, 94, 0.12);
    color: #e0245e;
}

body.dark-mode .comment-menu-icon:hover {
    background: var(--pe-surface-hover);
    color: var(--pe-yellow);
}

body.dark-mode .comment-menu-icon.is-delete:hover {
    background: rgba(224, 36, 94, 0.18);
    color: #ff5c85;
}

/* ============================================================
   REVEAL ON SCROLL, AND THE READING PROGRESS
   Only where the page asks for it (body.pe-reveal) and only once
   the script has run (html.js-reveal) - so no script means
   nothing is ever hidden.
   ============================================================ */

html.js-reveal body.pe-reveal .pe-reveal-item {
    opacity: 0;
    transform: translateY(16px);
    will-change: opacity, transform;
}

html.js-reveal body.pe-reveal .pe-reveal-item.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
}

/*
    Off, not shortened. Reveal on scroll is one of the effects that makes some
    readers ill, and the script also bails out on this query - the rule is here so
    that a page which has already been marked stays readable.
*/
@media (prefers-reduced-motion: reduce) {
    html.js-reveal body.pe-reveal .pe-reveal-item,
    html.js-reveal body.pe-reveal .pe-reveal-item.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- the reading progress of an article ---------- */

.pe-read-progress {
    position: sticky;
    /* right under the header, which is 84px and sticky itself */
    top: 84px;
    z-index: 140;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.pe-read-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--pe-yellow);
    border-radius: 0 2px 2px 0;
}

body.dark-mode .pe-read-progress span {
    background: var(--pe-yellow);
}

@media (max-width: 700px) {
    .pe-read-progress {
        top: 72px;
    }
}

/* ============================================================
   TOAST - THE ICON IN WHITE
   The sheet tints each icon with the colour of its kind, which on
   a panel already carrying that colour reads as a smudge. The
   text is white; the icon joins it. The bar under the toast keeps
   the colour, so the kind is still legible at a glance.
   ============================================================ */

.toast i:first-child,
.toast.success i:first-child,
.toast.error i:first-child,
.toast.warning i:first-child,
.toast.info i:first-child,
.toast i.ti-x,
.toast.success i.ti-x,
.toast.error i.ti-x,
.toast.warning i.ti-x,
.toast.info i.ti-x,
.toast.success h3,
.toast.error h3,
.toast.warning h3,
.toast.info h3 {
    color: #FFFFFF;
}

/* ============================================================
   A LIKED SUGGESTION GETS THE SOLID HEART TOO
   The swap lived under a .blog ancestor, and a suggestion card is
   a .pe-suggest - so its heart stayed an outline.
   ============================================================ */

.pe-suggest .blog-likes.liked .heart-icon::before {
    content: "\2665\FE0E";
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
    font-size: 19px;
    line-height: 1;
}

.pe-suggest .blog-likes.liked .heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #e0245e;
}

body.dark-mode .pe-suggest .pe-suggest-actions .blog-likes.liked i,
body.dark-mode .pe-suggest .pe-suggest-actions .blog-likes.liked .heart-icon {
    color: #e0245e;
}

/* ============================================================
   CHATBOT - THE CLOSE BUTTON AND THE ROBOT
   ============================================================ */

/* ------------------------------------------------------------
   The cross that closes it: the glyph alone. No disc behind it
   and no motion at all - the sheet spun it a quarter turn on
   hover. Only the colour answers the pointer, and it does so
   without a transition.
   ------------------------------------------------------------ */

.chatbot-close,
.chatbot-close:hover {
    width: auto;
    height: auto;
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    font-size: 22px;
    line-height: 1;
    color: inherit;
    opacity: 0.75;
}

.chatbot-close:hover {
    opacity: 1;
}

/* ------------------------------------------------------------
   THE ROBOT
   Both files ship in the markup and the stylesheet shows the one
   that reads on the ground beneath it. That ground inverts with
   the theme - the button and the header go from navy to yellow,
   the messages from near white to navy - so a single file could
   not serve all three places.
   ------------------------------------------------------------ */

.chatbot-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chatbot-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* the white robot leads; the black one waits */
.chatbot-logo .robot-black {
    display: none;
}

/* ---------- the floating button: navy, then yellow ---------- */

.chatbot-button .chatbot-logo {
    width: 32px;
    height: 32px;
    /* the bounce the icon used to carry, kept on the image */
    animation: bounce 2s infinite;
}

body.dark-mode .chatbot-button .robot-white {
    display: none;
}

body.dark-mode .chatbot-button .robot-black {
    display: block;
}

/* ---------- the header of the window: no disc round it ---------- */

.chatbot-avatar {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 0;
}

body.dark-mode .chatbot-avatar {
    background: transparent;
}

.chatbot-avatar .chatbot-logo {
    width: 100%;
    height: 100%;
}

body.dark-mode .chatbot-avatar .robot-white {
    display: none;
}

body.dark-mode .chatbot-avatar .robot-black {
    display: block;
}

/* ---------- beside a message: no disc, and the ground inverts ---------- */

.message-avatar,
body.dark-mode .message-avatar {
    width: 28px;
    height: 28px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.message-avatar .chatbot-logo {
    width: 100%;
    height: 100%;
}

/* the messages sit on near white, so here the black robot leads */
.message-avatar .robot-white {
    display: none;
}

.message-avatar .robot-black {
    display: block;
}

body.dark-mode .message-avatar .robot-black {
    display: none;
}

body.dark-mode .message-avatar .robot-white {
    display: block;
}

/* ============================================================
   MY ACTIVITY
   The card is the suggestion card of an article page, class for
   class, so this sheet owns only what surrounds it: the heading,
   the two tabs, the quote under a commented article and the load
   more button.
   ============================================================ */

.pe-activity {
    max-width: var(--pe-page-width);
    margin: 0 auto;
    padding: 8px 24px 80px 24px;
    box-sizing: border-box;
}

/* .pe-auth-title carries the size and the weight of the account page; only the
   centring and a smaller gap under it belong to this page. */
.pe-activity-title {
    margin: 10px 0 clamp(22px, 3vw, 34px) 0;
    text-align: center;
}

/* ---------- the two tabs ---------- */

.pe-activity-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    border-bottom: 1px solid var(--pe-border);
}

.pe-activity-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 18px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    font-weight: 600;
    color: var(--pe-text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pe-activity-tab i {
    font-size: 17px;
}

.pe-activity-tab:hover {
    color: var(--pe-text);
}

.pe-activity-tab.active {
    border-bottom-color: var(--pe-navy);
    color: var(--pe-navy);
    font-weight: 700;
}

body.dark-mode .pe-activity-tab.active {
    border-bottom-color: var(--pe-yellow);
    color: var(--pe-yellow);
}

.pe-activity-count {
    font-weight: 700;
    color: inherit;
    opacity: 0.75;
}

/* ---------- a panel ---------- */

.pe-activity-panel {
    padding-top: 22px;
}

.pe-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 26px;
}

/* ---------- a liked article says so on its cover ---------- */

/*
    A badge, not a button: it states what the reader has already done, so it is
    always there rather than appearing under the pointer. Top left, because the
    category chip owns the right.
*/
.pe-activity-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(11, 35, 91, 0.22);
    color: #e0245e;
    font-size: 17px;
    pointer-events: none;
}

body.dark-mode .pe-activity-badge {
    background: var(--pe-surface);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* The same solid heart as everywhere else on the site. Written as the glyph
   itself rather than as \2665: a css escape has to survive every tool between
   here and the file, and twice now one has not. */
.pe-activity-badge i::before {
    content: "♥\FE0E";
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif;
    font-size: 18px;
    line-height: 1;
}

/* ---------- the way into the thread ---------- */

.pe-activity-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--pe-font);
    font-size: var(--pe-fs-sm);
    font-weight: 700;
    color: var(--pe-navy);
    cursor: pointer;
}

.pe-activity-open:hover {
    text-decoration: underline;
}

.pe-activity-open i {
    font-size: 15px;
}

body.dark-mode .pe-activity-open {
    color: var(--pe-yellow);
}

/* ---------- nothing to show ---------- */

.pe-activity-empty {
    margin: 26px 0 0 0;
    text-align: center;
    font-size: var(--pe-fs-sm);
    line-height: 1.7;
    color: var(--pe-text-muted);
}

.pe-activity-empty-title {
    display: block;
    font-weight: 700;
    color: var(--pe-text);
}

/* ---------- load more ---------- */

.pe-activity-more {
    display: flex;
    justify-content: center;
    padding-top: 32px;
}

.pe-activity-more .pe-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/*
    The button is hidden by the hidden attribute, and the rule above was defeating
    it: display on a class outranks the [hidden] rule of the browser's own sheet, so
    an empty tab still offered to load "0 de plus". The attribute wins here.
*/
.pe-activity-more .pe-btn[hidden] {
    display: none;
}

/* ---------- narrower screens ---------- */

@media (max-width: 1000px) {
    .pe-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .pe-activity {
        padding: 8px 16px 60px 16px;
    }

    .pe-activity-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .pe-activity-tab {
        padding: 12px 12px;
    }
}

/* ============================================================
   THE READER'S OWN COMMENTS
   A thread opened from My Activity has to answer "which of these
   did I write" without being read line by line, so their own sit
   on a tinted ground while everyone else's stay on the card.
   ============================================================ */

.comment-item.is-mine {
    margin: 4px 0;
    padding: 14px 14px;
    background: var(--pe-surface);
    border-radius: var(--pe-radius-md);
}

body.dark-mode .comment-item.is-mine {
    background: var(--pe-surface);
}