/* Reader bookmark navigation - Information articles only.
   Built at runtime by /assets/js/article-bookmarks.js from the
   .article-bookmark markers ArticleHtmlEditor writes into the article body.
   Nothing here applies unless that script found at least one marker.

   Two presentations: a floated panel at the top left of the body (desktop, until
   it scrolls past) and a sticky condensed bar (desktop after that, and the only
   presentation below 992px). */

/* Enough for the condensed bar plus its top gap, so a heading reached by a bare
   #hash in the URL is not left sitting underneath the bar. Article pages have no
   fixed header of their own - see TOP_GAP in article-bookmarks.js. */
#divArticle .article-bookmark {
    scroll-margin-top: 66px;
}

/* ---- shared list ---- */

.article-bookmark-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-bookmark-list li {
    margin: 0;
    font-size: 14px;
}

.article-bookmark-link {
    display: block;
    padding: 6px 8px 6px 10px;
    border-left: 3px solid transparent;
    color: #337ab7;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.article-bookmark-link:hover,
.article-bookmark-link:focus {
    border-left-color: #b9d3ea;
    background: #eef4fa;
    color: #23527c;
    text-decoration: none;
}

.article-bookmark-link.is-active {
    border-left-color: #337ab7;
    background: #e7f0f8;
    color: #23527c;
    font-weight: 600;
}

/* ---- floated panel ----
   Hidden below the desktop breakpoint. The float is inserted once and never
   resized or removed, so the body text that wraps around it never reflows. */

.article-bookmark-slot {
    display: none;
}

@media (min-width: 992px) {
    .article-bookmark-slot {
        display: block;
        float: left;
        width: 228px;
        margin: 2px 24px 16px 0;
    }
}

.article-bookmark-panel {
    padding: 12px 13px 13px;
    border: 1px solid #e0e4e9;
    border-radius: 4px;
    background: #f7f9fb;
}

.article-bookmark-heading {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e4e9;
    color: #333;
    font-family: 'Roboto Slab', serif;
    font-size: 15px;
    font-weight: 500;
}

/* Capped so a long list scrolls inside the panel instead of running down the page. */
.article-bookmark-list_panel {
    max-height: 300px;
    overflow-y: auto;
}

/* ---- condensed bar ---- */

.article-bookmark-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 20;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 44px;
    padding: 0 2px;
    border: 1px solid #e0e4e9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(22, 50, 79, 0.1);
}

/* Desktop: the bar costs no vertical space, so revealing it cannot shift the
   article. It floats over the text the way a sticky mini-header does. */
@media (min-width: 992px) {
    .article-bookmark-bar {
        margin-bottom: -44px;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        -webkit-transition: opacity 0.16s ease;
        transition: opacity 0.16s ease;
    }

    .article-bookmark-bar.is-visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Narrow screens: the bar is the whole feature, so it sits in flow at the top of
   the article body and pins from the start. */
@media (max-width: 991px) {
    .article-bookmark-bar {
        margin-bottom: 16px;
    }
}

.article-bookmark-step,
.article-bookmark-more {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 32px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #337ab7;
    font-size: 21px;
    line-height: 40px;
    text-align: center;
}

.article-bookmark-step[disabled] {
    color: #cfd6dd;
    cursor: default;
}

.article-bookmark-more {
    border-left: 1px solid #eceff2;
    color: #5a6572;
    font-size: 14px;
}

.article-bookmark-bar.is-open .article-bookmark-more {
    color: #23527c;
}

/* ---- the sideways strip ---- */

.article-bookmark-stripwrap {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Neighbouring sections fade out rather than being cut off at the edges. */
.article-bookmark-stripwrap:before,
.article-bookmark-stripwrap:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 30px;
    pointer-events: none;
}

.article-bookmark-stripwrap:before {
    left: 0;
    background: -webkit-linear-gradient(left, #fff 15%, rgba(255, 255, 255, 0));
    background: linear-gradient(to right, #fff 15%, rgba(255, 255, 255, 0));
}

.article-bookmark-stripwrap:after {
    right: 0;
    background: -webkit-linear-gradient(right, #fff 15%, rgba(255, 255, 255, 0));
    background: linear-gradient(to left, #fff 15%, rgba(255, 255, 255, 0));
}

.article-bookmark-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.article-bookmark-strip::-webkit-scrollbar {
    display: none;
    height: 0;
}

.article-bookmark-striplist {
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0 30px;
    list-style: none;
}

.article-bookmark-striplist li {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0;
}

.article-bookmark-chip {
    height: 40px;
    padding: 0 13px;
    border: 0;
    background: transparent;
    color: #7b8794;
    font-size: 13.5px;
    line-height: 40px;
    white-space: nowrap;
    opacity: 0.4;
    -webkit-transition: opacity 0.16s ease, color 0.16s ease;
    transition: opacity 0.16s ease, color 0.16s ease;
}

.article-bookmark-chip:hover {
    color: #23527c;
    opacity: 0.85;
}

.article-bookmark-chip.is-active {
    color: #23527c;
    font-size: 14.5px;
    font-weight: 600;
    opacity: 1;
}

/* ---- dropdown holding the full list ---- */

.article-bookmark-drop {
    display: none;
    position: absolute;
    top: 100%;
    right: -1px;
    left: -1px;
    z-index: 30;
    max-height: 320px;
    margin-top: 5px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid #e0e4e9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(22, 50, 79, 0.16);
}

.article-bookmark-bar.is-open .article-bookmark-drop {
    display: block;
}

/* ---- how the body flows around the floated panel ----
   Only applies while the float is shown. Headings get their own block formatting
   context so a heading never straddles the bottom edge of the panel with half its
   words indented and half full width. Wide blocks that cannot usefully narrow are
   pushed below the panel instead of overflowing beside it. */

@media (min-width: 992px) {
    .article-bookmark-body h1,
    .article-bookmark-body h2,
    .article-bookmark-body h3,
    .article-bookmark-body h4,
    .article-bookmark-body h5,
    .article-bookmark-body h6 {
        overflow: hidden;
    }

    /* Lets a wrapped image narrow to the space beside the panel instead of being
       pushed below it. flow-root rather than overflow:hidden so a box-shadow on
       the image is not clipped. Tagged by article-bookmarks.js. */
    .article-bookmark-body .article-bookmark-figure {
        display: flow-root;
    }

    .article-bookmark-body table,
    .article-bookmark-body .embed-container,
    .article-bookmark-body hr {
        clear: left;
    }
}