/*
 | One step to the previous or the next result, from a content page (#1417).
 |
 | `LeadsBackToTheResults` adds the two buttons to the page header, where
 | Filament draws actions; this turns them into two slim tabs pinned halfway
 | down the screen, so they stay in reach on a long content the way «Back to
 | the results» follows the reader down (#1385).
 |
 | **In the free margin, never over the content.** Each tab is centred in the
 | gutter between the content area's edge and the cards — `.fi-main`'s own
 | padding — and is narrower than it. Chosen on 2026-10-08 over round buttons
 | on the edge (they covered the cards) and labelled pills (clearer, but wider
 | still). The gutter is Filament's and changes with the breakpoint (1, 1.5,
 | 2rem) and with the sidebar, so only a measure knows its centre:
 | `step-through-results.js` writes it to `--ssmt-step-start` / `--ssmt-step-end`,
 | and the tabs are shifted by half their own width onto it. Until the script
 | has run, the viewport's edges are the fallback. ⚠️ On a phone the gutter is
 | 1rem and the tab 1.25rem: it overlaps the cards by 0.125rem on each side.
 |
 | `position: fixed`, unlike the back button: these two have no slot in the
 | header worth keeping — they belong to the sides of the content.
 |
 | 0.75 at rest, full strength on a pointer or the keyboard's focus. ⚠️
 | `:focus-visible` is not decoration: a reader on the keyboard does not hover.
 | The icon is the design system's muted text, not Filament's lighter gray: on
 | a 1.25rem tab Filament's gray at 75% all but vanished. Computed on the blend
 | at 0.75: ~4.6:1 on light, ~5.5:1 on dark (dark page background estimated) —
 | over the 3:1 a control needs (WCAG 1.4.11).
 | Sizes in rem, never px (WCAG 1.4.4).
 */
.ssmt-step-result {
    position: fixed;
    top: 50%;
    z-index: 20;
    /* `.fi-icon-btn` pulls itself out by -0.5rem for its inline use; fixed,
       that would shift the tab off the centre of the gutter. */
    margin: 0;
    inline-size: 1.25rem;
    block-size: 4.5rem;
    border: 1px solid var(--tew-color-border);
    border-radius: var(--tew-radius-sm);
    background-color: var(--tew-color-surface);
    opacity: 0.75;
    transition: opacity 150ms ease-out;
}

.ssmt-step-result .fi-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--tew-color-text-muted);
    stroke-width: 2.25;
}

.ssmt-step-result--previous {
    left: var(--ssmt-step-start, 0.75rem);
    transform: translate(-50%, -50%);
}

.ssmt-step-result--next {
    right: var(--ssmt-step-end, 0.75rem);
    transform: translate(50%, -50%);
}

.ssmt-step-result:hover,
.ssmt-step-result:focus-visible {
    opacity: 1;
}