/* The light theme and the appearance defaults; per-site values override them from an inline <style>. */
:root {
    --hc-color-text: #14181f;
    --hc-color-muted: #5a6472;
    --hc-color-accent: #0566ff;
    --hc-color-accent-hover: #0453d1;
    --hc-color-accent-soft: #e6efff;
    --hc-color-link: #1a56db;
    --hc-color-bg: #ffffff;
    --hc-color-surface: #f6f8fb;
    --hc-color-border: #e2e7ef;
    --hc-color-target: #fff4cc;
    /* The search pill sits on the accent hero in both themes, so it keeps its own pair. */
    --hc-color-search-bg: #ffffff;
    --hc-color-search-text: #647491;
    /* Same reason, for an accent-filled control; themeCss.ts re-emits it per site. */
    --hc-color-on-accent: #ffffff;
    --hc-hero-bg: var(--hc-color-accent);
    --hc-hero-text: #ffffff;
    /* Default to the page, not the accent; themeCss.ts overrides them per site. */
    --hc-header-bg: var(--hc-color-bg);
    --hc-header-text: var(--hc-color-text);
    --hc-footer-bg: var(--hc-color-bg);
    --hc-footer-text: var(--hc-color-muted);
    --hc-anchor-offset: 24px;
    --hc-font-body:
        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --hc-radius: 10px;
    --hc-radius-pill: 999px;
    --hc-container-width: 880px;
}

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

body {
    margin: 0;
    background: var(--hc-color-bg);
    color: var(--hc-color-text);
    font-family: var(--hc-font-body);
    font-size: 16px;
    line-height: 1.6;
}

a {
    color: var(--hc-color-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

.hc-container {
    width: 100%;
    max-width: var(--hc-container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* In normal flow rather than floated over the hero: dismissible chrome must never cover the search box. */
.hc-language-suggestion {
    background: var(--hc-color-surface);
    border-bottom: 1px solid var(--hc-color-border);
    font-size: 14px;
}

/* Beats the UA stylesheet's `[hidden] { display: none }`, or every alternate renders at once. */
.hc-language-suggestion__option[hidden] {
    display: none;
}

.hc-language-suggestion__option {
    width: 100%;
    max-width: var(--hc-container-width);
    margin-inline: auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hc-language-suggestion__text {
    margin: 0;
    margin-inline-end: auto;
}

.hc-language-suggestion__action {
    font-weight: 600;
    text-decoration: underline;
}

.hc-language-suggestion__dismiss {
    background: none;
    border: 0;
    padding: 0;
    color: var(--hc-color-muted);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.hc-hero {
    background: var(--hc-hero-bg);
    color: var(--hc-hero-text);
    padding: 56px 0 64px;
}

.hc-hero--none {
    border-bottom: 1px solid var(--hc-color-border);
}

.hc-hero--compact {
    padding: 24px 0 28px;
}

.hc-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.hc-hero--compact .hc-hero__inner {
    align-items: flex-start;
    gap: 10px;
    text-align: start;
}

.hc-hero__logo {
    max-height: 36px;
    max-width: 220px;
    object-fit: contain;
}

.hc-hero__title {
    color: inherit;
    font-size: clamp(28px, 23px + 1.3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.hc-hero--compact .hc-hero__title {
    font-size: 24px;
}

.hc-hero__title--link {
    font-size: 18px;
    font-weight: 600;
}

.hc-hero__icon,
.hc-hero__emoji {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: -4px;
    object-fit: contain;
    font-size: 24px;
    line-height: 1;
}

.hc-hero__subtitle {
    font-size: 16px;
    margin: 0;
    max-width: 620px;
    opacity: 0.9;
}

.hc-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 460px;
    margin: 6px 0 0;
    padding: 0 20px;
    height: 46px;
    border-radius: var(--hc-radius-pill);
    background: var(--hc-color-search-bg);
    color: var(--hc-color-search-text);
}

/* Without a hero band behind it, a white pill on a white page needs an edge. */
.hc-hero--none .hc-search {
    border: 1px solid var(--hc-color-border);
}

.hc-search__icon {
    flex: 0 0 auto;
}

.hc-search__submit {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hc-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

/* Built entirely by public/search.js, so with no script there is no empty panel in the page. */
.hc-suggest {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    top: calc(100% + 6px);
    padding: 6px 0;
    border-radius: var(--hc-radius);
    background: var(--hc-color-bg);
    border: 1px solid var(--hc-color-border);
    box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
    text-align: start;
}

.hc-suggest[hidden] {
    display: none;
}

.hc-suggest__empty[hidden] {
    display: none;
}

.hc-suggest__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    color: var(--hc-color-text);
}

.hc-suggest__option:hover,
.hc-suggest__option--active {
    background: var(--hc-color-surface);
    text-decoration: none;
}

.hc-suggest__title {
    font-size: 14px;
    font-weight: 600;
}

/* One line, so four rows stay a dropdown rather than becoming a second results page. */
.hc-suggest__snippet {
    color: var(--hc-color-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-suggest__empty {
    color: var(--hc-color-muted);
    font-size: 14px;
    margin: 0;
    padding: 8px 16px;
}

.hc-suggest__all {
    display: block;
    padding: 10px 16px 4px;
    border-top: 1px solid var(--hc-color-border);
    margin-top: 6px;
    color: var(--hc-color-accent);
    font-size: 14px;
    text-align: center;
}

.hc-languages__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-languages__link {
    color: var(--hc-color-muted);
    display: block;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
}

.hc-languages__link[aria-current='true'] {
    background: var(--hc-color-surface);
    color: var(--hc-color-text);
}

.hc-main {
    padding-top: 40px;
    padding-bottom: 64px;
    min-height: 60vh;
}

/* The frame is sized to the content, so `vh` here would inflate it one postMessage round trip at a time. */
body.hc-embedded .hc-main {
    min-height: 0;
}

.hc-title {
    /* Floor stays above the article body's fixed 24px h2, or an h1 stops out-ranking one. */
    font-size: clamp(28px, 22px + 1.5vw, 32px);
    line-height: 1.25;
    margin: 0 0 12px;
}

.hc-lede,
.hc-empty {
    color: var(--hc-color-muted);
    margin: 0 0 28px;
}

.hc-section + .hc-section {
    margin-top: 40px;
}

.hc-section__title,
.hc-related__title {
    font-size: clamp(18px, 17px + 0.3vw, 20px);
    margin: 0 0 16px;
}

.hc-cards {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-cards--grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.hc-card {
    background: var(--hc-color-surface);
    border: 1px solid var(--hc-color-border);
    border-radius: var(--hc-radius);
    padding: 18px;
}

.hc-card__link {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--hc-color-text);
}

.hc-card__link:hover,
.hc-card__link:focus-visible {
    text-decoration: none;
}

.hc-cards--list .hc-card__link {
    align-items: center;
}

.hc-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.hc-card__name {
    font-size: 17px;
    font-weight: 600;
}

.hc-card__link:hover .hc-card__name,
.hc-card__link:focus-visible .hc-card__name {
    text-decoration: underline;
}

.hc-card__description {
    color: var(--hc-color-muted);
    font-size: 14px;
    /* Two lines, so one long description cannot make its card twice the height of its row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hc-card__meta {
    color: var(--hc-color-accent);
    font-size: 13px;
}

.hc-card__featured {
    display: block;
    font-size: 13px;
    margin-top: 12px;
}

/* Fixed box so a slow or missing upload can't reflow the card. */
.hc-card__visual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--hc-radius);
    border: 1px solid var(--hc-color-border);
    font-size: 20px;
    line-height: 1;
}

.hc-card__visual--image {
    width: 64px;
    height: 64px;
    background: var(--hc-color-accent-soft);
    font-size: 28px;
}

.hc-card__icon {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: contain;
}

.hc-card__chevron {
    display: none;
    color: var(--hc-color-muted);
    font-size: 22px;
    line-height: 1;
}

/* The glyph is direction-dependent, so `dir` on <html> is all an RTL page has to change. */
.hc-breadcrumbs__separator::before,
.hc-card__chevron::before,
.hc-tile__chevron::before {
    content: '\203A';
}

[dir='rtl'] .hc-breadcrumbs__separator::before,
[dir='rtl'] .hc-card__chevron::before,
[dir='rtl'] .hc-tile__chevron::before {
    content: '\2039';
}

.hc-cards--list .hc-card__chevron {
    display: block;
}

.hc-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hc-color-border);
}

.hc-tile {
    border-bottom: 1px solid var(--hc-color-border);
}

.hc-tile__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 12px 4px;
    color: var(--hc-color-text);
}

.hc-tile__link:hover .hc-tile__title,
.hc-tile__link:focus-visible .hc-tile__title {
    text-decoration: underline;
}

.hc-tile__link:hover,
.hc-tile__link:focus-visible {
    text-decoration: none;
}

.hc-tile__chevron {
    color: var(--hc-color-muted);
    font-size: 22px;
    line-height: 1;
}

.hc-results__heading {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 32px;
}

.hc-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Whole-card link: the row is one target, so there is no dead space between title and snippet. */
.hc-result__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 24px;
    background: var(--hc-color-surface);
    border: 1px solid var(--hc-color-border);
    border-radius: var(--hc-radius);
    color: var(--hc-color-text);
}

.hc-result__link:hover .hc-result__title,
.hc-result__link:focus-visible .hc-result__title {
    text-decoration: underline;
}

.hc-result__link:hover,
.hc-result__link:focus-visible {
    text-decoration: none;
    border-color: var(--hc-color-accent);
}

.hc-result__title {
    font-weight: 600;
}

/* A snippet is a fragment cut mid-sentence, so it is capped rather than left to become the tallest thing in the row. */
.hc-result__snippet {
    color: var(--hc-color-muted);
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Weight only: borrowing no colour keeps the match readable on every palette, which the UA's black-on-yellow <mark> is not. */
.hc-result__match {
    font-weight: 600;
    color: inherit;
    background: none;
}

/* Centred, because a search that found nothing has no content to sit beside. */
.hc-noresults {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 16px 0 40px;
}

.hc-noresults__title {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.hc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 20px;
    border-radius: var(--hc-radius);
    background: var(--hc-color-accent);
    color: var(--hc-color-on-accent);
    font-size: 14px;
    font-weight: 500;
}

.hc-button:hover,
.hc-button:focus-visible {
    background: var(--hc-color-accent-hover);
    text-decoration: none;
}

.hc-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.hc-breadcrumbs__separator,
.hc-breadcrumbs__current {
    color: var(--hc-color-muted);
}

.hc-article__summary {
    color: var(--hc-color-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}

.hc-article__meta {
    color: var(--hc-color-muted);
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 28px;
}

.hc-feedback {
    border-top: 1px solid var(--hc-color-border);
    margin-top: 40px;
    padding-top: 28px;
    text-align: center;
}

.hc-feedback__question {
    font-weight: 600;
    margin: 0 0 14px;
}

.hc-feedback__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hc-feedback__button {
    background: transparent;
    border: 1px solid var(--hc-color-border);
    border-radius: var(--hc-radius-pill);
    color: var(--hc-color-text);
    font: inherit;
    font-size: 14px;
    padding: 8px 20px;
}

.hc-feedback__button:not(:disabled) {
    cursor: pointer;
}

.hc-feedback__button:not(:disabled):hover {
    background: var(--hc-color-surface);
}

/* The cast vote stays legible while its sibling greys out, so the widget still reports which way the visitor voted. */
.hc-feedback__button:disabled:not(.hc-feedback__button--chosen) {
    color: var(--hc-color-muted);
    opacity: 0.6;
}

.hc-feedback__button--chosen {
    background: var(--hc-color-accent-soft);
    border-color: var(--hc-color-accent);
    color: var(--hc-color-accent);
}

.hc-pager {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.hc-pager__link {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    background: var(--hc-color-surface);
    border: 1px solid var(--hc-color-border);
    border-radius: var(--hc-radius);
    padding: 14px 16px;
    color: var(--hc-color-text);
}

.hc-pager__link--next {
    text-align: end;
}

.hc-pager__label {
    color: var(--hc-color-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.hc-pages {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.hc-pages__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-pages__number,
.hc-pages__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--hc-color-text);
    font-size: 12px;
    line-height: 1;
}

.hc-pages__number--current {
    border-color: var(--hc-color-accent);
    color: var(--hc-color-accent);
}

.hc-pages__step {
    border-color: var(--hc-color-border);
    color: var(--hc-color-muted);
}

/* A step a visitor can actually take is filled; the end of the range is a dead outline. */
.hc-pages__step--live {
    background: var(--hc-color-text);
    border-color: var(--hc-color-text);
    color: var(--hc-color-bg);
}

.hc-pages__step--live:hover,
.hc-pages__step--live:focus-visible {
    background: var(--hc-color-accent);
    border-color: var(--hc-color-accent);
    color: var(--hc-color-on-accent);
    text-decoration: none;
}

.hc-pages__chevron::before {
    content: '\2039';
    font-size: 16px;
}

.hc-pages__chevron--next::before {
    content: '\203A';
}

[dir='rtl'] .hc-pages__chevron::before {
    content: '\203A';
}

[dir='rtl'] .hc-pages__chevron--next::before {
    content: '\2039';
}

.hc-related {
    margin-top: 40px;
}

.hc-article__body > :first-child {
    margin-top: 0;
}

/* The editor's scale is these same three steps, so an author sizes what a reader gets. */
.hc-article__body h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    margin: 32px 0 12px;
}

.hc-article__body h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    margin: 24px 0 8px;
}

.hc-article__body h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    margin: 20px 0 8px;
}

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

.hc-article__body img[data-zoom] {
    cursor: zoom-in;
}

/* One mechanical rule per whole percent: the editor strips inline styles and the sanitizer keeps no class,
   so an author's width can only arrive as data and be matched. Regenerate the block rather than editing a line. */
.hc-article__body [data-width='10'] {
    width: 10%;
}
.hc-article__body [data-width='11'] {
    width: 11%;
}
.hc-article__body [data-width='12'] {
    width: 12%;
}
.hc-article__body [data-width='13'] {
    width: 13%;
}
.hc-article__body [data-width='14'] {
    width: 14%;
}
.hc-article__body [data-width='15'] {
    width: 15%;
}
.hc-article__body [data-width='16'] {
    width: 16%;
}
.hc-article__body [data-width='17'] {
    width: 17%;
}
.hc-article__body [data-width='18'] {
    width: 18%;
}
.hc-article__body [data-width='19'] {
    width: 19%;
}
.hc-article__body [data-width='20'] {
    width: 20%;
}
.hc-article__body [data-width='21'] {
    width: 21%;
}
.hc-article__body [data-width='22'] {
    width: 22%;
}
.hc-article__body [data-width='23'] {
    width: 23%;
}
.hc-article__body [data-width='24'] {
    width: 24%;
}
.hc-article__body [data-width='25'] {
    width: 25%;
}
.hc-article__body [data-width='26'] {
    width: 26%;
}
.hc-article__body [data-width='27'] {
    width: 27%;
}
.hc-article__body [data-width='28'] {
    width: 28%;
}
.hc-article__body [data-width='29'] {
    width: 29%;
}
.hc-article__body [data-width='30'] {
    width: 30%;
}
.hc-article__body [data-width='31'] {
    width: 31%;
}
.hc-article__body [data-width='32'] {
    width: 32%;
}
.hc-article__body [data-width='33'] {
    width: 33%;
}
.hc-article__body [data-width='34'] {
    width: 34%;
}
.hc-article__body [data-width='35'] {
    width: 35%;
}
.hc-article__body [data-width='36'] {
    width: 36%;
}
.hc-article__body [data-width='37'] {
    width: 37%;
}
.hc-article__body [data-width='38'] {
    width: 38%;
}
.hc-article__body [data-width='39'] {
    width: 39%;
}
.hc-article__body [data-width='40'] {
    width: 40%;
}
.hc-article__body [data-width='41'] {
    width: 41%;
}
.hc-article__body [data-width='42'] {
    width: 42%;
}
.hc-article__body [data-width='43'] {
    width: 43%;
}
.hc-article__body [data-width='44'] {
    width: 44%;
}
.hc-article__body [data-width='45'] {
    width: 45%;
}
.hc-article__body [data-width='46'] {
    width: 46%;
}
.hc-article__body [data-width='47'] {
    width: 47%;
}
.hc-article__body [data-width='48'] {
    width: 48%;
}
.hc-article__body [data-width='49'] {
    width: 49%;
}
.hc-article__body [data-width='50'] {
    width: 50%;
}
.hc-article__body [data-width='51'] {
    width: 51%;
}
.hc-article__body [data-width='52'] {
    width: 52%;
}
.hc-article__body [data-width='53'] {
    width: 53%;
}
.hc-article__body [data-width='54'] {
    width: 54%;
}
.hc-article__body [data-width='55'] {
    width: 55%;
}
.hc-article__body [data-width='56'] {
    width: 56%;
}
.hc-article__body [data-width='57'] {
    width: 57%;
}
.hc-article__body [data-width='58'] {
    width: 58%;
}
.hc-article__body [data-width='59'] {
    width: 59%;
}
.hc-article__body [data-width='60'] {
    width: 60%;
}
.hc-article__body [data-width='61'] {
    width: 61%;
}
.hc-article__body [data-width='62'] {
    width: 62%;
}
.hc-article__body [data-width='63'] {
    width: 63%;
}
.hc-article__body [data-width='64'] {
    width: 64%;
}
.hc-article__body [data-width='65'] {
    width: 65%;
}
.hc-article__body [data-width='66'] {
    width: 66%;
}
.hc-article__body [data-width='67'] {
    width: 67%;
}
.hc-article__body [data-width='68'] {
    width: 68%;
}
.hc-article__body [data-width='69'] {
    width: 69%;
}
.hc-article__body [data-width='70'] {
    width: 70%;
}
.hc-article__body [data-width='71'] {
    width: 71%;
}
.hc-article__body [data-width='72'] {
    width: 72%;
}
.hc-article__body [data-width='73'] {
    width: 73%;
}
.hc-article__body [data-width='74'] {
    width: 74%;
}
.hc-article__body [data-width='75'] {
    width: 75%;
}
.hc-article__body [data-width='76'] {
    width: 76%;
}
.hc-article__body [data-width='77'] {
    width: 77%;
}
.hc-article__body [data-width='78'] {
    width: 78%;
}
.hc-article__body [data-width='79'] {
    width: 79%;
}
.hc-article__body [data-width='80'] {
    width: 80%;
}
.hc-article__body [data-width='81'] {
    width: 81%;
}
.hc-article__body [data-width='82'] {
    width: 82%;
}
.hc-article__body [data-width='83'] {
    width: 83%;
}
.hc-article__body [data-width='84'] {
    width: 84%;
}
.hc-article__body [data-width='85'] {
    width: 85%;
}
.hc-article__body [data-width='86'] {
    width: 86%;
}
.hc-article__body [data-width='87'] {
    width: 87%;
}
.hc-article__body [data-width='88'] {
    width: 88%;
}
.hc-article__body [data-width='89'] {
    width: 89%;
}
.hc-article__body [data-width='90'] {
    width: 90%;
}
.hc-article__body [data-width='91'] {
    width: 91%;
}
.hc-article__body [data-width='92'] {
    width: 92%;
}
.hc-article__body [data-width='93'] {
    width: 93%;
}
.hc-article__body [data-width='94'] {
    width: 94%;
}
.hc-article__body [data-width='95'] {
    width: 95%;
}
.hc-article__body [data-width='96'] {
    width: 96%;
}
.hc-article__body [data-width='97'] {
    width: 97%;
}
.hc-article__body [data-width='98'] {
    width: 98%;
}
.hc-article__body [data-width='99'] {
    width: 99%;
}
.hc-article__body [data-width='100'] {
    width: 100%;
}

/* No marker-less wrapper <li> reaches here — the editor lifts that shape back out — so nesting alone carries depth. */
.hc-article__body ul,
.hc-article__body ol {
    margin: 16px 0;
    padding-inline-start: 26px;
}

.hc-article__body li + li {
    margin-top: 6px;
}

/* A sub-list closes inside its parent item, so its own outer margins would double the gap. */
.hc-article__body :is(ul, ol) :is(ul, ol) {
    margin: 6px 0 0;
}

.hc-article__body ul {
    list-style-type: disc;
}

.hc-article__body ol {
    list-style-type: decimal;
}

.hc-article__body :is(ul, ol) ul {
    list-style-type: circle;
}

.hc-article__body :is(ul, ol) ol {
    list-style-type: lower-alpha;
}

.hc-article__body :is(ul, ol) :is(ul, ol) ul {
    list-style-type: square;
}

.hc-article__body :is(ul, ol) :is(ul, ol) ol {
    list-style-type: lower-roman;
}

/* A paragraph's *text* moves, but an image, a player or a table is its own narrowed box, so only margins move it. */
.hc-article__body p[data-align='center'],
.hc-article__body h2[data-align='center'],
.hc-article__body h3[data-align='center'],
.hc-article__body h4[data-align='center'] {
    text-align: center;
}

/* Deliberately physical: apiv2 stores no explicit left, so `end` would flip an author's `right` to the left of an RTL page. */
.hc-article__body p[data-align='right'],
.hc-article__body h2[data-align='right'],
.hc-article__body h3[data-align='right'],
.hc-article__body h4[data-align='right'] {
    text-align: right;
}

/* An img is inline by default, and margins cannot move an inline box. */
.hc-article__body img[data-align] {
    display: block;
}

.hc-article__body img[data-align='center'],
.hc-article__body iframe[data-align='center'],
.hc-article__body table[data-align='center'] {
    margin-inline: auto;
}

.hc-article__body img[data-align='right'],
.hc-article__body iframe[data-align='right'],
.hc-article__body table[data-align='right'] {
    margin-left: auto;
    margin-right: 0;
}

.hc-article__body pre {
    background: var(--hc-color-surface);
    border-radius: var(--hc-radius);
    padding: 14px;
    overflow-x: auto;
}

/* A video embed arrives as a bare iframe, so the ratio reserving its space has to live on the element itself. */
.hc-article__body iframe {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 16px 0;
    border: 0;
    border-radius: var(--hc-radius);
}

/* A share of the column is a deliberate size, so it outranks the default cap above. */
.hc-article__body iframe[data-width] {
    max-width: 100%;
}

/* The sanitizer strips a foreign iframe's src but keeps the element, and a player-sized empty box is worse. */
.hc-article__body iframe:not([src]) {
    display: none;
}

/* No wrapper element and no classes survive the sanitizer, so the table is its own scroll box. */
.hc-article__body table {
    border-collapse: collapse;
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

.hc-article__body th,
.hc-article__body td {
    border: 1px solid var(--hc-color-border);
    padding: 8px 10px;
    text-align: start;
    /* Matches the editor: a column that cannot shrink past this makes a wide table scroll rather than squash. */
    min-width: 96px;
}

.hc-article__body th {
    background: var(--hc-color-surface);
}

/* Cell text arrives wrapped in paragraphs, whose outer margins would double the cell padding. */
.hc-article__body th > p:first-child,
.hc-article__body td > p:first-child {
    margin-top: 0;
}

.hc-article__body th > p:last-child,
.hc-article__body td > p:last-child {
    margin-bottom: 0;
}

/* Anything carrying an id is an in-article link target, so it needs room above it when jumped to. */
.hc-article__body [id] {
    scroll-margin-top: var(--hc-anchor-offset);
}

@keyframes hc-anchor-flash {
    from {
        background-color: var(--hc-color-target);
    }
    to {
        background-color: transparent;
    }
}

/* A Manual Anchor is an empty inline element, so its block is what gets highlighted. */
.hc-article__body [id]:target,
.hc-article__body :has(> a[id]:not([href]):target) {
    animation: hc-anchor-flash 2.5s ease-out;
    border-radius: var(--hc-radius);
}

@media (prefers-reduced-motion: reduce) {
    .hc-article__body [id]:target,
    .hc-article__body :has(> a[id]:not([href]):target) {
        animation: none;
        background-color: var(--hc-color-target);
    }
}

.hc-lightbox {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    padding: 24px;
    border: 0;
    background: transparent;
    overflow: hidden;
}

/* Only while open: a dialog is display:none when closed, and any display here would reveal it. */
.hc-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* showModal() focuses the dialog, and a focus ring around the whole viewport is only noise. */
.hc-lightbox:focus {
    outline: none;
}

.hc-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

.hc-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* Nothing else in the dialog is clickable, so the picture itself carries the way out. */
    cursor: zoom-out;
}

.hc-header {
    background: var(--hc-header-bg);
    color: var(--hc-header-text);
    border-bottom: 1px solid var(--hc-color-border);
}

.hc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 56px;
}

.hc-header__logo {
    display: block;
    max-height: 32px;
    width: auto;
}

.hc-header__links,
.hc-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc-header__link,
.hc-footer__link {
    color: inherit;
    text-decoration: none;
}

.hc-header__link:hover,
.hc-footer__link:hover {
    text-decoration: underline;
}

.hc-footer {
    background: var(--hc-footer-bg);
    border-top: 1px solid var(--hc-color-border);
    color: var(--hc-footer-text);
    font-size: 14px;
    padding: 24px 0;
}

.hc-footer__logo {
    display: block;
    max-height: 28px;
    width: auto;
}

.hc-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hc-footer__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.hc-header__nav,
.hc-footer__nav {
    margin-inline-start: auto;
}

.hc-footer__text {
    margin: 0;
}

.hc-footer__powered {
    margin-inline-start: auto;
}

/* 768 and 1024 put the preview's 390 / 834 / 1280 device widths inside a band, not on an edge. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hc-hero {
        padding: 40px 0 44px;
    }

    /* Only below ~792px does 240px drop to two columns; above that this changes nothing. */
    .hc-cards--grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 767px) {
    .hc-hero {
        padding: 32px 0 36px;
    }

    /* 460px is wider than the hero it sits in. */
    .hc-search {
        max-width: 100%;
    }

    .hc-main {
        padding-top: 24px;
        padding-bottom: 40px;
    }

    .hc-section + .hc-section {
        margin-top: 28px;
    }

    .hc-results__heading {
        margin: 0 0 20px;
    }

    .hc-feedback {
        margin-top: 28px;
        padding-top: 20px;
    }

    .hc-related {
        margin-top: 28px;
    }

    /* Two `flex: 1 1 0` cards with nowhere to go: the one row that stacks rather than wraps. */
    .hc-pager {
        flex-direction: column;
    }

    /* An author's width is a desktop instruction, so 25% of an 880px column is not 87px here. */
    .hc-article__body [data-width] {
        width: 100%;
    }

    /* A table included: overflow-x still scrolls at 100%, so it keeps its phone accommodation. */
    .hc-article__body :is(img, iframe, table)[data-align] {
        margin-inline: 0;
    }
}