/*
 * Shared styles for the markdown-backed collections: the blog and the help centre.
 * Loaded by layouts/content, after theme.css and site.css, and followed by one
 * skin (content-blog.css or content-help.css) which sets the accent only.
 *
 * Replaces the old content.css, whose prose rules are folded in below.
 *
 * Sections: skin defaults · top bar · page head · entry list · prose · CTA · footer
 */

/* ── Skin defaults ──────────────────────────────────────────────────────────
   Every accent in this file reads these two, and nothing else. A skin that sets
   neither still renders in the brand colour rather than falling back to nothing. */

.content-site {
    --content-accent: var(--spheyas-blue-dark);
    --content-accent-tint: var(--spheyas-blue-tint);
}

/* ── Top bar ────────────────────────────────────────────────────────────────
   Sticky, because these are long scrolling pages and the way back should not
   require scrolling to the top to find. */

.content-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid var(--spheyas-border);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
}

.content-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spheyas-space-4);
    min-height: 68px;
}

.content-bar__brand {
    display: flex;
    align-items: center;
    gap: var(--spheyas-space-4);
}

.content-bar__logo img {
    width: 180px;
    height: 40px;
}

/* The collection's name sits beside the mark, so the header says which of the two
   sites you are on without reading the nav */
.content-bar__wordmark {
    color: var(--spheyas-ink);
    font-family: var(--spheyas-font-heading);
    font-size: var(--spheyas-text-xl);
    font-weight: 700;
}

.content-bar__nav {
    display: flex;
    align-items: center;
    gap: var(--spheyas-space-5);
}

.content-bar__link {
    position: relative;
    padding: var(--spheyas-space-2) 0;
    color: var(--spheyas-ink);
    font-size: var(--spheyas-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--spheyas-transition-fast);
}

.content-bar__link:hover,
.content-bar__link:focus {
    color: var(--content-accent);
}

/* Underline on the current section, drawn on a pseudo-element so it sits clear
   of the text baseline */
.content-bar__link.is-current {
    color: var(--content-accent);
}

.content-bar__link.is-current::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background-color: var(--content-accent);
}

.content-bar__back {
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
    text-decoration: none;
    transition: color var(--spheyas-transition-fast);
}

.content-bar__back:hover,
.content-bar__back:focus {
    color: var(--content-accent);
}

/* The back link is the first thing to go when the bar runs out of room; the
   logo already links to the same place */
@media (max-width: 575.98px) {
    .content-bar__logo img {
        width: 140px;
        height: 31px;
    }

    .content-bar__nav {
        gap: var(--spheyas-space-4);
    }

    .content-bar__back {
        display: none;
    }
}

/* ── Page head ──────────────────────────────────────────────────────────────
   The band that carries the title, tinted with the collection's accent. */

.content-head {
    padding: var(--spheyas-space-7) 0;
    border-bottom: 1px solid var(--spheyas-border);
    background-color: var(--content-accent-tint);
}

.content-head__inner {
    max-width: var(--spheyas-measure);
}

/* Flush variant: sits on the same ground as the region below it, so an index page
   reads as one continuous area rather than a title band stacked on a grid. */
.content-head--flush {
    padding-bottom: 0;
    border-bottom: 0;
    background-color: var(--spheyas-surface-sunken);
}

.content-title {
    margin-bottom: var(--spheyas-space-3);
    font-size: var(--spheyas-text-3xl);
}

.content-lead {
    margin-bottom: 0;
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-lg);
}

/* Back to the index, above the title of a single post or article */
.content-breadcrumb {
    display: inline-block;
    margin-bottom: var(--spheyas-space-3);
    color: var(--content-accent);
    font-size: var(--spheyas-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.content-breadcrumb:hover,
.content-breadcrumb:focus {
    color: var(--content-accent);
    text-decoration: underline;
}

.content-date {
    color: var(--spheyas-ink-faint);
    font-size: var(--spheyas-text-sm);
}

/* ── Body region ──────────────────────────────────────────────────────────────
   The whole reading area sits on a tinted ground, with white surfaces for the
   cards and the article itself. */

.content-main {
    padding: var(--spheyas-space-7) 0;
    background-color: var(--spheyas-surface-sunken);
}

/* ── Category list (blog index) ──────────────────────────────────────────────
   One pill per category above the grid. The current collection's "All posts"
   pill carries is-current, the same way the collection nav underlines the
   active section. */

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spheyas-space-2);
    margin-bottom: var(--spheyas-space-5);
}

.category-list__link {
    padding: var(--spheyas-space-1) var(--spheyas-space-3);
    border: 1px solid var(--spheyas-border);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: var(--spheyas-text-sm);
    transition: border-color var(--spheyas-transition-fast), color var(--spheyas-transition-fast);
}

.category-list__link:hover,
.category-list__link:focus-visible,
.category-list__link.is-current {
    border-color: var(--content-accent);
    color: var(--content-accent);
}

/* ── Search (help index) ──────────────────────────────────────────────────────
   One input above the grid, filtering client-side. The label is hidden from view
   but stays in the tree for screen readers; the placeholder carries the cue. */

.help-search {
    display: block;
    max-width: 52rem;
    margin-bottom: var(--spheyas-space-5);
}

.help-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.help-search__input {
    width: 100%;
    padding: var(--spheyas-space-3) 3.4rem var(--spheyas-space-3) var(--spheyas-space-4);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
    color: var(--spheyas-ink);
    font-size: var(--spheyas-text-base);
}

/* Clear (×) and go (→) inside the input: the clear appears only while there is
   text; the go is the mouse and touch equivalent of Enter. */
.help-search__clear,
.help-search__go {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--spheyas-ink-muted);
    cursor: pointer;
    line-height: 0;
    font-size: var(--spheyas-text-base);
    transform: translateY(-50%);
}

/* Without this, display: inline-flex above beats the UA [hidden] rule and the ×
   stays visible in an empty box */
.help-search__clear[hidden],
.help-search__go[hidden] {
    display: none;
}

/* The glyph pins itself to the button box and centers inside it, so the icon
   and its hover circle can never sit apart from each other */
.help-search__clear i,
.help-search__go i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The browser draws its own × for type="search" — with custom controls in the
   bar it only adds a third, mispositioned affordance. Suppress it. */
.help-search__input::-webkit-search-cancel-button,
.help-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.help-search__clear {
    right: 2.3rem;
}

.help-search__go {
    right: 0.45rem;
    color: var(--content-accent);
}

.help-search__clear:hover,
.help-search__clear:focus-visible,
.help-search__go:hover,
.help-search__go:focus-visible {
    background-color: var(--content-accent-tint);
    color: var(--content-accent);
}

.help-search__input:focus-visible {
    outline: 2px solid var(--content-accent);
    outline-offset: 2px;
}

.help-search__empty {
    margin-bottom: var(--spheyas-space-5);
    color: var(--spheyas-ink-muted);
}

/* The same input inside an article's left sidebar: full sidebar width, smaller
   padding, and the search submits to the help index with ?q= rather than
   filtering in place. */
.help-search--sidebar {
    max-width: none;
    margin-bottom: var(--spheyas-space-4);
}

.help-search--sidebar .help-search__input {
    padding: var(--spheyas-space-2) 3.2rem var(--spheyas-space-2) var(--spheyas-space-3);
    font-size: var(--spheyas-text-sm);
}

/* The in-place grid filter's hiding mechanism. A class rather than the hidden
   attribute: a future "show more" fold per category will own hidden, and the two
   states must never fight over one attribute. */
.is-filtered-out {
    display: none !important;
}

/* ── Search typeahead dropdown ────────────────────────────────────────────────
   Rendered by the shared help-search script under the input it belongs to:
   title and excerpt per match, hover tint, capped at six results. */

.help-search {
    position: relative;
}

.help-search__dropdown {
    position: absolute;
    top: calc(100% + var(--spheyas-space-1));
    right: 0;
    left: 0;
    z-index: 20;
    padding: var(--spheyas-space-2);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
    box-shadow: var(--spheyas-shadow-sm);
}

.help-search__result {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: var(--spheyas-space-2) var(--spheyas-space-3);
    border-radius: var(--spheyas-radius-sm);
    color: inherit;
    text-decoration: none;
}

.help-search__result:hover,
.help-search__result:focus-visible {
    background-color: var(--content-accent-tint);
    color: inherit;
}

.help-search__result-title {
    font-size: var(--spheyas-text-sm);
    font-weight: 600;
}

.help-search__result-description {
    font-size: var(--spheyas-text-xs);
    color: var(--spheyas-ink-muted);
}

/* ── Post grid (blog index) ─────────────────────────────────────────────────
   Three columns of image-led cards, which is the shape the reference blog uses:
   cover, category, title, byline, excerpt. The whole card is the link. */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--spheyas-space-5);
}

.post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
    color: inherit;
    overflow: hidden;
    text-decoration: none;
    transition: transform var(--spheyas-transition), box-shadow var(--spheyas-transition), border-color var(--spheyas-transition);
}

.post-card:hover,
.post-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--content-accent);
    box-shadow: var(--spheyas-shadow);
    color: inherit;
}

/* 16:9 keeps every cover the same height whatever the source image is, and the
   ratio is declared rather than cropped so no row goes ragged while images load */
.post-card__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background-color: var(--content-accent-tint);
}

/* Standing in for a missing cover: the mark on the collection's own tint, which
   reads as deliberate where a stretched stock photo would not */
.post-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, var(--content-accent-tint), var(--spheyas-surface));
}

.post-card__cover--placeholder img {
    width: 3.5rem;
    height: 3.5rem;
    opacity: 0.6;
}

.post-card__body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding: var(--spheyas-space-5);
}

.post-card__category {
    margin-bottom: var(--spheyas-space-2);
    color: var(--content-accent);
    font-size: var(--spheyas-text-sm);
    font-weight: 600;
}

.post-card__title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-xl);
}

.post-card__excerpt {
    margin-bottom: 0;
    color: var(--spheyas-ink-muted);
}

/* ── Byline ─────────────────────────────────────────────────────────────────
   Author and date on one line, accented, as on the reference. The author half is
   dropped when a post carries no 'author' front matter. */

.byline {
    /* Block, because it is a <span> — an inline element ignores the margin, which
       left the byline sitting flush against the first paragraph */
    display: block;
    margin-bottom: var(--spheyas-space-3);
    color: var(--content-accent);
    font-size: var(--spheyas-text-sm);
}

/* On a post, the byline is the last thing before the body and wants more air */
.article > .byline {
    margin-bottom: var(--spheyas-space-5);
}

.byline__separator {
    color: var(--spheyas-ink-faint);
}

/* The author half is a link on the post page (to the author page) and plain text
   on the cards, where the whole card is already the link. It keeps the byline's
   accent colour rather than the default link blue, and underlines on hover only. */
.byline__link {
    color: inherit;
    text-decoration: none;
}

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

/* ── Article surface ────────────────────────────────────────────────────────
   One white card carrying the whole post, floated on the tinted ground. */

.article {
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius-lg);
    background-color: var(--spheyas-surface);
    box-shadow: var(--spheyas-shadow-sm);
}

.article__category {
    display: inline-block;
    margin-bottom: var(--spheyas-space-2);
    padding: var(--spheyas-space-1) var(--spheyas-space-3);
    border-radius: 999px;
    background-color: var(--content-accent-tint);
    color: var(--content-accent);
    font-size: var(--spheyas-text-sm);
    font-weight: 600;
    /* On the blog this is a link to the category page; Bootstrap underlines raw
       links, and the help centre renders the same class as a plain label, so the
       decoration is owned here instead of left to the element default */
    text-decoration: none;
}

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

.article__title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-3xl);
}

.article__updated {
    margin-bottom: var(--spheyas-space-5);
    color: var(--spheyas-ink-faint);
    font-size: var(--spheyas-text-sm);
}

.article__lead {
    margin-bottom: var(--spheyas-space-5);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-lg);
}

.article__cover {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--spheyas-space-6);
    border-radius: var(--spheyas-radius);
}

/* ── Post navigation ────────────────────────────────────────────────────────
   Older and newer post, either side, below the article. */

.post-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--spheyas-space-4);
    max-width: 52rem;
    margin: var(--spheyas-space-6) auto 0;
}

.post-nav__link {
    display: block;
    padding: var(--spheyas-space-4);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--spheyas-transition-fast), box-shadow var(--spheyas-transition-fast);
}

.post-nav__link:hover,
.post-nav__link:focus-visible {
    border-color: var(--content-accent);
    box-shadow: var(--spheyas-shadow-sm);
    color: inherit;
}

.post-nav__link--next {
    text-align: right;
}

.post-nav__direction {
    display: block;
    margin-bottom: var(--spheyas-space-1);
    color: var(--spheyas-ink-faint);
    font-size: var(--spheyas-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.post-nav__title {
    color: var(--content-accent);
    font-weight: 600;
}

/* ── Category grid (help index) ─────────────────────────────────────────────
   One card per category, each listing its articles. A grid rather than a single
   column: a knowledge base is browsed by scanning for the right area, and stacked
   full-width lists make that a scroll instead of a glance. */

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--spheyas-space-5);
    align-items: start;
}

.category-card {
    padding: var(--spheyas-space-5);
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
}

.category-card__name {
    margin-bottom: var(--spheyas-space-4);
    padding-bottom: var(--spheyas-space-3);
    border-bottom: 1px solid var(--spheyas-border);
    color: var(--spheyas-ink-faint);
    font-size: var(--spheyas-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.article-list li + li {
    margin-top: var(--spheyas-space-4);
}

.article-list a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.article-list a:hover .article-list__title,
.article-list a:focus-visible .article-list__title {
    color: var(--content-accent);
    text-decoration: underline;
}

.article-list__title {
    display: block;
    font-weight: 600;
    transition: color var(--spheyas-transition-fast);
}

.article-list__description {
    display: block;
    margin-top: var(--spheyas-space-1);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

/* ── Prose ──────────────────────────────────────────────────────────────────
   Article bodies are generated from markdown, so the styling is element-level:
   there are no classes to hang utilities off. Carried over from content.css. */

.content-body {
    /* Long-form prose wants a shorter measure than a full column */
    max-width: var(--spheyas-measure);
    line-height: var(--spheyas-leading-prose);
}

.content-body > * + * {
    margin-top: 1.15em;
}

.content-body h2,
.content-body h3,
.content-body h4 {
    margin-top: 2em;
}

/* Accented headings: the reference sets its section headings in the brand colour,
   and on a long article they give a scannable structure that bold-dark does not */
.content-body h2,
.content-body h3 {
    color: var(--content-accent);
}

.content-body h2 {
    font-size: var(--spheyas-text-2xl);
}

.content-body h3 {
    font-size: var(--spheyas-text-xl);
}

.content-body h4 {
    font-size: var(--spheyas-text-lg);
}

.content-body ul,
.content-body ol {
    padding-left: 1.35em;
    list-style: revert;
}

.content-body li + li {
    margin-top: 0.35em;
}

.content-body blockquote {
    padding-left: 1em;
    border-left: 3px solid var(--content-accent);
    color: var(--spheyas-ink-muted);
    font-style: italic;
}

/* ── Callouts (info boxes) ────────────────────────────────────────────────────
   A blockquote whose first line is a marker renders as one of these instead:
   icon, tinted background, strong left rule. One colour per variant, so a
   warning never looks like a tip. */

.callout {
    display: flex;
    gap: var(--spheyas-space-3);
    padding: var(--spheyas-space-4);
    border-radius: var(--spheyas-radius);
}

.callout__icon {
    color: var(--callout-color);
    font-size: var(--spheyas-text-lg);
    line-height: 1.4;
}

.callout__body {
    flex: 1;
    min-width: 0;
}

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

.callout__body > :last-child {
    margin-bottom: 0;
}

.callout--note {
    --callout-color: var(--spheyas-blue-dark);
    border: 1px solid color-mix(in srgb, var(--spheyas-blue-dark) 25%, white);
    border-left: 4px solid var(--spheyas-blue-dark);
    background-color: var(--spheyas-blue-tint);
}

.callout--tip {
    --callout-color: var(--spheyas-green);
    border: 1px solid color-mix(in srgb, var(--spheyas-green) 25%, white);
    border-left: 4px solid var(--spheyas-green);
    background-color: color-mix(in srgb, var(--spheyas-green) 8%, white);
}

.callout--warning {
    --callout-color: var(--spheyas-amber);
    border: 1px solid color-mix(in srgb, var(--spheyas-amber) 30%, white);
    border-left: 4px solid var(--spheyas-amber);
    background-color: color-mix(in srgb, var(--spheyas-amber) 9%, white);
}

.callout--important {
    --callout-color: var(--spheyas-red);
    border: 1px solid color-mix(in srgb, var(--spheyas-red) 25%, white);
    border-left: 4px solid var(--spheyas-red);
    background-color: color-mix(in srgb, var(--spheyas-red) 7%, white);
}

.content-body code {
    padding: 0.15em 0.35em;
    border-radius: var(--spheyas-radius-sm);
    background: var(--spheyas-surface-sunken);
    font-size: 0.9em;
}

.content-body pre {
    padding: 1em;
    border-radius: var(--spheyas-radius);
    background: var(--spheyas-surface-sunken);
    overflow-x: auto;
}

.content-body pre code {
    padding: 0;
    background: none;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--spheyas-radius);
}

/* Screen recordings in help articles: a markdown image whose URL ends in .mp4 or
   .webm renders as a video (ContentService builds the tag), and gets the same
   framing as a screenshot. */
.content-body video {
    max-width: 100%;
    height: auto;
    border-radius: var(--spheyas-radius);
}

/* ── FAQ (blog posts) ─────────────────────────────────────────────────────────
   Collapsed questions in <details> so the section reads as one short list; the
   answers open in place. Sits inside the article card at the prose measure, so
   the questions line up with the article text. */

.content-faq {
    max-width: var(--spheyas-measure);
    margin-top: var(--spheyas-space-7);
    padding-top: var(--spheyas-space-6);
    border-top: 1px solid var(--spheyas-border);
}

.content-faq__title {
    margin-bottom: var(--spheyas-space-4);
    font-size: var(--spheyas-text-xl);
}

.content-faq__item {
    border: 1px solid var(--spheyas-border);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface-sunken);
}

.content-faq__item + .content-faq__item {
    margin-top: var(--spheyas-space-3);
}

.content-faq__item summary {
    /* Grid rather than flex so a question that wraps keeps the chevron on the
       first line, aligned with the start of the text */
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spheyas-space-3);
    align-items: start;
    padding: var(--spheyas-space-4);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

/* The default marker is hidden above, so the affordance has to be drawn: without
   it these read as inert grey boxes and nobody discovers the answers. Rotates on
   open, and the transition sits behind prefers-reduced-motion via site.css. */
.content-faq__item summary::after {
    content: '';
    width: 0.55em;
    height: 0.55em;
    margin-top: 0.35em;
    border-right: 2px solid var(--content-accent);
    border-bottom: 2px solid var(--content-accent);
    transform: rotate(45deg);
    transition: transform var(--spheyas-transition);
}

.content-faq__item[open] summary::after {
    transform: rotate(-135deg);
}

.content-faq__item summary::-webkit-details-marker {
    display: none;
}

.content-faq__item summary:focus-visible {
    outline: 2px solid var(--content-accent);
    outline-offset: 2px;
}

.content-faq__answer {
    margin: 0;
    padding: 0 var(--spheyas-space-4) var(--spheyas-space-4);
    color: var(--spheyas-ink-muted);
}

/* ── Help article layout (left index, right related) ──────────────────────────
   Three columns: the article's own sections on the left, the article in the
   middle, the category's other articles on the right — index and related each
   get a side rather than stacking. Both sidebars are sticky; the related column
   steps aside below xl and the index below lg, so phones read full-width. */

.help-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 15rem;
    gap: var(--spheyas-space-6);
    align-items: start;
}

/* No related articles to show: collapse to two columns so no ghost gutter is left */
.help-layout--no-related {
    grid-template-columns: 15rem minmax(0, 1fr);
}

.help-sidebar {
    position: sticky;
    top: var(--spheyas-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--spheyas-space-4);
}

.help-sidebar__block {
    padding: var(--spheyas-space-4);
    border: 1px solid var(--spheyas-border);
    border-top: 3px solid var(--content-accent);
    border-radius: var(--spheyas-radius);
    background-color: var(--spheyas-surface);
}

.help-sidebar__title {
    margin-bottom: var(--spheyas-space-2);
    color: var(--spheyas-ink-faint);
    font-size: var(--spheyas-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-sidebar__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-sidebar__list li + li {
    margin-top: var(--spheyas-space-2);
}

.help-sidebar__list a {
    color: var(--content-accent);
    text-decoration: none;
    font-size: var(--spheyas-text-sm);
}

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

@media (max-width: 1199.98px) {
    .help-layout,
    .help-layout--no-related {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .help-sidebar--related {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .help-sidebar {
        display: none;
    }

    .help-layout,
    .help-layout--no-related {
        grid-template-columns: 1fr;
    }
}

/* Markdown tables carry no classes, so Bootstrap's .table styles never apply */
.content-body table {
    display: block;
    width: 100%;
    margin-top: 1.15em;
    border-collapse: collapse;
    overflow-x: auto;
}

.content-body th,
.content-body td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--spheyas-border);
    text-align: left;
}

.content-body th {
    font-weight: 700;
}

/* ── Call to action ──────────────────────────────────────────────────────────
   Closes the article, inside its card and above a rule rather than in a tinted box
   of its own — the reference does the same, and it reads as the end of the piece
   instead of an advertisement bolted underneath. */

.content-cta {
    margin-top: var(--spheyas-space-7);
    padding-top: var(--spheyas-space-6);
    border-top: 1px solid var(--spheyas-border);
    text-align: center;
}

.content-cta__mark {
    width: 150px;
    height: 33px;
    margin-bottom: var(--spheyas-space-4);
}

.content-cta__title {
    margin-bottom: var(--spheyas-space-2);
    font-size: var(--spheyas-text-lg);
}

.content-cta__description {
    margin-bottom: var(--spheyas-space-4);
    color: var(--spheyas-ink-muted);
}

.content-cta .btn {
    min-width: 16rem;
    background-color: var(--content-accent);
    border-color: var(--content-accent);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.content-footer {
    flex-shrink: 0;
    padding: var(--spheyas-space-6) 0;
    border-top: 1px solid var(--spheyas-border);
    background-color: var(--spheyas-surface-sunken);
    color: var(--spheyas-ink-muted);
    font-size: var(--spheyas-text-sm);
}

.content-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spheyas-space-3) var(--spheyas-space-5);
}

.content-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spheyas-space-2) var(--spheyas-space-5);
}

.content-footer a {
    color: var(--spheyas-ink-muted);
    text-decoration: none;
    transition: color var(--spheyas-transition-fast);
}

.content-footer a:hover,
.content-footer a:focus {
    color: var(--content-accent);
    text-decoration: underline;
}