/* "You are here" ruler: a fixed rail at the right edge with a tick per heading. Ticks near the reading position grow
   leftwards into the page (a fisheye curve). Built by ruler.js; hidden on screens narrower than 1100px. */
.ruler { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); height: min(70vh, 520px); width: 56px; z-index: 30; color: #64748b; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ruler.grabbing { cursor: grabbing; }
.ruler a, .ruler .label, .ruler .bar { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ruler::after { content: ''; position: absolute; right: -5px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: currentColor; opacity: 0.18; pointer-events: none; }
.ruler-minor, .ruler-major { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ruler .t { position: absolute; right: 0; top: calc(var(--p) * 100%); height: 1px; width: calc(5px + var(--m, 0) * 22px); background: currentColor; opacity: calc(0.35 + var(--m, 0) * 0.65); pointer-events: none; }
.ruler-major li { position: absolute; right: 0; top: calc(var(--p) * 100%); }
.ruler a.major { position: absolute; right: 0; top: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 7px 0 7px 14px; color: inherit; text-decoration: none; width: max-content; }
.ruler .bar { display: block; flex: none; height: 2px; width: calc(12px + var(--m, 0) * 32px); background: currentColor; border-radius: 1px; }
.ruler a.major.active { color: #3b82f6; }
.ruler a.major.active .bar { height: 3px; }
.ruler .label {
    max-width: 150px; font: 12px/1.3 'JetBrains Mono', monospace; text-align: right; color: #e2e8f0;
    background: rgba(13, 17, 23, 0.92); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 6px; padding: 4px 8px;
    opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.ruler a.major:hover .label, .ruler a.major:focus-visible .label { opacity: 1; max-width: 240px; }
.ruler a.major:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: 4px; }
@media (min-width: 1280px) { .ruler:not(.labels-hover) a.major.active .label { opacity: 1; } }
@media (max-width: 1099.98px) { .ruler { display: none; } }
@media print { .ruler { display: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[data-ruler] h2, [data-ruler] h3, [data-ruler] dt { scroll-margin-top: 90px; }

[data-theme="light"] .ruler { color: #475569; }
[data-theme="light"] .ruler a.major.active { color: #1d4ed8; }
[data-theme="light"] .ruler .label { background: rgba(255, 255, 255, 0.96); color: #0f172a; border-color: rgba(37, 99, 235, 0.4); }
[data-theme="contrast"] .ruler { color: #fff; }
[data-theme="contrast"] .ruler a.major.active { color: #ffe066; }
[data-theme="contrast"] .ruler .label { background: #000; color: #fff; border: 2px solid #fff; }