/* =========================================================================
   Paysavo Help Center — premium public presentation layer.

   ONE SHEET, FOUR PAGES. The hub, category, article and search views all
   read from this file. Before this pass each of those Blade templates
   carried its own inline <style> block, which is how three slightly
   different definitions of the same card and two different search forms
   ended up in production.

   SCOPE DISCIPLINE. Every selector is namespaced `pvh-`. This sheet
   defines no element selectors outside `.pvh-prose` (which is scoped to
   the article body it styles) and redefines no --pvs-* or --pv-* token.
   It is loaded only by the four Help Center views, and removing the link
   tag returns those pages to unstyled-but-functional — nothing else on
   the site can be affected by anything in here.

   COLOUR. Built entirely from the existing --pvs-* tokens
   (resources/views/frontend/seo/_tokens.blade.php), so the Help Center
   inherits Paysavo's lime/forest brand and its light/dark switching for
   free, and cannot drift from the header and footer it sits between.
   Local --pvh-* variables below are layout constants only, never colour.
   ========================================================================= */

.pvh {
    --pvh-rail: 264px;
    --pvh-shell: 1180px;
    --pvh-read: 74ch;

    background: var(--pvs-surface);
    color: var(--pvs-ink);
}

.pvh-wrap {
    width: min(var(--pvh-shell), 100% - clamp(20px, 5vw, 64px));
    margin-inline: auto;
}

/* ------------------------------------------------------ visually hidden */

/* The four Help Center views used `class="sr-only"` on their search
   labels. That class is defined NOWHERE in this codebase — Bootstrap 5
   (the version this site loads) renamed it `.visually-hidden`, and no
   other sheet supplies it. The labels were therefore rendering as visible
   stray text above the search field on the live Help Center.

   Defined locally rather than switched to `.visually-hidden` so the Help
   Center does not silently depend on which Bootstrap major version the
   layout happens to load. The declaration is the standard clip-rect
   idiom: removed from the visual layout, still read by assistive tech. */
.pvh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ hero */

/* The atmospheric layer. Two very wide, very low-opacity radial washes in
   the brand lime over the page's own surface gradient — enough to stop the
   hero reading as a flat white slab, restrained enough that body copy over
   it still clears AA. Deliberately not decorative blobs: no hard edges, no
   shapes, nothing that needs to be positioned against content. */
.pvh-hero {
    position: relative;
    overflow: hidden;
    background: var(--pvs-grad-hero);
    border-bottom: 1px solid var(--pvs-line);
    padding: clamp(48px, 7vw, 92px) 0 clamp(36px, 5vw, 64px);
}

.pvh-hero::before {
    content: '';
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 150%;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 22% 18%, var(--pvs-accent-tint), transparent 70%),
        radial-gradient(46% 38% at 82% 4%, var(--pvs-accent-tint), transparent 72%);
}

.pvh-hero > * { position: relative; }

.pvh-hero__inner {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.pvh-hero__title {
    font-size: clamp(34px, 5.2vw, 60px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    color: var(--pvs-ink);
}

.pvh-hero__lede {
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.55;
    color: var(--pvs-ink-soft);
    margin: 0 auto;
    max-width: 46ch;
}

/* ---------------------------------------------------------------- search */

.pvh-search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: clamp(24px, 3.2vw, 36px) auto 0;
    max-width: 620px;
    padding: 7px 7px 7px 18px;
    background: var(--pvs-surface);
    border: 1px solid var(--pvs-line-strong);
    border-radius: 999px;
    box-shadow: var(--pvs-shadow-md);
    transition: border-color 160ms var(--pvs-ease), box-shadow 160ms var(--pvs-ease);
}

/* :focus-within, not :focus — the visible ring belongs to the whole pill,
   which is what reads as the control, while the real focus target stays
   the <input> for assistive technology and for the caret. */
.pvh-search:focus-within {
    border-color: var(--pvs-accent);
    box-shadow: var(--pvs-shadow-lg), 0 0 0 4px var(--pvs-accent-tint);
}

.pvh-search__icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--pvs-ink-muted);
}

.pvh-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--pvs-ink);
    font-size: 16px; /* < 16px makes mobile Safari zoom the viewport on focus. */
    line-height: 1.4;
    padding: 12px 0;
}

.pvh-search__input::placeholder { color: var(--pvs-ink-muted); }

/* The pill already draws a focus ring via :focus-within; a second ring on
   the input inside it reads as two overlapping controls. */
.pvh-search__input:focus { outline: none; }

.pvh-search__submit {
    flex: none;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    background: var(--pvs-accent);
    color: #08210a; /* 9.2:1 on the brand lime — the token file's own pairing. */
    transition: transform 160ms var(--pvs-ease), box-shadow 160ms var(--pvs-ease);
}

.pvh-search__submit:hover { transform: translateY(-1px); box-shadow: var(--pvs-shadow-md); }
.pvh-search__submit:focus-visible { outline: 2px solid var(--pvs-accent-deep); outline-offset: 3px; }

/* Compact variant for the category and search-results pages, where the
   field is a utility rather than the page's primary object. */
.pvh-search--inline {
    margin: 0;
    max-width: 560px;
    box-shadow: var(--pvs-shadow-sm);
}

/* ------------------------------------------------------- popular topics */

.pvh-popular {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: clamp(20px, 2.6vw, 28px) auto 0;
    max-width: 780px;
    padding: 0;
    list-style: none;
}

.pvh-popular__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--pvs-line-strong);
    background: var(--pvs-surface);
    color: var(--pvs-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    min-height: 44px; /* WCAG 2.5.5 touch target. */
    transition: border-color 160ms var(--pvs-ease), background 160ms var(--pvs-ease);
}

.pvh-popular__link:hover,
.pvh-popular__link:focus-visible {
    border-color: var(--pvs-accent);
    background: var(--pvs-accent-tint);
    color: var(--pvs-ink);
}

.pvh-popular__link:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }
.pvh-popular__link i { font-size: 16px; color: var(--pvs-accent-text); }

/* -------------------------------------------------------- section chrome */

.pvh-section { padding: clamp(44px, 5.5vw, 76px) 0; }
.pvh-section--tight { padding: clamp(28px, 3.5vw, 44px) 0; }

/* Used on the section that directly follows the inline search field
   (category page, results page). The full section rhythm leaves a visible
   hole under a left-aligned, half-width field — the eye reads it as
   missing content rather than as breathing room. */
.pvh-section--after-search { padding-top: clamp(22px, 2.6vw, 34px); }

.pvh-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.pvh-section__title {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.2;
    margin: 0;
    color: var(--pvs-ink);
}

.pvh-section__note { font-size: 14px; color: var(--pvs-ink-muted); margin: 0; }

/* -------------------------------------------------------- category grid */

.pvh-grid {
    display: grid;
    gap: clamp(14px, 1.8vw, 20px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cards are equal height by grid row, not by a fixed min-height: a fixed
   height either clips the longest description or pads every other card to
   match it, and neither survives a corpus that keeps growing. */
.pvh-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: clamp(18px, 2.2vw, 24px);
    border: 1px solid var(--pvs-line);
    border-radius: var(--pvs-radius);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    text-decoration: none;
    box-shadow: var(--pvs-shadow-sm);
    transition: transform 180ms var(--pvs-ease), border-color 180ms var(--pvs-ease), box-shadow 180ms var(--pvs-ease);
}

.pvh-card:hover,
.pvh-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--pvs-accent);
    box-shadow: var(--pvs-shadow-md);
    color: var(--pvs-ink);
}

.pvh-card:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 3px; }
.pvh-card:active { transform: translateY(-1px); }

.pvh-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    background: var(--pvs-accent-tint);
    color: var(--pvs-accent-text);
    font-size: 22px;
    line-height: 1;
}

.pvh-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--pvs-ink);
}

.pvh-card__desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--pvs-ink-soft);
    margin: 0;
}

/* margin-top:auto pins the footer row to the bottom of every card
   regardless of how long the description above it runs. */
.pvh-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pvs-ink-muted);
}

.pvh-card__chevron { font-size: 18px; color: var(--pvs-accent-text); transition: transform 180ms var(--pvs-ease); }
.pvh-card:hover .pvh-card__chevron { transform: translateX(3px); }

/* --------------------------------------------------------- article rows */

.pvh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.pvh-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--pvs-line);
    border-radius: var(--pvs-radius-sm);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    text-decoration: none;
    transition: border-color 160ms var(--pvs-ease), background 160ms var(--pvs-ease);
}

.pvh-row:hover,
.pvh-row:focus-visible { border-color: var(--pvs-accent); background: var(--pvs-accent-tint); color: var(--pvs-ink); }
.pvh-row:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }

.pvh-row__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pvh-row__title { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; color: var(--pvs-ink); overflow-wrap: anywhere; }
.pvh-row__summary { font-size: 14px; line-height: 1.55; color: var(--pvs-ink-soft); margin: 0; }
.pvh-row__meta { font-size: 12.5px; color: var(--pvs-ink-muted); margin: 0; }

.pvh-row__go {
    flex: none;
    margin-left: auto;
    align-self: center;
    font-size: 20px;
    color: var(--pvs-ink-muted);
    transition: transform 160ms var(--pvs-ease), color 160ms var(--pvs-ease);
}

.pvh-row:hover .pvh-row__go { transform: translateX(3px); color: var(--pvs-accent-text); }

/* -------------------------------------------------------- page headings */

.pvh-pagehead {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 2vw, 20px);
    padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 2.6vw, 28px);
}

.pvh-pagehead__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 18px;
    background: var(--pvs-accent-tint);
    color: var(--pvs-accent-text);
    font-size: 27px;
    line-height: 1;
}

.pvh-pagehead__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0 0 8px;
    color: var(--pvs-ink);
}

.pvh-pagehead__lede { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; color: var(--pvs-ink-soft); margin: 0; max-width: 62ch; }
.pvh-pagehead__count { font-size: 13px; font-weight: 600; color: var(--pvs-ink-muted); margin: 10px 0 0; }

/* ------------------------------------------------------------- article */

.pvh-article { padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 72px); }

/* Two columns only where a rail genuinely fits. Below 1100px the rail
   would squeeze the reading column under its comfortable measure, so the
   layout collapses to one column and the contents list moves inline
   above the body. */
.pvh-article__layout { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) var(--pvh-rail); align-items: start; }
.pvh-article__layout > * { min-width: 0; }

/* No contents list and no related articles — nothing for a rail to hold. */
.pvh-article__layout--full { grid-template-columns: minmax(0, 1fr); }

.pvh-article__head { margin: 0 0 clamp(20px, 2.6vw, 30px); }

.pvh-article__title {
    overflow-wrap: anywhere;
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.14;
    margin: 0 0 14px;
    color: var(--pvs-ink);
}

.pvh-article__summary {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--pvs-ink-soft);
    margin: 0 0 16px;
    max-width: var(--pvh-read);
}

.pvh-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: 13px;
    color: var(--pvs-ink-muted);
    padding-bottom: clamp(18px, 2.4vw, 26px);
    border-bottom: 1px solid var(--pvs-line);
    margin: 0;
}

.pvh-article__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------- article prose */

/* The ONLY place this sheet styles bare elements, and it is scoped to the
   rendered article body. SimpleMarkdownRenderer emits exactly h2/h3/h4, p,
   ul and li — nothing here assumes any other tag, and no rule here relaxes
   that renderer's escaping. */
/* `overflow-wrap: anywhere` is load-bearing, not cosmetic. Help content
   legitimately carries long unbreakable tokens — payment references, crypto
   wallet addresses, support URLs, error identifiers — and a single one of
   them pushed the whole document wider than the viewport at 375/390/430px,
   which is the horizontal-scroll failure the responsive pass must not ship.
   `min-width: 0` is its partner: without it the prose column refuses to
   shrink below its widest word inside the grid, and the wrap never applies. */
.pvh-prose { max-width: var(--pvh-read); min-width: 0; color: var(--pvs-ink-soft); font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }

.pvh-prose > *:first-child { margin-top: 0; }

.pvh-prose h2 {
    font-size: clamp(21px, 2.3vw, 26px);
    font-weight: 800;
    letter-spacing: -.012em;
    line-height: 1.25;
    color: var(--pvs-ink);
    margin: 2.1em 0 .55em;
    padding-top: .25em;
}

.pvh-prose h3 { font-size: clamp(18px, 1.9vw, 20px); font-weight: 700; line-height: 1.3; color: var(--pvs-ink); margin: 1.7em 0 .5em; }
.pvh-prose h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--pvs-ink); margin: 1.5em 0 .45em; }

/* scroll-margin-top keeps a heading clear of the sticky site header when
   it is reached from a contents-rail link rather than by scrolling. */
.pvh-prose h2, .pvh-prose h3, .pvh-prose h4 { scroll-margin-top: calc(var(--pvs-sticky-top, 96px) + 12px); }

.pvh-prose p { margin: 0 0 1.15em; }

/* Emphasis reads as emphasis: bold copy takes the full ink colour against
   the softer body tone, which is what makes it register as a lift rather
   than just a heavier weight. */
.pvh-prose strong { font-weight: 700; color: var(--pvs-ink); }

/* Inline code: a tinted chip, not a second font size. `overflow-wrap`
   because identifiers in this corpus (deposit_disabled, provider_sync_failed)
   are long enough to overflow the reading column on a narrow screen. */
.pvh-prose code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .9em;
    padding: .12em .4em;
    border-radius: 6px;
    background: var(--pvs-accent-tint);
    color: var(--pvs-accent-text);
    overflow-wrap: anywhere;
}

/* Links inside body copy must be distinguishable from surrounding text by
   more than colour alone (WCAG 1.4.1), hence the underline. */
.pvh-prose a { color: var(--pvs-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.pvh-prose a:hover, .pvh-prose a:focus-visible { text-decoration-thickness: 2px; }

.pvh-prose ul { margin: 0 0 1.25em; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .6em; }

.pvh-prose li { position: relative; padding-left: 1.6em; }

.pvh-prose li::before {
    content: '';
    position: absolute;
    left: .25em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pvs-accent-deep);
}

/* --------------------------------------------------------------- rails */

.pvh-rail { position: sticky; top: var(--pvs-sticky-top, 96px); display: flex; flex-direction: column; gap: 22px; }

.pvh-rail__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pvs-ink-muted);
    margin: 0 0 12px;
}

.pvh-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--pvs-line); }

.pvh-toc__link {
    display: block;
    padding: 7px 0 7px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pvs-ink-soft);
    text-decoration: none;
    transition: color 140ms var(--pvs-ease), border-color 140ms var(--pvs-ease);
}

.pvh-toc__link:hover,
.pvh-toc__link:focus-visible { color: var(--pvs-accent-text); border-left-color: var(--pvs-accent); }
.pvh-toc__link:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }
.pvh-toc__item--h3 .pvh-toc__link { padding-left: 26px; font-size: 13.5px; }

.pvh-rail__card { padding: 18px; border: 1px solid var(--pvs-line); border-radius: var(--pvs-radius-sm); background: var(--pvs-surface-raised); }
.pvh-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pvh-rail__list a { font-size: 14px; line-height: 1.45; color: var(--pvs-ink); text-decoration: none; border-bottom: 1px solid transparent; }
.pvh-rail__list a:hover, .pvh-rail__list a:focus-visible { color: var(--pvs-accent-text); border-bottom-color: var(--pvs-accent); }

/* ----------------------------------------------------------------- CTAs */

.pvh-cta {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 32px);
    flex-wrap: wrap;
    padding: clamp(24px, 3.2vw, 38px);
    border-radius: var(--pvs-radius-lg);
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
}

/* The single deep-surface CTA on the page. Used once, for the primary
   escalation block — a second one competes with it rather than adding
   emphasis. */
.pvh-cta--deep { background: var(--pvs-grad-deep); border-color: rgba(168, 196, 166, .18); }
.pvh-cta--deep .pvh-cta__title { color: var(--pvs-on-deep); }
.pvh-cta--deep .pvh-cta__text { color: var(--pvs-on-deep-soft); }

.pvh-cta__body { flex: 1 1 320px; min-width: 0; }
.pvh-cta__title { font-size: clamp(19px, 2.1vw, 24px); font-weight: 800; line-height: 1.25; margin: 0 0 6px; color: var(--pvs-ink); }
.pvh-cta__text { font-size: 15px; line-height: 1.55; color: var(--pvs-ink-soft); margin: 0; max-width: 54ch; }
.pvh-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

.pvh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms var(--pvs-ease), box-shadow 160ms var(--pvs-ease);
}

.pvh-btn:hover { transform: translateY(-2px); box-shadow: var(--pvs-shadow-md); }
.pvh-btn:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 3px; }
.pvh-btn--primary { background: var(--pvs-accent); color: #08210a; }
.pvh-btn--ghost { background: transparent; color: var(--pvs-ink); border-color: var(--pvs-line-strong); }
.pvh-cta--deep .pvh-btn--ghost { color: var(--pvs-on-deep); border-color: rgba(168, 196, 166, .38); }

/* -------------------------------------------------------- empty states */

.pvh-empty {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) 20px;
}

.pvh-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: var(--pvs-accent-tint);
    color: var(--pvs-accent-text);
    font-size: 28px;
    margin-bottom: 18px;
}

.pvh-empty__title { font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; line-height: 1.25; margin: 0 0 8px; color: var(--pvs-ink); }
.pvh-empty__text { font-size: 15px; line-height: 1.6; color: var(--pvs-ink-soft); margin: 0 0 22px; }
.pvh-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --------------------------------------------------------- back links */

.pvh-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pvs-ink-soft);
    text-decoration: none;
    min-height: 44px;
}

.pvh-back:hover, .pvh-back:focus-visible { color: var(--pvs-accent-text); }

/* -------------------------------------------------- inline contents list */

/* The narrow-viewport counterpart to .pvh-rail, which is display:none
   below 1100px. <details> is used deliberately: it collapses and expands
   with no JavaScript at all, so the contents list still works if the
   reveal script never loads, and it carries the right semantics for
   assistive technology without any ARIA of its own. */
.pvh-toc-inline {
    display: none;
    margin: 0 0 clamp(22px, 3vw, 32px);
    padding: 14px 18px;
    border: 1px solid var(--pvs-line);
    border-radius: var(--pvs-radius-sm);
    background: var(--pvs-surface-raised);
}

.pvh-toc-inline > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--pvs-ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
}

.pvh-toc-inline > summary::-webkit-details-marker { display: none; }

.pvh-toc-inline > summary::after {
    content: '';
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 2px solid var(--pvs-ink-muted);
    border-bottom: 2px solid var(--pvs-ink-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 160ms var(--pvs-ease);
}

.pvh-toc-inline[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pvh-toc-inline > summary:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 3px; border-radius: 6px; }
.pvh-toc-inline .pvh-toc { margin-top: 12px; }

/* ------------------------------------------------------ article footer */

.pvh-article__foot { margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(18px, 2.4vw, 24px); border-top: 1px solid var(--pvs-line); }

/* The related list exists twice in the document: once in the sticky rail
   (wide viewports) and once as full-width rows (narrow ones). Exactly one
   is displayed at any width, so the reader never sees it twice — and the
   rows carry summaries the narrow rail could not fit. */
.pvh-related-rows { display: none; }

/* ------------------------------------------------------- pagination */

/* The results page uses Laravel's own paginator markup, which is Bootstrap
   flavoured on this codebase. Only spacing and alignment are set here;
   the component's own styling is left alone. */
.pvh-pagination { margin-top: clamp(22px, 3vw, 32px); }
.pvh-pagination .pagination { flex-wrap: wrap; gap: 4px; margin: 0; }

/* Laravel's paginator emits Bootstrap markup, and this site's Bootstrap
   build paints .page-link with its default BLUE — which lands a bright
   #0d6efd control in the middle of a lime/forest page. Restyled onto the
   --pvs-* tokens so the pagination reads as part of the Help Center
   rather than as framework chrome that escaped. Only colour, border and
   radius are set; the component's structure and behaviour are untouched. */
.pvh-pagination .page-link {
    border-radius: 10px;
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    font-weight: 600;
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.pvh-pagination .page-link:hover,
.pvh-pagination .page-link:focus-visible {
    border-color: var(--pvs-accent);
    background: var(--pvs-accent-tint);
    color: var(--pvs-accent-text);
}

.pvh-pagination .page-link:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }

.pvh-pagination .page-item.active .page-link {
    background: var(--pvs-accent);
    border-color: var(--pvs-accent);
    color: #08210a; /* the token file's own AA-safe pairing with the lime */
}

.pvh-pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--pvs-ink-muted);
    border-color: var(--pvs-line);
    opacity: .6;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1099.98px) {
    /* Rail dropped before the reading column is squeezed. Its two jobs are
       handed to the inline <details> contents list above the body and to
       the full-width related rows below it, both of which are in the
       markup already and hidden at wider widths. */
    .pvh-article__layout { grid-template-columns: minmax(0, 1fr); }
    .pvh-rail { display: none; }
    .pvh-toc-inline { display: block; }
    .pvh-related-rows { display: block; }
}

@media (max-width: 991.98px) {
    .pvh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .pvh-grid { grid-template-columns: minmax(0, 1fr); }

    /* The pill collapses to a stacked field + full-width button. Keeping
       them on one row at 375px leaves the input around 120px wide, which
       is unusable for the queries this field is for. */
    .pvh-search {
        flex-wrap: wrap;
        border-radius: var(--pvs-radius);
        padding: 12px;
        gap: 10px;
    }

    .pvh-search__icon { display: none; }
    .pvh-search__input { flex: 1 1 100%; padding: 12px 14px; border: 1px solid var(--pvs-line); border-radius: var(--pvs-radius-sm); background: var(--pvs-surface); }
    .pvh-search__submit { flex: 1 1 100%; padding: 13px 20px; }

    .pvh-cta { flex-direction: column; align-items: flex-start; }
    .pvh-cta__actions { width: 100%; }
    .pvh-btn { flex: 1 1 auto; }

    .pvh-pagehead { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .pvh-card,
    .pvh-card__chevron,
    .pvh-row__go,
    .pvh-btn,
    .pvh-search,
    .pvh-search__submit,
    .pvh-toc-inline > summary::after {
        transition: none !important;
    }

    .pvh-card:hover,
    .pvh-card:active,
    .pvh-btn:hover,
    .pvh-search__submit:hover { transform: none !important; }

    .pvh-card:hover .pvh-card__chevron,
    .pvh-row:hover .pvh-row__go { transform: none !important; }
}

/* Windows high-contrast: the hover/focus affordance on cards and rows is
   carried entirely by colour, which forced-colors flattens. */
@media (forced-colors: active) {
    .pvh-card, .pvh-row, .pvh-popular__link { border: 1px solid CanvasText; }
    .pvh-card:focus-visible, .pvh-row:focus-visible, .pvh-popular__link:focus-visible { outline: 2px solid Highlight; }
}