/* ------------------------------------------------------------------ */
/* Fonts                                                               */
/* ------------------------------------------------------------------ */

@font-face {
    font-family: "Josefin Sans";
    src: url("/assets/fonts/JosefinSans-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Josefin Sans";
    src: url("/assets/fonts/JosefinSans-latin-ext.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader is a variable font: one file covers the 400–700 weight range. */
@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/Newsreader-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/Newsreader-latin-ext.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/Newsreader-Italic-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/Newsreader-Italic-latin-ext.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Raleway is a variable font: one file covers the 400–600 weight range. */
@font-face {
    font-family: "Raleway";
    src: url("/assets/fonts/Raleway-latin.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Raleway";
    src: url("/assets/fonts/Raleway-latin-ext.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
    --bg: #ffffff;
    --fg: #1a1a1a;
    --muted: #6b6b6b;
    --rule: #e0e0e0;
    --rule-strong: #1a1a1a;
    --surface: #f7f7f7;

    --score-good: #15803d;
    --score-partial: #d97706;
    --score-bad: #dc2626;

    --font-serif: "Newsreader", serif;
    --font-heading: "Josefin Sans", sans-serif;
    --font-sans: "Raleway", sans-serif;
}

:root[data-theme="dark"] {
    --bg: #141414;
    --fg: #e8e8e8;
    --muted: #a5a5a5;
    --rule: #333333;
    --rule-strong: #e8e8e8;
    --surface: #1e1e1e;

    --score-good: #28c672;
    --score-partial: #e5a812;
    --score-bad: #f86363;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.0625rem + 0.35vw, 1.25rem);
    font-weight: 400;
    line-height: 1.65;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--muted);
}

a:hover {
    text-decoration-color: var(--fg);
}

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

.wrap {
    max-width: 42rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.wrap-wide {
    max-width: 60rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -100vw;
    top: 0;
    background: var(--bg);
    padding: 0.5rem 1rem;
    font-family: var(--font-sans);
}

.skip-link:focus {
    left: 0;
    z-index: 10;
}

/* ------------------------------------------------------------------ */
/* Header and footer                                                   */
/* ------------------------------------------------------------------ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--rule-strong);
}

.site-header .wrap-wide {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.875rem;
}

.site-header .site-tools {
    align-self: center;
}

.site-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.25rem;
    text-decoration: none;
}

.site-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.lang-switch {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8125rem;
}

.lang-switch:hover {
    text-decoration: underline;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: none;
    color: var(--fg);
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--fg);
}

/* Criteria / applications navigation ------------------------------- */

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-right: auto;
    font-family: var(--font-sans);
}

.nav-group {
    position: relative;
}

.nav-group-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nav-group-toggle::after {
    content: " ▾";
    color: var(--muted);
}

.nav-group-label {
    display: none;
    margin: 0;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.nav-group-menu {
    display: none;
    margin: 0;
    padding: 0.375rem 0;
    list-style: none;
}

.nav-group.open .nav-group-menu {
    display: block;
}

.nav-group-menu a {
    display: block;
    padding: 0.45rem 1rem;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-group-menu a:hover,
.nav-group-menu a[aria-current="page"] {
    background: var(--surface);
}

.nav-close,
.burger {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fg);
    cursor: pointer;
}

@media (min-width: 48rem) {
    .nav-group-menu {
        position: absolute;
        top: calc(100% + 0.625rem);
        left: -1rem;
        min-width: 14rem;
        background: var(--bg);
        border: 1px solid var(--rule);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        z-index: 45;
    }
}

@media (max-width: 47.99rem) {
    .burger {
        display: inline-flex;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        display: block;
        width: min(20rem, 85vw);
        padding: 1.25rem 1.5rem;
        overflow-y: auto;
        background: var(--bg);
        border-left: 1px solid var(--rule);
        clip-path: inset(0 0 0 100%);
        visibility: hidden;
        transition: clip-path 0.25s ease, visibility 0s 0.25s;
    }

    html.nav-open .site-nav {
        clip-path: inset(0);
        visibility: visible;
        transition: clip-path 0.25s ease;
    }

    html.nav-open {
        overflow: hidden;
    }

    .nav-close {
        display: block;
        margin-left: auto;
        margin-bottom: 1rem;
    }

    .nav-group {
        margin-bottom: 1.75rem;
    }

    .nav-group-toggle {
        display: none;
    }

    .nav-group-label {
        display: block;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--rule-strong);
    }

    .nav-group-menu {
        display: block;
        padding: 0;
    }

    .nav-group-menu a {
        padding: 0.55rem 0;
        border-bottom: 1px solid var(--rule);
        white-space: normal;
    }

    .nav-group-menu a:hover,
    .nav-group-menu a[aria-current="page"] {
        background: none;
    }

    .nav-group-menu a[aria-current="page"] {
        font-weight: 600;
    }

    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    html.nav-open .nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

.icon-sun {
    display: none;
}

:root[data-theme="dark"] .icon-sun {
    display: block;
}

:root[data-theme="dark"] .icon-moon {
    display: none;
}

.site-footer {
    margin-top: 5rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--muted);
}

.site-footer .wrap {
    padding-block: 1rem;
}

.site-footer p {
    margin: 0.25rem 0;
}

/* ------------------------------------------------------------------ */
/* Page structure                                                      */
/* ------------------------------------------------------------------ */

main {
    padding-top: 2.5rem;
}

.page-intro {
    margin-bottom: 2rem;
}

h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.875rem, 1.25rem + 2.75vw, 2.75rem);
    line-height: 1.15;
    text-wrap: balance;
    scroll-margin-top: 5rem;
}

.app-website {
    margin: 0.75rem 0 0;
}

.app-website a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--muted);
    text-decoration-color: var(--rule);
}

.app-website a:hover {
    color: var(--fg);
    text-decoration-color: var(--fg);
}

.app-website svg {
    width: 0.8em;
    height: 0.8em;
    overflow: visible;
}

/* Home page: download button for the two-page abstract (PDF): a pill with a
   single download glyph. */
.abstract-download {
    margin: 1.5rem 0 0;
}

.abstract-download a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.2rem 0.6rem 1.05rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    font-family: var(--font-sans);
    color: var(--fg);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.abstract-download a:hover,
.abstract-download a:focus-visible {
    background-color: var(--fg);
    color: var(--bg);
}

.abstract-arrow {
    flex: none;
    width: 1em;
    height: 1em;
}

.abstract-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

/* Wide screens: in the right margin, level with the title — the slot the
   page TOC takes on other pages (the home page has none). The card is wider
   than the TOC, hence a later breakpoint than its 84rem. */
@media (min-width: 88rem) {
    .page-intro:has(.abstract-download) {
        position: relative;
    }

    .abstract-download {
        position: absolute;
        top: 0;
        left: calc(100% + 2rem);
        width: max-content;
        margin: 0;
    }
}

.lead {
    margin: 1rem 0 0;
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--muted);
}

h2 {
    margin: 2.5rem 0 1rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25;
    scroll-margin-top: 5rem;
}

h3 {
    margin: 1.75rem 0 0.5rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.3125rem;
    line-height: 1.3;
    scroll-margin-top: 5rem;
}

/* ------------------------------------------------------------------ */
/* Prose (article body)                                                */
/* ------------------------------------------------------------------ */

strong,
b {
    font-weight: 600;
}

.prose p {
    margin: 0 0 1.25rem;
}

.prose ul,
.prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.375rem;
}

.prose blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--rule-strong);
    color: var(--muted);
}

.prose .pullquote {
    margin: 2.5rem 0;
    padding: 1.75rem 2rem 1.5rem;
    background: var(--surface);
    text-align: center;
}

.prose .pullquote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--fg);
}

.prose .pullquote blockquote::before {
    content: "\201C\2009";
}

.prose .pullquote blockquote::after {
    content: "\2009\201D";
}

.prose .pullquote blockquote::before,
.prose .pullquote blockquote::after {
    font-size: 1.2em;
    color: var(--muted);
}

.prose .pullquote:lang(fr) blockquote::before {
    content: "\00AB\2009";
}

.prose .pullquote:lang(fr) blockquote::after {
    content: "\2009\00BB";
}

.prose .pullquote figcaption {
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.prose hr {
    margin: 2.5rem auto;
    border: 0;
    border-top: 1px solid var(--rule);
    width: 8rem;
}

/* ------------------------------------------------------------------ */
/* Benchmark table                                                     */
/* ------------------------------------------------------------------ */

.results h2,
.criteria-summaries h2 {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-strong);
}

.table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.benchmark {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
}

table.benchmark th,
table.benchmark td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule);
    text-align: center;
    white-space: nowrap;
}

table.benchmark thead th {
    border-bottom: 1px solid var(--rule-strong);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

table.benchmark tbody th {
    font-weight: 600;
}

table.benchmark .row-head {
    position: sticky;
    left: 0;
    background: var(--bg);
    text-align: left;
    padding-left: 0;
    white-space: normal;
    min-width: 11rem;
}

table.benchmark .score-symbol {
    font-size: 1.125em;
}

/* On large screens the results table gets a little more room than the
   other wide blocks: 9 criteria plus notes such as "prévu pour 2027" no
   longer fit in 60rem without scrolling (French app names are longer). */
@media (min-width: 70rem) {
    .results.wrap-wide {
        max-width: 66rem;
    }
}

.score-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

table.benchmark .note-ref {
    font-size: 1.25em;
    line-height: 0;
    vertical-align: baseline;
    margin-left: 0.1em;
    letter-spacing: 0;
}

/* Legend on the left, footnotes of the table (e.g. "* Element, Tchap…") on the right */
.table-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1.5rem;
    margin: 1rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--muted);
}

.legend,
.table-notes {
    margin: 0;
}

.table-notes {
    margin-left: auto;
    text-align: right;
}

.table-note {
    display: inline-block;
}

.table-note + .table-note {
    margin-left: 1rem;
}

.table-note .note-mark {
    font-size: 1.7em;
    line-height: 0;
    vertical-align: -0.1em;
}

.legend-label {
    margin-right: 0.25rem;
}

.legend .score {
    margin-right: 1rem;
}

/* ------------------------------------------------------------------ */
/* Content tables (markdown tables in article prose)                   */
/* ------------------------------------------------------------------ */

.prose table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* Once there is enough spare margin, let this specific table spill into
   the left margin for more breathing room — but only on the left: the
   right margin is reserved for the floating "on this page" TOC rail
   (criterion pages), so the right edge stays put. Scoped to .discovery-table
   (source/_criteria/fr/no_user_discovery_and_spam.md), not tables generally.
   Its wrapper is also .table-scroll (overflow-x: auto, for the mobile
   horizontal-scroll case below this breakpoint) — a scroll container clips
   overflow by definition, so it must be freed too or the bleed is simply
   cropped at the wrapper's edge instead of visible. */
@media (min-width: 64rem) {
    .discovery-table-wrap {
        overflow-x: visible;
    }

    .prose table.discovery-table {
        width: calc(100% + 8rem);
        margin-left: -8rem;
    }
}

.prose th,
.prose td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.prose thead th {
    border-bottom: 1px solid var(--rule-strong);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prose tbody tr:last-child td {
    border-bottom: 1px solid var(--rule-strong);
}

/* ------------------------------------------------------------------ */
/* Wayback archive markers (appended after external links)             */
/* ------------------------------------------------------------------ */

.archive-ref {
    font-size: 0.7em;
    font-family: var(--font-sans);
    margin-left: 0.15em;
    white-space: nowrap;
}

.archive-ref a {
    color: var(--muted);
    text-decoration: none;
}

.archive-ref a:hover,
.archive-ref a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Scores (shared)                                                     */
/* ------------------------------------------------------------------ */

.score-symbol svg {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
    overflow: visible;
}

.score-good .score-symbol {
    color: var(--score-good);
}

.score-partial .score-symbol {
    color: var(--score-partial);
}

.score-bad .score-symbol {
    color: var(--score-bad);
}

.score-na .score-symbol {
    color: var(--muted);
}

.score-emoji {
    display: none;
}

.reader-summary {
    display: none;
}

.score-label {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* Short qualifier next to a score (_data/rating_notes.yml), e.g.
   "planned for 2027": under the icon in the results table, after the
   label in the "At a glance" boxes. */
.score-note {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--muted);
}

table.benchmark .score-note {
    display: block;
    font-size: 0.6875rem;
    line-height: 1.2;
    margin-top: 0.15rem;
}

/* A row with a note under an icon ("prévu pour 2027"): align it on its
   first line so the icons stay level and the note hangs below. */
table.benchmark tr:has(.score-note) > * {
    vertical-align: top;
}

/* ------------------------------------------------------------------ */
/* "At a glance" box on app and criterion pages                        */
/* ------------------------------------------------------------------ */

.scores-box {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
}

.scores-box h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.scores-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    display: grid;
    grid-template-columns: 1fr max-content;
    column-gap: 1rem;
}

.scores-list li {
    display: contents;
}

.scores-list li > a,
.scores-list li > .score {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
}

/* Center the name vertically when the score cell is taller (e.g. with a note). */
.scores-list li > a {
    display: flex;
    align-items: center;
}

.scores-list li:last-child > a,
.scores-list li:last-child > .score {
    border-bottom: 0;
}

.scores-list .score {
    white-space: nowrap;
}

/* In the "At a glance" boxes the note goes on its own line, under the score. */
.scores-list .score-note {
    display: block;
    line-height: 1.2;
    margin-top: 0.15rem;
}

/* ------------------------------------------------------------------ */
/* Per-criterion sections on app pages                                 */
/* ------------------------------------------------------------------ */

.app-criterion {
    scroll-margin-top: 5rem;
}

.app-criterion h2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.app-criterion h2 a {
    text-decoration: none;
}

.app-criterion h2 a:hover {
    text-decoration: underline;
}

.app-criterion h2 .score {
    white-space: nowrap;
    margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Criteria summaries on the home page                                 */
/* ------------------------------------------------------------------ */

.criterion-summary {
    padding: 0.25rem 0 1rem;
    border-bottom: 1px solid var(--rule);
}

.criterion-summary:last-child {
    border-bottom: 0;
}

.criterion-summary h3 a {
    text-decoration: none;
}

.criterion-summary h3 a:hover {
    text-decoration: underline;
}

.criterion-summary p {
    margin: 0 0 0.5rem;
}

.criterion-label {
    font-family: var(--font-sans);
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg);
}

.criterion-lead p {
    margin: 0 0 0.75rem;
}

.criterion-lead p:last-child {
    margin-bottom: 0;
}

.read-more {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Misc                                                                */
/* ------------------------------------------------------------------ */

.back-link {
    margin-top: 3rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
}

.back-link a:hover {
    text-decoration: underline;
}

.back-link svg {
    width: 0.85em;
    height: 0.85em;
    overflow: visible;
    transition: transform 0.15s ease;
}


/* ------------------------------------------------------------------ */
/* Page table of contents (criterion pages only)                      */
/* ------------------------------------------------------------------ */

.page-toc {
    display: none;
}

@media (min-width: 84rem) {
    .page-toc:not(:empty) {
        display: block;
        position: fixed;
        top: 6rem;
        left: calc(50% + 23rem);
        width: 14rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        font-family: var(--font-sans);
        font-size: 0.8125rem;
    }
}

.page-toc-label {
    margin: 0 0 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--muted);
}

.page-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-toc > ul > li {
    margin-bottom: 0.6em;
}

.page-toc ul ul {
    margin: 0.4em 0 0;
    padding-left: 1rem;
}

.page-toc ul ul li {
    margin-bottom: 0.4em;
}

.page-toc a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.4;
}

.page-toc a:hover {
    color: var(--fg);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Print                                                               */
/* ------------------------------------------------------------------ */

@media print {
    :root,
    :root[data-theme="dark"] {
        --bg: #ffffff;
        --fg: #1a1a1a;
        --muted: #6b6b6b;
        --rule: #e0e0e0;
        --rule-strong: #1a1a1a;
        --surface: #f7f7f7;
        --score-good: #15803d;
        --score-partial: #d97706;
        --score-bad: #dc2626;
    }

    body {
        font-size: 12pt;
        line-height: 1.45;
    }

    h1 {
        font-size: 20pt;
        line-height: 1.2;
    }

    .lead {
        font-size: 13pt;
    }

    h2 {
        font-size: 15pt;
    }

    h3 {
        font-size: 13pt;
    }

    .wrap,
    .wrap-wide {
        max-width: 100%;
        padding-inline: 0;
    }

    .burger,
    .theme-toggle,
    .lang-switch,
    .nav-close,
    .nav-backdrop,
    .skip-link,
    .page-toc {
        display: none !important;
    }

    .site-header {
        position: static;
        border-bottom: 1px solid #000;
    }

    .site-title {
        font-size: 12pt;
        line-height: 1.2;
    }

    .site-nav {
        display: none;
    }

    .back-link,
    .abstract-download {
        display: none !important;
    }

    h1, h2, h3 {
        break-after: avoid;
    }

    .scores-box,
    .criterion-summary,
    .app-criterion {
        break-inside: avoid;
    }

    table.benchmark thead {
        display: table-header-group;
    }

    table.benchmark tr {
        break-inside: avoid;
    }

    .table-scroll {
        overflow-x: visible;
    }

    table.benchmark {
        table-layout: fixed;
        width: 100%;
        font-size: 9pt;
    }

    table.benchmark th,
    table.benchmark td {
        padding: 0.3rem 0.35rem;
        white-space: normal;
        word-break: break-word;
    }

    table.benchmark .row-head {
        position: static;
        min-width: 0;
        width: auto;
    }
}

/* ---- Section deep links: copy button on headings (assets/js/anchors.js) */

.anchor-copy {
    position: relative;
    margin-left: 0.35em;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    will-change: opacity;
}

h2:hover .anchor-copy,
h3:hover .anchor-copy,
.anchor-copy:focus-visible,
.anchor-copy.copied {
    opacity: 1;
}

.anchor-copy.copied.copied-out {
    opacity: 0;
}

h2:hover .anchor-copy.copied-out,
h3:hover .anchor-copy.copied-out,
.anchor-copy.copied-out:focus-visible {
    opacity: 1;
}

.anchor-copy:hover {
    color: inherit;
}

.anchor-copy svg {
    width: 0.85em;
    height: 0.85em;
    vertical-align: -0.08em;
}

.anchor-copy .icon-check {
    display: none;
    color: var(--score-good);
}

.anchor-copy.copied .icon-link {
    display: none;
}

.anchor-copy.copied .icon-check {
    display: inline;
    animation: anchor-check-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes anchor-check-pop {
    from {
        transform: scale(0.3);
    }
    to {
        transform: scale(1);
    }
}

.anchor-copy.copied::after {
    content: attr(data-copied);
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 0.6em;
    padding: 0.35em 0.75em 0.3em;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--bg);
    background: var(--rule-strong);
    animation: anchor-chip 1.6s ease both;
}

@keyframes anchor-chip {
    0% {
        opacity: 0;
        transform: translate(-0.4em, -50%);
    }
    12%,
    72% {
        opacity: 1;
        transform: translate(0, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(0.25em, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .anchor-copy .icon-check,
    .anchor-copy.copied::after {
        animation: none;
    }

    .abstract-download a {
        transition: none;
    }
}

@media (hover: none) {
    .anchor-copy {
        opacity: 0.5;
    }

    .anchor-copy.copied.copied-out {
        opacity: 0.5;
    }
}

@media print {
    .anchor-copy {
        display: none !important;
    }
}

.anchor-glue {
    white-space: nowrap;
}