.r2-shell,
.r2-shell__body,
.r2-shell__main,
.r2-bar,
.r2-bar__start,
.r2-bar__title,
.r2-bar__end,
.r2-hamburger,
.r2-drawer,
.r2-drawer__header,
.r2-drawer__actions,
.r2-drawer__nav,
.r2-drawer__action,
.r2-menu__link,
.r2-menu__summary,
.r2-scrim,
.r2-skip-link,
.r2-promo {
    box-sizing: border-box;
}

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

body {
    height: 100%;
    overflow: hidden;
}

.r2-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.r2-shell__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* The page content used to start and end exactly on the bars - zero gap between
   the top bar's border and the first thing on the page. Vertical only: the
   horizontal edges are where wide plots and grids need every pixel, and the
   aside sits in this box too. Padding rather than a margin on the page, so it
   stays inside the scroll container and the bottom gap survives scrolling. */
.r2-shell__main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    /* Content that is not centred used to start at x=0, hard against the
       window edge. The layout tables that used to wrap these pages carried a
       cellpadding that stood in for this; with them gone the gap has to be
       the shell's. box-sizing is border-box here, so this comes out of the
       content width rather than widening main. */
    padding-block: var(--r2-space-4);
    padding-inline: var(--r2-space-4);
}

/* Two columns: main, and the aside to its right for the page's whole height. The row below main
   (page_row_start) goes in main's column too, so that everything the page centres - beside the
   aside or below where it ends - centres on the same line.

   main's column is at least as wide as its widest content (min-content), so content too wide to
   fit beside the aside pushes the aside out to the right, where the page scrolls to reach it,
   rather than being squeezed or running under it. Without an aside the second column is empty
   and main has the full width.

   The info band (page_info_band) is a third row across both columns, under the aside too. A row
   or band a page does not print is an empty track and takes no height. */
.r2-page {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto;
    grid-template-areas:
        'main aside'
        'row  aside'
        'band band';
    /* main fills the height - a page centres its one card in it vertically - and the band, when
       there is one, sits at the bottom of a short page */
    grid-template-rows: 1fr auto auto;
    /* min-height, not height: with a fixed height the 1fr rows get only the space left over, and
       the aside spanning them is not counted, so a tall aside ran on into the band below. With a
       min-height the rows grow to hold it, and still stretch to fill a short page. */
    min-height: 100%;
}

/* With a row below main, main takes its content's height and the row the rest; otherwise the
   free height would be shared between them and open a gap above the row. */
.r2-page:has(> .r2-page__row) {
    grid-template-rows: auto 1fr auto;
}

.r2-page__main {
    grid-area: main;
}

.r2-page__aside {
    grid-area: aside;
    align-self: start;
}

.r2-page__row {
    grid-area: row;
    /* The space div.centered + div.centered gives adjacent boxes (r2_main). What ends main and what
       starts the row are never siblings, so that rule cannot reach them and they touched. A margin
       rather than a row-gap: a gap would also open around the empty band track. */
    margin-top: 12px;
}

/* Training, citation, supporters, contact and social links across the foot of the page, laid out
   like a site footer: separate sections side by side, each under its own heading and rule, with
   links one per line. The sections take equal columns where there is room and wrap where there is
   not, inside a centred, capped width so that on a wide screen they do not drift apart. */
.r2-page__band {
    grid-area: band;
    margin-top: var(--r2-space-7);
    padding: var(--r2-space-7) 20px var(--r2-space-6);
    border-top: 1px solid var(--r2-color-border-strong);
    background: var(--r2-color-canvas);
    font-size: var(--r2-text-sm);
    line-height: 1.5;
    color: var(--r2-color-text);
    /* An auto-fit grid measures itself with every section side by side, so the band would claim
       ~1230px from the page grid, widen main's column and push the aside off the screen. Contained,
       it takes the width the page gives it and wraps its sections inside that. */
    contain: inline-size;
}

.r2-page__band-inner {
    /* Six sections - Learn, Supported by, Cite R2, Citations, Contact, Follow R2 - in one row at
       desktop widths, in equal shares of the band's width up to 76rem, centred beyond that. A wrapping
       flex row rather than a grid of equal columns, so that a section is never squeezed below what
       its content needs; where the shares are big enough, as at 1600px, they are all the same. */
    display: flex;
    flex-wrap: wrap;
    gap: var(--r2-space-5);
    max-width: 76rem;
    margin: 0 auto;
}

.r2-page__band-group {
    /* From nothing, growing equally, but never narrower than its content - the logos, the e-mail
       address, the longest word. A section wraps to the next row only when those no longer fit. */
    flex: 1 1 0;
    min-width: min-content;
    display: flex;
    flex-direction: column;
    gap: var(--r2-space-4);
}


/* Grey links that stay grey: visited, hovered or pressed alike. */
.r2-page__band a,
.r2-page__band a:visited,
.r2-page__band a:hover,
.r2-page__band a:active {
    color: var(--r2-grey-600);
}

.r2-page__band-title {
    padding-bottom: var(--r2-space-3);
    border-bottom: 1px solid var(--r2-color-border-strong);
    font-size: var(--r2-text-sm);
    font-weight: var(--r2-weight-bold);
    color: var(--r2-color-text);
}

/* The sections' text - the webcite and the links - a step below the band's headings. */
.r2-page__band-group p,
.r2-page__band-list {
    font-size: var(--r2-text-xs);
}

.r2-page__band-group p {
    margin: 0;
}

.r2-page__band-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--r2-space-2);
}

/* A listed link stays on one line - the support address would otherwise break after 'r2-' - and so
   sets its section's narrowest width. */
.r2-page__band-list a {
    white-space: nowrap;
}

.r2-page__band .r2-promo,
.r2-page__band-logos {
    display: flex;
    /* one row: the images and logos set their section's narrowest width */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--r2-space-3);
    margin: 0;
}

/* The training images and the supporters' logos at one size. contain keeps a logo's own proportions
   inside the square. */
.r2-page__band .r2-promo img,
.r2-page__band-logos img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* The PubMed citations image with "Publications that cite R2" below it, one link. */
.r2-page__band-cite {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--r2-space-3);
    font-size: var(--r2-text-xs);
}

.r2-page__band-cite img {
    display: block;
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* The follow logos side by side under their heading, in each brand's own mark and colour. */
.r2-page__band-follow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r2-space-4);
}

.r2-page__band-follow img {
    display: block;
    width: 24px;
    height: 24px;
}

#mainCanvas:focus {
    outline: none;
}

html[data-r2-scroll='document'],
html[data-r2-scroll='document'] body {
    height: auto;
    overflow: visible;
}

html[data-r2-scroll='document'] .r2-shell {
    height: auto;
    min-height: 100%;
}

html[data-r2-scroll='document'] .r2-shell__body,
html[data-r2-scroll='document'] .r2-shell__main {
    overflow: visible;
}

html[data-r2-scroll='document'] .r2-bar--top {
    position: sticky;
    top: 0;
}

html[data-r2-scroll='document'] .r2-bar--bottom {
    position: sticky;
    bottom: 0;
}

.r2-skip-link {
    position: absolute;
    top: var(--r2-space-2);
    left: var(--r2-space-2);
    z-index: calc(var(--r2-z-drawer) + 1);
    padding: var(--r2-space-3) var(--r2-space-4);
    border-radius: var(--r2-radius-md);
    background: var(--r2-color-surface-raised);
    color: var(--r2-color-link);
    box-shadow: var(--r2-shadow-md);
    transform: translateY(-200%);
}

.r2-skip-link:focus {
    transform: translateY(0);
}

.r2-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--r2-space-3);
    flex: 0 0 auto;
    position: relative;
    z-index: var(--r2-z-bar);
    padding: 0 var(--r2-space-4);
    background: var(--r2-color-surface-raised);
    color: var(--r2-color-text);
    font-size: var(--r2-text-sm);
}

.r2-bar--top {
    height: var(--r2-bar-height-top);
    border-bottom: 1px solid var(--r2-color-border);
    box-shadow: var(--r2-shadow-sm);
}

.r2-bar--bottom {
    height: var(--r2-bar-height-bottom);
    border-top: 1px solid var(--r2-color-border);
    color: var(--r2-color-text-muted);
    font-size: var(--r2-text-xs);
}

.r2-bar__start,
.r2-bar__title,
.r2-bar__end {
    display: flex;
    align-items: center;
    gap: var(--r2-space-3);
    min-width: 0;
}

.r2-bar__end {
    justify-content: flex-end;
}

.r2-bar__title {
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--r2-text-lg);
    font-weight: var(--r2-weight-bold);
}

.r2-bar--bottom .r2-bar__title {
    font-size: var(--r2-text-xs);
    font-weight: var(--r2-weight-regular);
}

.r2-bar a {
    color: var(--r2-color-link);
    text-decoration: none;
    border-radius: var(--r2-radius-sm);
}

.r2-bar a:hover {
    color: var(--r2-color-link-hover);
    text-decoration: underline;
}

.r2-bar a:focus-visible,
.r2-hamburger:focus-visible,
.r2-drawer__action:focus-visible {
    outline: 2px solid var(--r2-color-focus-ring);
    outline-offset: 2px;
}

.r2-bar__login {
    color: var(--r2-color-success);
    font-weight: var(--r2-weight-medium);
}

.r2-bar__logout {
    color: var(--r2-color-danger);
    font-weight: var(--r2-weight-medium);
}

.r2-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--r2-hit-target);
    height: var(--r2-hit-target);
    padding: 0;
    border: 0;
    border-radius: var(--r2-radius-md);
    background: transparent;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.r2-hamburger:hover {
    background: var(--r2-color-surface-sunken);
}

.r2-hamburger__box {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--r2-radius-pill);
    background: currentColor;
    transition: background-color var(--r2-motion-fast) var(--r2-motion-ease);
}

.r2-hamburger__box::before,
.r2-hamburger__box::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    content: '';
    transition: transform var(--r2-motion-fast) var(--r2-motion-ease);
}

.r2-hamburger__box::before {
    top: -6px;
}

.r2-hamburger__box::after {
    top: 6px;
}

html[data-drawer='open'] .r2-hamburger__box {
    background-color: transparent;
}

html[data-drawer='open'] .r2-hamburger__box::before {
    transform: translateY(6px) rotate(45deg);
}

html[data-drawer='open'] .r2-hamburger__box::after {
    transform: translateY(-6px) rotate(-45deg);
}

.r2-drawer {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: var(--r2-z-drawer);
    display: flex;
    flex-direction: column;
    width: var(--r2-drawer-width);
    max-width: 85vw;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--r2-color-surface);
    border-right: 1px solid var(--r2-color-border);
    box-shadow: var(--r2-shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
        transform var(--r2-motion-drawer) var(--r2-motion-ease),
        visibility 0s linear var(--r2-motion-drawer);
}

html[data-drawer='open'] .r2-drawer {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform var(--r2-motion-drawer) var(--r2-motion-ease),
        visibility 0s;
}

.r2-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--r2-space-2);
    flex: 0 0 auto;
    padding: var(--r2-space-3) var(--r2-space-3) var(--r2-space-3) var(--r2-space-4);
    border-bottom: 1px solid var(--r2-color-border);
    color: var(--r2-color-text-muted);
    font-size: var(--r2-text-xs);
    font-weight: var(--r2-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.r2-drawer__actions {
    display: flex;
    align-items: center;
    gap: var(--r2-space-1);
}

.r2-drawer__nav {
    flex: 1 1 auto;
    padding: var(--r2-space-2) 0;
}

.r2-drawer__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--r2-hit-target);
    height: var(--r2-hit-target);
    padding: 0;
    border: 0;
    border-radius: var(--r2-radius-md);
    background: transparent;
    color: var(--r2-color-text-muted);
    font-size: var(--r2-text-lg);
    line-height: 1;
    cursor: pointer;
}

.r2-drawer__action:hover {
    background: var(--r2-color-surface-sunken);
    color: var(--r2-color-text);
}

.r2-scrim {
    position: absolute;
    inset: 0;
    z-index: var(--r2-z-scrim);
    background: var(--r2-color-scrim);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--r2-motion-drawer) var(--r2-motion-ease),
        visibility 0s linear var(--r2-motion-drawer);
}

html[data-drawer='open'] .r2-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--r2-motion-drawer) var(--r2-motion-ease), visibility 0s;
}

html:not([data-chrome-ready]) .r2-drawer,
html:not([data-chrome-ready]) .r2-scrim,
html:not([data-chrome-ready]) .r2-hamburger__box,
html:not([data-chrome-ready]) .r2-hamburger__box::before,
html:not([data-chrome-ready]) .r2-hamburger__box::after {
    transition: none !important;
}

.r2-menu,
.r2-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.r2-menu__link,
.r2-menu__summary {
    display: flex;
    align-items: center;
    gap: var(--r2-space-2);
    min-height: var(--r2-hit-target);
    padding: var(--r2-space-2) var(--r2-space-4);
    padding-left: calc(var(--r2-space-4) + var(--r2-menu-level, 0) * var(--r2-space-4));
    border-left: 3px solid transparent;
    color: var(--r2-color-text);
    font-size: var(--r2-text-sm);
    line-height: var(--r2-line-tight);
    text-decoration: none;
    cursor: pointer;
}

.r2-menu__link:hover,
.r2-menu__summary:hover {
    background: var(--r2-color-surface-sunken);
}

.r2-menu__link:focus-visible,
.r2-menu__summary:focus-visible {
    outline: 2px solid var(--r2-color-focus-ring);
    outline-offset: -2px;
}

.r2-menu__link[aria-current='page'] {
    border-left-color: var(--r2-color-accent);
    background: var(--r2-color-accent-subtle);
    color: var(--r2-color-accent-hover);
    font-weight: var(--r2-weight-medium);
}

.r2-menu__summary {
    list-style: none;
}

.r2-menu__summary::-webkit-details-marker {
    display: none;
}

.r2-menu__summary::after {
    flex: 0 0 auto;
    width: 0.45em;
    height: 0.45em;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--r2-color-text-muted);
    transform: rotate(45deg);
    transition: transform var(--r2-motion-fast) var(--r2-motion-ease);
    content: '';
}

.r2-menu__branch[open] > .r2-menu__summary::after {
    transform: rotate(-135deg);
}

.r2-menu__link--disabled {
    color: var(--r2-color-text-disabled);
    cursor: not-allowed;
}

.r2-menu__link--disabled:hover {
    background: transparent;
}

.r2-menu__link--disabled::after {
    margin-left: auto;
    font-size: var(--r2-text-xs);
    opacity: 0.55;
    content: '\1F512';
}

.r2-menu__link--emphasis {
    color: var(--r2-color-accent);
    font-weight: var(--r2-weight-medium);
}

.r2-menu__link--danger {
    color: var(--r2-color-danger);
    font-weight: var(--r2-weight-bold);
}

.r2-promo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--r2-space-5);
    margin: var(--r2-space-4) 0 0;
}

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

@media (min-width: 60rem) {
    html[data-drawer='pinned'] .r2-drawer {
        position: relative;
        inset: auto;
        flex: 0 0 var(--r2-drawer-width);
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: none;
    }

    html[data-drawer='pinned'] .r2-scrim {
        display: none;
    }
}

@media (max-width: 47.999rem) {
    .r2-bar {
        gap: var(--r2-space-2);
        padding: 0 var(--r2-space-3);
    }

    .r2-bar__optional {
        display: none;
    }

    .r2-bar--bottom {
        grid-template-columns: auto 0 1fr;
    }

    /*
     * The thing the table could never do: drop the explain sidebar below the
     * content instead of squeezing it alongside. height goes to auto with it,
     * because a full-height main plus a stacked aside would overflow - so a
     * page's own height:100% table sizes to its content here rather than
     * filling the canvas.
     */
    .r2-page {
        display: block;
        height: auto;
        min-height: 100%;
    }

    .r2-page__aside {
        min-width: 0 !important;
    }
}

.r2-cookie-slot {
    flex: 0 0 auto;
}

.r2-cookie-slot .cc-window {
    position: static;
    max-width: none;
    border-radius: 0;
}

@media print {
    html,
    body {
        height: auto;
        overflow: visible;
        background: #ffffff;
        color: #000000;
        font-size: 10pt;
    }

    .r2-shell {
        display: block;
        height: auto;
    }

    .r2-shell__body {
        display: block;
        overflow: visible;
    }

    .r2-shell__main {
        display: block;
        height: auto;
        overflow: visible;
    }

    .r2-bar,
    .r2-page__band,
    .r2-drawer,
    .r2-scrim,
    .r2-hamburger,
    .r2-skip-link,
    #overDiv,
    .cc-window {
        display: none !important;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    table,
    figure,
    div.infobox,
    div.newsbox {
        break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    details:not(.r2-menu__branch) > :not(summary) {
        display: block !important;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    @page {
        margin: 12mm;
    }
}