/* QIE Help — extra styles layered on top of Material */

/* =============================================================================
   Website palette for light mode

   Matches www.qvera.com (Enfold theme) so the help reads as part of the site,
   in both the website and the in-product build: the site footer's blue for
   every primary surface and link, the footer's own text colors on those
   surfaces, and the copyright band's grey for the strip under the footer. The
   values are the site's own theme variables (--enfold-footer-color-* and
   --enfold-socket-color-*), read from the live stylesheet on 2026-09-22.
   =========================================================================== */

[data-md-color-scheme="default"] {
    /* Header, tab bar, links and buttons: the site footer's blue (#095c7a), which
       is also the site's main link color. The two tints are the site's own related
       shades of it (its footer "masonry" tint and its "stripe" tint). */
    --md-primary-fg-color:        #095C7A;
    --md-primary-fg-color--light: #2B7E9C;
    --md-primary-fg-color--dark:  #084B69;

    /* Secondary text on the blue surfaces (the search box placeholder): the
       footer's non-white text color. */
    --md-primary-bg-color--light: #B8DBE5;

    /* Footer: the site footer's blue with white text. */
    --md-footer-bg-color:         #095C7A;
    --md-footer-fg-color:         #FFFFFF;

    /* Copyright strip under the footer: the site's copyright band grey, and its text colour
       for everything written on it. Material spends --md-footer-fg-color--light on exactly two
       things, the copyright line itself and the links beside it, and both of those live on this
       strip rather than on the blue bar above, so it is the band's grey and not the footer's
       light blue. */
    --md-footer-bg-color--dark:    #444444;
    --md-footer-fg-color--light:   #DDDDDD;
    --md-footer-fg-color--lighter: #DDDDDD;

    /* Links, and the selected entry in the left navigation, take the colour the
       website's own body links have: the footer blue. Material drives both from this
       one variable, and left unset it falls back to Material's default indigo, which
       is the blue this replaces. */
    --md-typeset-a-color: #095C7A;

    /* Highlight: the brand red the website turns a link when you hover it. It is the
       site's own --enfold-main-color-secondary, and it replaces the QIE orange, so a
       menu entry or a link reddens under the pointer exactly as it does on the site. */
    --md-accent-fg-color:             #AD1E3F;
    --md-accent-fg-color--transparent: rgba(173, 30, 63, 0.1);
}

/* =============================================================================
   Darcula palette overrides for dark mode

   Matches QIE's "Darcula" application theme using the canonical IntelliJ
   Darcula colors:

       editor bg        #2B2B2B
       panel/sidebar bg #3C3F41
       foreground       #BBBBBB
       string           #6A8759   (green)
       keyword          #CC7832   (orange)
       number/constant  #6897BB   (light blue)
       function name    #FFC66D   (gold)
       comment          #808080
       selection        #214283
   =========================================================================== */

[data-md-color-scheme="slate"] {
    /* Page surfaces */
    --md-default-bg-color:         #2B2B2B;
    --md-default-bg-color--light:  hsla(0, 0%, 100%, 0.04);
    --md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.07);
    --md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.10);

    /* Foreground (body text + secondary) */
    --md-default-fg-color:           #BBBBBB;
    --md-default-fg-color--light:    #A9B7C6;
    --md-default-fg-color--lighter:  #808080;
    --md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.07);

    /* Header / primary surfaces — Darcula's panel grey */
    --md-primary-fg-color:        #3C3F41;
    --md-primary-fg-color--light: #4E5254;
    --md-primary-fg-color--dark:  #2B2B2B;
    --md-primary-bg-color:        #BBBBBB;
    --md-primary-bg-color--light: hsla(0, 0%, 73%, 0.7);

    /* Interactive accent — Darcula's signature gold */
    --md-accent-fg-color:              #FFC66D;
    --md-accent-fg-color--transparent: rgba(255, 198, 109, 0.12);
    --md-accent-bg-color:              #2B2B2B;
    --md-accent-bg-color--light:       hsla(0, 0%, 17%, 0.7);

    /* Body typography + links */
    --md-typeset-color:    #BBBBBB;
    --md-typeset-a-color:  #6897BB;

    /* Code blocks */
    --md-code-bg-color:  #2B2B2B;
    --md-code-fg-color:  #A9B7C6;

    /* Pygments syntax tokens — IntelliJ Darcula palette */
    --md-code-hl-color:           rgba(255, 198, 109, 0.20);
    --md-code-hl-keyword-color:   #CC7832;
    --md-code-hl-string-color:    #6A8759;
    --md-code-hl-number-color:    #6897BB;
    --md-code-hl-name-color:      #A9B7C6;
    --md-code-hl-function-color:  #FFC66D;
    --md-code-hl-comment-color:   #808080;
    --md-code-hl-operator-color:  #CC7832;
    --md-code-hl-punctuation-color: #A9B7C6;
    --md-code-hl-special-color:   #CC7832;
    --md-code-hl-constant-color:  #6897BB;
    --md-code-hl-variable-color:  #9876AA;

    /* Tables */
    --md-typeset-table-color:        hsla(0, 0%, 100%, 0.12);
    --md-typeset-table-color--light: hsla(0, 0%, 100%, 0.06);

    /* Footer — match the panel color so it doesn't look like a separate region */
    --md-footer-bg-color:       #3C3F41;
    --md-footer-bg-color--dark: #2B2B2B;
}

/* =============================================================================
   Keep every top-level section in the sidebar.

   With navigation.tabs on, Material "lifts" the sidebar: it hides every top-level
   item except the active one, on the theory that the tab bar carries the rest.
   The tab bar scrolls away, and the requirement here is that the tree always lists
   all six sections, so the two upstream rules doing the hiding are undone below.

       .md-nav--lifted > .md-nav__list > .md-nav__item          { display: none }
       .md-nav--lifted > .md-nav__list > .md-nav__item--active  { display: block }

   Undoing that alone would leave every section force-expanded, because Material
   also forces open any level-1 nav inside a lifted nav. So that rule is narrowed
   to the active section, and the toggle checkbox is wired back up for the others.
   =========================================================================== */

.md-nav--lifted > .md-nav__list > .md-nav__item {
    display: block;
}

/* Collapse the sections you are not in... */
.md-nav--lifted > .md-nav__list > .md-nav__item:not(.md-nav__item--active) > .md-nav {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
}

/* ...but let their expand toggle work, which upstream's force-open had made moot. */
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__toggle:checked ~ .md-nav {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

/* The active section's own label is inert upstream (pointer-events: none) because it
   is the only thing in the sidebar. Now that its siblings are links, it reads as
   disabled unless it looks distinct — so mark it rather than leaving it ambiguous. */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    font-weight: 700;
}

/* =============================================================================
   Sidebar section headers — the top-level bold labels under each tab
   (e.g. "QIE Tutorial", "JavaScript Tutorial"). Material's default sizes these
   the same as ordinary entries, which makes the sidebar read as one flat list.
   =========================================================================== */

.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
    font-size: 0.86rem;
    font-weight: 700;
}

/* A faint rule above each top-level section, so the eye can find the group
   boundaries without reading the labels. Skipped on the first section, where a
   line would just float under the sidebar title. */
.md-nav--lifted > .md-nav__list > .md-nav__item {
    border-top: 1px solid var(--md-default-fg-color--lightest);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.md-nav--lifted > .md-nav__list > .md-nav__item:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* The tab labels themselves — six sections, so there is room to make them
   legible rather than cramming them. */
.md-tabs__link {
    font-size: 0.74rem;
}

/* =============================================================================
   Title swap timing

   Material swaps the header title for the second topic when the page's h1 scrolls
   out of view (`md-header__title--active`). The tab bar sits above the h1, so it
   is long gone by then and the drop-down turns up late, after an extra scroll.

   overrides/partials/header.html sets `qie-title--switched` the moment the tab bar
   slides under the header, and these rules mirror Material's own swap. They carry
   one more class than the upstream selectors, so they win whenever the two
   disagree - which is exactly the window between the tabs leaving and the h1
   leaving.
   =========================================================================== */

.md-header__title.qie-title--switched .md-header__topic {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-1.25rem);
    z-index: -1;
}

.md-header__title.qie-title--switched .md-header__topic + .md-header__topic {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    z-index: 0;
}

/* =============================================================================
   Header section drop-down (overrides/partials/header.html)

   Sits where Material would show the page title: hidden until you scroll past
   the H1, at which point the tab bar has scrolled away too, so this becomes the
   only "where am I / go elsewhere" control on screen.
   =========================================================================== */

.qie-sectionmenu {
    display: inline-block;
    position: relative;
}

.qie-sectionmenu__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    list-style: none;
    border-radius: 0.1rem;
    padding: 0 0.2rem;
}

/* Safari/Chrome draw a disclosure triangle on summary; we supply our own chevron. */
.qie-sectionmenu__summary::-webkit-details-marker,
.qie-sectionmenu__summary::marker {
    display: none;
    content: "";
}

.qie-sectionmenu__summary:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.qie-sectionmenu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qie-sectionmenu__chevron {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
    fill: currentcolor;
    transition: transform 150ms;
}

.qie-sectionmenu[open] .qie-sectionmenu__chevron {
    transform: rotate(180deg);
}

.qie-sectionmenu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    min-width: 12rem;
    max-width: 20rem;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 0.2rem;
    padding: 0.3rem 0;
    border-radius: 0.1rem;
    background-color: var(--md-default-bg-color);
    color: var(--md-default-fg-color);
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25);
    font-size: 0.72rem;
    line-height: 1.5;
}

.qie-sectionmenu__list,
.qie-sectionmenu__sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.qie-sectionmenu__sublist {
    /* Children of the active section, indented under it. */
    margin: 0.1rem 0 0.3rem;
    border-left: 1px solid var(--md-default-fg-color--lightest);
    margin-left: 0.8rem;
}

.qie-sectionmenu__panel a {
    display: block;
    padding: 0.25rem 0.8rem;
    color: inherit;
    text-decoration: none;
}

.qie-sectionmenu__sublist a {
    padding-left: 0.8rem;
    color: var(--md-default-fg-color--light);
}

.qie-sectionmenu__panel a:hover {
    background-color: var(--md-accent-fg-color--transparent);
    color: var(--md-accent-fg-color);
}

.qie-sectionmenu__item--active > a {
    font-weight: 700;
    color: var(--md-accent-fg-color);
}

/* On a narrow screen the header title is already tight; drop the chevron rather
   than let the section name truncate to nothing. */
@media screen and (max-width: 44.9375em) {
    .qie-sectionmenu__chevron {
        display: none;
    }
}

/* =============================================================================
   Table header background — subtle grey that adapts to scheme.
   =========================================================================== */

.md-typeset table:not([class]) th,
.md-typeset table th {
    background-color: rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th,
[data-md-color-scheme="slate"] .md-typeset table th {
    background-color: rgba(255, 255, 255, 0.07);
}

/* =============================================================================
   Code blocks rendered inside table cells (raw HTML <pre><code>) — keep them
   from forcing the outer table wider than the page.
   =========================================================================== */

.md-typeset table pre {
    margin: 0.4em 0;
    max-width: 100%;
}

.md-typeset table pre code {
    white-space: pre;
    word-break: normal;
}

/* =============================================================================
   Screenshots — scale block-level images to 75% of the content width and
   center them on the page. Apply an `.inline-icon` class via attr_list
   (e.g. `![alt](path){ .inline-icon }`) to opt an image out of the scaling,
   for small inline icons that should sit flush with surrounding text.

   NOTE: don't rename `inline-icon` to plain `inline` — Material for MkDocs
   already defines `.md-typeset .inline` (floats left, sets width: 11.7rem)
   for its figure-style images, and the name collision breaks our opt-out.
   =========================================================================== */

.md-typeset img:not(.inline-icon) {
    max-width: 75%;
    display: block;
    margin: 0 auto;
    cursor: zoom-in;
}

.md-typeset img.inline-icon {
    max-width: none;
    display: inline;
    margin: 0;
    cursor: auto;
    vertical-align: middle;
}

/* ===========================================================================
   Left navigation - drop the repeated site title

   Material puts a `.md-nav__title` label at the top of the primary sidebar
   carrying the logo and site name. On desktop the page header directly above
   it already shows both, so the label is a duplicate that costs a chunk of
   vertical space at the top of a tree that now holds the entire hierarchy.

   Scoped to the desktop breakpoint (76.25em) on purpose: on narrower screens
   the same element is the slide-out drawer's header and its logo is the way
   back to the landing page, so it has to stay.
   =========================================================================== */

@media screen and (min-width: 76.25em) {
    .md-sidebar--primary .md-nav--primary > .md-nav__title {
        display: none;
    }
}

/* ===========================================================================
   Previous/next footer - align it with the content column and slim it down

   Material gives each link a 1rem top margin and pads the arrow buttons, which
   makes a two-line-tall bar out of what is really one line of text. These rules
   slim it back down and centre it on the content column with `margin: 0 auto`.

   No media query and no fixed indent: an earlier revision indented the bar by
   the sidebar's own width and confined that to desktop, which misaligned the
   moment the sidebar became a slide-out drawer. Centring works at every width,
   so the rules below apply unconditionally.
   =========================================================================== */

/* The pair belongs to the article, not to the page chrome. Material ships it as a
   full-width band in the footer's own dark colours, which reads as a permanent site
   element sitting across the bottom of everything. Dropping the band and giving it a
   hairline rule turns it into what it actually is: the end of the page you were reading.
   The copyright strip below keeps its own darker background and is untouched. */

.md-footer {
    background-color: transparent;
    color: var(--md-typeset-color);
}

.md-footer__inner {
    border-top: 1px solid var(--md-default-fg-color--lightest);
    margin: 0 auto;
    padding: 0.4rem 0.2rem 0.8rem;
    opacity: 1;
}

/* Material sizes these for a dark band; they are too tall for one line of text in flow.

   flex-grow is the important one. Material ships 0.01, so each link sizes to its own
   content and truncates as soon as a page title runs long, even with the whole row empty
   beside it. Growing them equally gives each half the row before the ellipsis appears. */
.md-footer__link {
    flex-grow: 1;
    margin-top: 0.4rem;
    margin-bottom: 0;
}

/* Reclaim a little more of that width from the gutters around the label. */
.md-footer__title {
    padding: 0 0.6rem;
}

.md-footer__button {
    margin: 0.1rem;
    padding: 0.2rem;
}

.md-footer__direction {
    color: var(--md-default-fg-color--light);
    opacity: 1;
}

/* =============================================================================
   Link columns (.grid.qie-links)

   The landing and Quick Links pages are link ledgers, not prose: a returning
   reader is scanning for a link they already know exists. Material's card grid
   wraps each group in a bordered box, which is a lot of chrome around what is
   really a list of six links, so these use the plain .grid for columns and drop
   the card styling entirely. Tight leading keeps the whole page on one screen.
   =========================================================================== */

.md-typeset .grid.qie-links {
    grid-gap: 0.3rem 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 1.2em 0;
}

.md-typeset .grid.qie-links > div {
    margin-bottom: 0.9rem;
}

/* The group label. Bold alone reads as body text at this density, so it is set
   smaller, spaced and muted - a column heading rather than a sentence. */
.md-typeset .grid.qie-links > div > p {
    margin: 0 0 0.25em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--md-default-fg-color--light);
}

.md-typeset .grid.qie-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.md-typeset .grid.qie-links li {
    margin: 0;
    line-height: 1.65;
    font-size: 0.76rem;
}

/* =============================================================================
   Work Sans for the frame, Roboto for the documents

   www.qvera.com is set in Work Sans. Using it for the header, the section tabs and the
   copyright line frames the help the way the rest of the site is framed, while the
   documents themselves stay in Material's Roboto, which is the easier read at length.
   overrides/main.html loads the three weights these places use.

   Search results are the exception inside the header: they quote titles and sentences
   out of the documents, so they belong to the documents and keep the body font.
   =========================================================================== */

.md-header,
.md-tabs,
.md-copyright {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.md-search-result {
    font-family: var(--md-text-font-family), Helvetica, Arial, sans-serif;
}

/* The copyright line, matched to the site's: 11px at the light weight its body text uses.
   It is already left-aligned, because Material's footer-meta row is a space-between flex
   and the copyright is its only child, so nothing here has to force that. */
.md-copyright {
    font-size: 11px;
    font-weight: 300;
}

/* The Privacy Policy link beside the copyright is the same grey as the words around it, as it
   is on the site. Stated literally rather than through --md-footer-fg-color--light: that
   variable reaches the copyright text but not this link, which keeps resolving Material's
   default translucent white, and a colour that plain is not worth a puzzle.

   The site dims a link on this strip on hover rather than brightening it, so it goes to the
   band's slightly dimmer grey. Material would take it to white, which belongs to the blue
   footer above and is too loud down here. */
html .md-footer-meta.md-typeset a {
    color: #DDDDDD;
}

html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
    color: #CCCCCC;
}

/* =============================================================================
   Product link beside the logo (website build only)

   overrides/partials/header.html renders it from extra.qie_header_link. Deliberately quiet
   and unbolded: it is a way back to qvera.com for someone who arrived here from a search
   engine, not a seventh section competing with the tabs. It behaves like the logo and
   navigates in the current tab. On a phone the header has no room for it and it is dropped;
   the reader still has the logo.
   =========================================================================== */

.qie-header__link {
    color: inherit;
    font-size: 0.74rem;
    font-weight: 400;
    opacity: 0.7;
    transition: opacity 0.25s;
    white-space: nowrap;
}

.qie-header__link:focus,
.qie-header__link:hover {
    color: inherit;
    opacity: 1;
}

@media screen and (max-width: 44.984375em) {
    .qie-header__link {
        display: none;
    }
}

/* =============================================================================
   Navigation highlight follows the pointer, not the click

   Material colours `:focus` with the accent as well as `:hover`, and a mouse click
   leaves the clicked element focused. A section header in the sidebar is a <label>
   that expands its section rather than a link that navigates away, so clicking one
   leaves it sitting in the highlight colour until something else takes focus - the
   red looks stuck rather than deliberate.

   Restricting the accent to `:hover` and to `:focus-visible` keeps the highlight where
   it means something. A keyboard user still gets it, because the browser sets
   focus-visible when focus arrives by keyboard; a mouse user does not, because it does
   not. The second rule puts the selected entry's own colour back, since the first would
   otherwise drop a clicked active entry to plain body text.

   Both themes: this is how the highlight behaves, not which colour it is.
   =========================================================================== */

.md-nav__link[for]:focus:not(:focus-visible),
.md-nav__link[href]:focus:not(:focus-visible) {
    color: inherit;
}

.md-nav__item .md-nav__link--active:focus:not(:focus-visible),
.md-nav--primary .md-nav__item--active > .md-nav__link:focus:not(:focus-visible) {
    color: var(--md-typeset-a-color);
}

/* =============================================================================
   Consent banner - matches the www.qvera.com cookie bar (website build only)

   mkdocs.web.yml turns on Material's cookie consent banner. Material renders it as a
   modal: a white panel over a dimmed, blurred, click-blocked page, with a heading, a
   paragraph and its buttons stacked down the middle. The site's bar is a thin navy
   strip fixed to the bottom that leaves the page usable, with the sentence and its
   buttons on one line.

   Every value below is the site's own, read from the live page on 2026-09-22. Note
   they come from the site's custom CSS (`#top .avia-cookie-consent`, near the end of
   its head), NOT from the Enfold theme defaults earlier in the same page, which are a
   black bar with white buttons and are all overridden:

       bar          rgba(7,46,67,0.8), padding 11px
       text         rgba(255,255,255,0.9), 12px, letter-spacing 0.05em, centred
       OK button    #3a7488, white text, no border, padding 8px, min-width 70px,
                    border-radius 3px, margin-left 6px, line-height 1
       Learn more   transparent, no border, font-weight 300, white text
       hover        opacity 0.9, no recolouring

   Selector note: `.md-consent__form` carries `md-typeset` itself, so a rule written as
   `.md-typeset .md-consent__form > p` matches nothing. Rules that target the form's own
   children are scoped with `.md-consent` instead.

   The colours are literal rather than scheme variables because the site has no dark
   mode: its bar looks the same whatever the visitor's system preference, and so does
   this one. Material's responsive rule that stacks the buttons full width on a narrow
   screen is deliberately left alone.

   Harmless in the in-product build, which renders no consent markup at all.
   =========================================================================== */

/* No overlay: the site lets people read and navigate while its bar is up. */
.md-consent__overlay {
    display: none;
}

.md-consent__inner {
    background-color: rgba(7, 46, 67, 0.8);
    border-radius: 0;
    box-shadow: none;
}

/* On the dark theme the site's navy reads as a second, unrelated blue beside Darcula's
   greys, so the bar takes the Darcula panel grey (#3C3F41) instead. Everything else about
   the bar, the button colour included, is the same in both themes. */
[data-md-color-scheme="slate"] .md-consent__inner {
    background-color: rgba(60, 63, 65, 0.92);
}

.md-consent .md-consent__form {
    color: rgba(255, 255, 255, 0.9);
    padding: 11px;
    text-align: center;
}

/* The site's bar carries no heading - "Cookie and Privacy Settings" is the title of
   the modal behind its "Learn more" button. The heading stays in the DOM, because a
   screen reader needs the region named, but it leaves the visible bar. */
.md-consent .md-consent__form > h4 {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Sentence and buttons share one centred line, as on the site. */
.md-consent .md-consent__form > p {
    color: inherit;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

.md-consent .md-consent__controls {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

/* Base: the site's filled "OK" button. */
.md-typeset .md-consent__controls .md-button {
    background-color: #3A7488;
    border: 0;
    border-radius: 3px;
    color: rgba(255, 255, 255, 1);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0 0 0 6px;
    min-width: 70px;
    padding: 8px;
    white-space: nowrap;
}

/* "Learn more" is the site's secondary button: transparent and lighter. It is the only
   non-primary control on the bar, which leaves "OK" as the single filled call to action,
   exactly as the site's bar has it. */
.md-typeset .md-consent__controls .md-button:not(.md-button--primary) {
    background-color: transparent;
    font-weight: 300;
}

/* The site fades a button on hover; Material would recolour it to the accent. */
.md-typeset .md-consent__controls .md-button:focus,
.md-typeset .md-consent__controls .md-button:hover {
    background-color: #3A7488;
    color: rgba(255, 255, 255, 1);
    opacity: 0.9;
}

.md-typeset .md-consent__controls .md-button:not(.md-button--primary):focus,
.md-typeset .md-consent__controls .md-button:not(.md-button--primary):hover {
    background-color: transparent;
    opacity: 0.9;
}

/* The category list behind "Manage settings" has no counterpart on the bar (the site
   puts its equivalent in the modal), so it only has to stay legible on the strip:
   centred as a block, its rows left-aligned. */
.md-consent .md-consent__settings {
    color: inherit;
    font-size: 12px;
}

.md-consent .md-consent__settings .task-list {
    display: inline-block;
    text-align: left;
}