/* ============================================================
   US PREPPERS — UX ENHANCEMENTS (ux.css)
   Loaded AFTER css/hero.min.css in default.hbs so these rules
   win by source order. Directly linked (no gulp build needed).

   Covers:
     1. Nav touch targets (WCAG 44x44) + mobile horizontal-overflow
     2. Reading progress bar
     3. Table of contents
     4. Breadcrumbs
     5. Comments empty-block guard
     6. Contact form
     7. Newsletter validation feedback
     8. Accessibility: focus-visible, ARIA helpers
   ============================================================ */

/* ------------------------------------------------------------
   0. DARK MODE GLOBALS
   ------------------------------------------------------------ */
/* Specificity (0,1,1) beats the :root { --ghost-accent-color } block that
   Ghost injects into <head> AFTER these sheets (0,1,0), so article inline
   links keep dark-mode copper #D4844F (5.89:1) instead of falling back to
   light copper #B86B3C (4.25:1, fails AA). color-scheme also gives native
   form controls / scrollbars a dark UA palette. */
html[data-theme="dark"] {
    color-scheme: dark;
    --ghost-accent-color: #D4844F;
}

/* ------------------------------------------------------------
   1. NAVIGATION TOUCH TARGETS + MOBILE OVERFLOW
   ------------------------------------------------------------ */

/* Belt-and-suspenders: pin the collapsed (hidden) fixed menu/actions
   to the viewport so their nowrap content can never widen the page.
   (Also enforced in hero.css; re-declared here because ux.css loads
   last and owns this concern.) */
@media (max-width: 767px) {
    #gh-navigation .gh-navigation-menu,
    #gh-navigation .gh-navigation-actions {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .is-open#gh-navigation .gh-navigation-menu,
    .is-open#gh-navigation .gh-navigation-actions {
        overflow: visible;
    }
}

/* 44x44px touch targets on touch devices and small screens.
   Targets the link itself, not its flex parent, so the hit area is real. */
@media (max-width: 767px), (pointer: coarse) {
    #gh-navigation .nav a,
    #gh-navigation .gh-navigation-menu a,
    #gh-navigation .gh-navigation-members a,
    #gh-navigation .gh-navigation-actions > a,
    #gh-navigation .gh-navigation-actions .gh-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .gh-burger {
        min-width: 44px;
        min-height: 44px;
    }

    /* keep the search + portal triggers comfortable too */
    #gh-navigation .gh-search,
    #gh-navigation .gh-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Header actions (Sign in / Subscribe) — enforce a 44px minimum on EVERY
   page type. hero.min.css loads only on the homepage and gives the Subscribe
   pill `.gh-navigation-actions .gh-button { min-height:auto; padding:6px 18px }`
   (specificity 0,2,0), shrinking it to ~29px; posts/pages/tags never load
   hero.min.css, so the bare "Sign in" link collapses to its text line-height
   (~28px). This sheet loads last + globally, so these rules win on all pages
   and pin both actions to a WCAG 44px minimum without touching type/color. */
.gh-navigation-actions a,
.gh-navigation-actions .gh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

/* Header "Subscribe" button — pin a deep-copper fill so the white label
   clears AA. --color-copper remaps to light #D4844F in dark mode
   (white-on-#D4844F = 2.91:1, fails AA); #A55E32 keeps white at 4.94:1.
   Loaded last + global, so this also covers non-home pages where the
   homepage-only hero.min.css isn't present. */
.gh-navigation-actions .gh-button {
    background: #A55E32;
}

.gh-navigation-actions .gh-button:hover {
    background: #9E5A30;
}

/* ------------------------------------------------------------
   2. READING PROGRESS BAR
   ------------------------------------------------------------ */
.ux-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 4000000; /* above the mobile open-nav (3999999) */
    pointer-events: none;
    background: transparent;
}

.ux-progress-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-copper, #b86b3c), var(--color-ember, #e25d33));
    box-shadow: 0 0 6px rgba(184, 107, 60, 0.45);
    transition: width 0.08s linear;
}

/* ------------------------------------------------------------
   3. TABLE OF CONTENTS
   Always-visible compact strip: heading links wrap inline like
   tags (no collapse/expand). A short 1–3 line block that never
   dominates the viewport.
   ------------------------------------------------------------ */
nav.ux-toc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin: 0 auto 28px;
    padding: 12px 18px;
    max-width: 720px;
    background: var(--color-surface-raised, #302b26);
    border: 1px solid var(--color-border, #3d3730);
    border-radius: 12px;
    color: var(--color-text, #e8e0d5);
}

/* The `hidden` attribute sets display:none via the UA sheet, but our
   author `display:flex` above would override it — re-assert it here so
   the TOC stays hidden until ux.js reveals it. */
nav.ux-toc[hidden] {
    display: none;
}

.ux-toc-label {
    flex: 0 0 auto;
    font-family: var(--gh-font-heading, var(--font-body));
    font-size: 1.4rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--color-text, #e8e0d5);
}

.ux-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ux-toc-list li {
    margin: 0;
}

.ux-toc-list a {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--color-border, #3d3730);
    border-radius: 999px;
    background: rgba(184, 107, 60, 0.10);
    color: var(--color-text-muted, #a89b8c);
    font-size: 1.4rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ux-toc-list a:hover,
.ux-toc-list a:focus-visible {
    color: var(--color-link-hover, #e25d33);
    background: rgba(184, 107, 60, 0.18);
    border-color: var(--color-copper, #b86b3c);
}

/* Overflow marker: names the headings the capped strip omits. Non-link, so it
   must not look pressable — no hover/press rule, no cursor, no tabindex. It is
   text, not a disabled control, so it uses the same muted token as the pills
   themselves (--color-text-muted = #A89B8C on the forced-dark surface #302B26,
   5.16:1), not --color-secondary-text (rgba(255,255,255,.64) in the dark theme,
   6.69:1 — louder than the links it sits behind). The copper dashed border is
   visible at 4.81:1 non-text. Box matches the pills' min-height:44px. */
.ux-toc-list .ux-toc-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px;
    border: 1px dashed var(--color-copper, #b86b3c);
    border-radius: 999px;
    background: none;
    color: var(--color-text-muted, #a89b8c);
    font-size: 1.4rem;
    line-height: 1.4;
    user-select: none;
}

/* ------------------------------------------------------------
   4. BREADCRUMBS
   ------------------------------------------------------------ */
.ux-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-text-muted, #a89b8c);
}

.ux-breadcrumbs a {
    color: var(--color-text-muted, #a89b8c);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ux-breadcrumbs a:hover,
.ux-breadcrumbs a:focus-visible {
    color: var(--color-copper, #b86b3c);
    text-decoration: underline;
}

.ux-breadcrumbs .ux-breadcrumb-sep {
    color: var(--color-border, #3d3730);
    user-select: none;
}

.ux-breadcrumbs .ux-breadcrumb-current {
    color: var(--color-text, #e8e0d5);
    font-weight: 600;
}

/* ------------------------------------------------------------
   5. COMMENTS EMPTY-BLOCK GUARD
   ------------------------------------------------------------ */
/* When the comments-ui iframe fails to bootstrap (blank srcdoc) the
   widget still reserves a fixed-height iframe. Collapse it so a blank
   widget never leaves a big empty void at the bottom of an article. */
.gh-comments {
    min-height: 0;
}

.gh-comments[data-empty] {
    display: none;
}

/* ------------------------------------------------------------
   6. CONTACT FORM
   ------------------------------------------------------------ */
.ux-contact-form {
    margin-top: 24px;
    padding: 24px;
    background: var(--color-surface-raised, #302b26);
    border: 1px solid var(--color-border, #3d3730);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ux-contact-form .ux-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ux-contact-form label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text, #e8e0d5);
}

.ux-contact-form .ux-req {
    color: var(--color-ember, #e25d33);
    font-weight: 550;
}

.ux-contact-form input,
.ux-contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1.6rem;
    font-family: inherit;
    color: var(--color-text, #e8e0d5);
    background: var(--color-bg, #1e1b18);
    border: 1px solid var(--color-border, #3d3730);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.ux-contact-form input:focus,
.ux-contact-form textarea:focus {
    border-color: var(--color-copper, #b86b3c);
}

/* Keyboard focus used to be suppressed here: `outline: none` on `:focus`
   (0,2,1) outranked the site-wide :where(...):focus-visible ring (0,1,0),
   so the one form on the site had no visible focus at all. Restore the
   ring on :focus-visible only (mouse clicks stay ring-free) and keep the
   border-colour change as the secondary cue.
   Copper #B86B3C on the field surface: 4.25:1 on the forced dark field
   (#1E1B18) and 3.65:1 on the light field (#F7F3ED) — both clear the
   3:1 non-text minimum. */
.ux-contact-form input:focus-visible,
.ux-contact-form textarea:focus-visible {
    outline: 2px solid var(--focus-ring-color, #b86b3c);
    outline-offset: 2px;
    border-color: var(--color-copper, #b86b3c);
}

.ux-contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.ux-contact-form .gh-button.ux-submit {
    align-self: flex-start;
    min-height: 44px;
    background: var(--color-copper, #b86b3c);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 650;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ux-contact-form .gh-button.ux-submit:hover {
    /*! #9e5a30 = intentional deep-copper hover (matches nav button hover; no darker token) */
    background: #9e5a30;
    transform: translateY(-1px);
}

/* Dark mode: bright copper #D4844F is too light for white text
   (2.91:1, fails AA). Use the dark background color as text instead. */
[data-theme="dark"] .ux-contact-form .gh-button.ux-submit {
    /*! #1E1B18 on #D4844F = 5.89:1 (AA requires >=4.5:1) */
    color: #1E1B18;
}

[data-theme="dark"] .ux-contact-form .gh-button.ux-submit:hover {
    /*! white on deep-copper hover #9e5a30 = 5.30:1 (AA requires >=4.5:1) */
    color: #fff;
}

.ux-form-feedback {
    min-height: 1.4em;
    margin: 0;
    font-size: 1.4rem;
    color: var(--color-ember, #e25d33);
}

.ux-form-feedback.is-success {
    /* Tokenised so the value cannot drift: evergreen #2D4A3E on a dark
       surface was 1.44:1. --color-success is #2D4A3E in light mode
       (9.72:1 on #FFFFFF) and #7FBFA0 in dark mode (6.58:1 on the
       #302B26 form surface, 8.05:1 on #1E1B18). */
    color: var(--color-success, #2d4a3e);
}

.ux-contact-note {
    font-size: 1.4rem;
    color: var(--color-text-muted, #a89b8c);
}

.ux-contact-note a {
    color: var(--color-copper, #b86b3c);
}

/* ------------------------------------------------------------
   7. NEWSLETTER VALIDATION FEEDBACK
   ------------------------------------------------------------ */
.gh-form [data-members-error]:empty {
    display: none;
}

.gh-form [data-members-error] {
    display: block;
    margin: 8px 0 0;
    font-size: 1.3rem;
    color: var(--color-ember, #e25d33);
}

.gh-form .gh-form-input[aria-invalid="true"] {
    border-color: var(--color-ember, #e25d33);
}

/* ------------------------------------------------------------
   8. ACCESSIBILITY: FOCUS-VISIBLE
   ------------------------------------------------------------ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring-color, #b86b3c);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect users who want no motion */
@media (prefers-reduced-motion: reduce) {
    .ux-progress-bar-fill,
    .ux-toc-list a,
    .ux-breadcrumbs a {
        transition: none;
    }
}

/* ------------------------------------------------------------
   9. FOOTER + CATEGORY TILE TAP TARGETS (WCAG 44px)
   ------------------------------------------------------------ */
/* Footer column nav links (Categories / Company / Legal) are ~19px
   tall text links — give them a real 44px tap target. */
.gh-footer-col ul li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Category tiles ("Field Manual Index") — guarantee a 44px+ hit area.
   (Already flex + padded, so this is belt-and-suspenders; inline-flex
   blockifies to flex inside the grid and changes nothing visually.) */
.gh-category-card-v2 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ------------------------------------------------------------
   10. PAGINATION (index + category archive pages)
   ------------------------------------------------------------ */
/* Replaces the old display:none `.gh-more` "See all" link with a
   visible, category-aware Newer/Older (or "See all" on page 1) nav.
   URLs come from Ghost's {{page_url}} helper so they follow the
   current collection/channel (e.g. /sustenance/page/2/). */
.gh-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 48px;
}

.gh-pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 650;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-copper);
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 10px;
    border: 2px solid var(--color-copper);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                color 0.3s ease;
}

.gh-pagination-link:hover {
    background: var(--color-copper);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(184, 107, 60, 0.25);
}

.gh-pagination-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.gh-pagination-link:hover svg {
    transform: translateX(3px);
}

/* ------------------------------------------------------------
   11. COLLECTION CARDS — raised style parity with homepage
   Homepage post cards (gh-featured-v2 / gh-latest-v2, styled in
   hero.min.css which is homepage-only) render as raised cards:
   1px border, 16px radius, overflow hidden, image radius 12px,
   dark fill #22201c. The same .gh-card renders flat on collection
   pages (index/tag/author "post-list") because hero.min.css never
   loads there. Replicate the same border/radius/fill here.
   ------------------------------------------------------------ */
.gh-feed .gh-card {
    position: relative;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.gh-feed .gh-card-image {
    overflow: hidden;
    border-radius: 12px;
}

.gh-feed .gh-card:hover {
    border-color: rgba(184, 107, 60, 0.35);
    box-shadow: 0 6px 24px rgba(184, 107, 60, 0.12),
                0 1px 4px rgba(58, 54, 50, 0.06);
    transform: translateY(-3px);
}

[data-theme="dark"] .gh-feed .gh-card {
    background: #22201c;
    border-color: #332e28;
}

[data-theme="dark"] .gh-feed .gh-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5),
                0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------
   11. "START WITH THESE" CAROUSEL AFFORDANCE
   The .gh-start-v2-grid already scroll-snaps horizontally, but its
   scrollbar is hidden (hero.css) and it has no arrows, so users get
   no signal that the strip overflows. Add:
     - a subtle scrollbar as the no-JS / desktop fallback
     - edge prev/next arrows (wired in ux.js)
     - one position dot per card (built in ux.js)
   When JS is active (html.js) the scrollbar is hidden again because
   arrows + dots take over as the affordance.
   ------------------------------------------------------------ */

/* No-JS / desktop fallback: a thin, subtle scrollbar instead of none */
.gh-start-v2-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 107, 60, 0.45) transparent;
}
.gh-start-v2-grid::-webkit-scrollbar {
    display: block;
    height: 6px;
}
.gh-start-v2-grid::-webkit-scrollbar-track {
    background: transparent;
}
.gh-start-v2-grid::-webkit-scrollbar-thumb {
    background: rgba(184, 107, 60, 0.4);
    border-radius: 3px;
}

/* JS active -> arrows + dots are the affordance; hide the scrollbar */
html.js .gh-start-v2-grid {
    scrollbar-width: none;
}
html.js .gh-start-v2-grid::-webkit-scrollbar {
    display: none;
}

/* Carousel wrapper positions the edge arrows */
.gh-start-v2-carousel {
    position: relative;
}

.gh-start-v2-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-light, #e8e1d7);
    border-radius: 50%;
    background: var(--color-surface-raised, #fff);
    color: var(--color-copper, #b86b3c);
    box-shadow: 0 6px 20px rgba(58, 54, 50, 0.14);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                opacity 0.3s ease;
}
.gh-start-v2-nav svg {
    width: 16px;
    height: 16px;
}
.gh-start-v2-nav-prev {
    left: -6px;
}
.gh-start-v2-nav-next {
    right: -6px;
}
.gh-start-v2-nav-prev svg {
    transform: rotate(180deg);
}
.gh-start-v2-nav:hover:not(:disabled),
.gh-start-v2-nav:focus-visible {
    background: var(--color-copper, #b86b3c);
    border-color: var(--color-copper, #b86b3c);
    color: #fff;
}
.gh-start-v2-nav:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* Position dots (built in ux.js; hidden while empty) */
.gh-start-v2-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.gh-start-v2-dots:empty {
    display: none;
}
.gh-start-v2-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-copper, #b86b3c);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease, filter 0.25s ease;
}
.gh-start-v2-dot:hover {
    filter: brightness(0.85);
}
.gh-start-v2-dot.is-active {
    background: var(--color-copper, #b86b3c);
    width: 20px;
}

/* Give the dots a real tap target without changing the visual dot */
.gh-start-v2-dots {
    padding: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
    .gh-start-v2-nav,
    .gh-start-v2-dot {
        transition: none;
    }
}

/* ------------------------------------------------------------
   12. REMAINING SUB-44px TAP TARGETS (WCAG 2.5.5 AAA = 44x44)
   Sweep of interactive controls still under the 44px standard
   established in sections 1/9/10. Rules are additive — they only
   grow the hit area (no type/color changes).
   ------------------------------------------------------------ */

/* Footer column nav: make the whole row clickable. The section 9 rule
   sets min-height:44px but keeps `display:inline-flex`, so the hit area
   is only as wide as the label (~26-43px). Block-flex the link to the
   full column width so width also clears 44px. */
.gh-footer-col ul li a {
    display: flex;
    width: 100%;
}

/* Nav logo (home link) — 40px image -> 44px hit area */
.gh-navigation-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Newsletter subscribe button (hero / footer / final CTA forms) */
.gh-form .gh-button {
    min-height: 44px;
}

/* Manifesto "Read the full story" link */
.gh-manifesto-v2-link {
    min-height: 44px;
}

/* Table of contents heading pills */
.ux-toc-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Breadcrumbs (Home / collection) — min-width covers the short
   "Home" label (37.8px text) so both dimensions clear 44px. */
.ux-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
}

/* Article category tag pill — min-width covers short labels (e.g. "GEAR"
   renders ~35px wide) so both dimensions clear 44px. */
.gh-article-tag {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
}

/* Article byline author name link */
.gh-article-author-name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Footer social icon links (defensive — section hidden when empty) */
.gh-social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Carousel position dots (.gh-start-v2-dot): keep the visible 8px dot
   but grow the hit area to 44x44 via an invisible pseudo-element, so
   each pagination button is comfortably tappable without changing the
   visual dot size or spacing. */
.gh-start-v2-dot {
    position: relative;
}

.gh-start-v2-dot::after {
    content: "";
    position: absolute;
    inset: -18px;
}


/* ------------------------------------------------------------
   13. PRESS STATES (apple-design pass 1)
   Feedback on pointer-down, not release. House press =
   translateY(1px) scale(.985) at 90ms ease-out. These live here
   because the matching :hover transforms are declared in this sheet
   (it loads last), so an equal-specificity :active rule that appears
   later in source order is what wins the cascade.
   ------------------------------------------------------------ */

.gh-pagination-link:active,
.ux-contact-form .gh-button.ux-submit:active,
.gh-feed .gh-card:active,
.ux-toc-list a:active {
    transform: translateY(1px) scale(0.985);
    transition: transform 90ms ease-out;
}

/* Carousel arrows carry a positioning transform (translateY(-50%)), so the
   press must preserve it; dots are 8px wide, where a 1.5% scale would be
   invisible, so they get a slightly stronger squash instead. */
.gh-start-v2-nav:active:not(:disabled) {
    transform: translateY(calc(-50% + 1px)) scale(0.96);
    transition: transform 90ms ease-out;
}

.gh-start-v2-dot:active {
    transform: scale(0.8);
    transition: transform 90ms ease-out;
}

@media (hover: none) {
    /* No hover on touch: make sure a tap cannot leave a lifted card/nav
       stuck in its hover state, and that the press still reads. */
    .gh-feed .gh-card:hover,
    .gh-pagination-link:hover {
        transform: none;
    }

    .gh-feed .gh-card:active,
    .gh-pagination-link:active,
    .ux-contact-form .gh-button.ux-submit:active,
    .ux-toc-list a:active {
        transform: translateY(1px) scale(0.985);
    }

    .gh-start-v2-nav:active:not(:disabled) {
        transform: translateY(calc(-50% + 1px)) scale(0.96);
    }

    .gh-start-v2-dot:active {
        transform: scale(0.8);
    }
}

/* TOC entries that are H3s: same chip, slightly recessive, so the two
   levels read as a hierarchy without changing the list geometry. */
.ux-toc-list a.ux-toc-sub {
    opacity: 0.82;
}

.ux-toc-list a.ux-toc-sub:hover,
.ux-toc-list a.ux-toc-sub:focus-visible {
    opacity: 1;
}