.record-rail { min-width: 0; position: relative; }
.record-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 20px; }
.record-rail__track::-webkit-scrollbar { display: none; }
.record-rail__toolbar { display: none; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 20px; }
.record-rail[data-rail-enhanced="true"] .record-rail__toolbar { display: flex; }
.record-rail__buttons { display: flex; gap: 12px; }
.record-rail__count { display: none; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1; letter-spacing: -.05em; }
.record-rail__separator { font-family: 'Manrope', sans-serif; }
.record-rail--tests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.record-rail--tests .record-rail__track { display: contents; }
.record-rail--tests .record-rail__toolbar { display: none; }
.record-rail--clients { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.record-rail--clients .record-rail__toolbar { grid-column: 2; }
.record-rail--clients .record-rail__track { grid-column: 1 / -1; grid-auto-columns: clamp(180px, 15vw, 216px); gap: 12px; justify-content: safe center; padding-inline: var(--rail-gutter, 0px); scroll-padding-inline: var(--rail-gutter, 0px); }
.record-rail__page { display: contents; scroll-snap-align: none; }
.record-rail--projects { grid-column: 1 / -1; }
.record-rail--projects .record-rail__track { grid-auto-columns: calc((100% - 20px - var(--record-rail-preview, 0px))/2); padding-inline: var(--rail-gutter, 0px); scroll-padding-inline: var(--rail-gutter, 0px); }
.record-rail--clients .record-rail__toolbar, .record-rail--projects .record-rail__toolbar { justify-content: end; }
.record-rail--projects .record-rail__toolbar { position: absolute; right: var(--rail-gutter, 0px); bottom: calc(100% + 38px); margin: 0; }
.record-rail--hero .record-rail__track { gap: 0; }
.record-rail[data-rail-enhanced="true"] .record-rail__track { cursor: grab; user-select: none; }
.record-rail[data-rail-dragging="true"] .record-rail__track { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.record-rail--hero { grid-area: 1/1; }
.record-rail--hero .record-rail__toolbar { position: absolute; bottom: 60px; right: 60px; z-index: 1; margin: 0; padding: 30px; background: rgb(255 255 255 / .24); backdrop-filter: blur(13.6px); color: white; }
.record-rail--hero .record-rail__count { display: block; font-size: 24px; color: rgb(255 255 255 / .6); }
.record-rail--hero .record-rail__current { color: white; }
.record-rail__current { display: inline-block; inline-size: 2ch; font-size: 48px; font-variant-numeric: inherit; line-height: 1; letter-spacing: -.05em; }
@media (max-width: 950px) { .record-rail--tests { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Keep a neighboring card visible even when the page gutter is only 10px. */
@media (max-width: 740px) { .record-rail--projects { --record-rail-preview: 30px; } }
/* The desktop panel starts colliding with copy below 838px; allow a 42px gap. */
@media (max-width: 880px) {
 .record-rail--hero .record-rail__toolbar { gap: 24px; padding: 12px 18px; }
 .record-rail--hero .record-rail__count { font-size: 16px; }
 .record-rail--hero .record-rail__current { font-size: 32px; }
}
@media (min-width: 601px) and (max-width: 880px) {
 .record-rail--hero { display: grid; grid-template-rows: auto auto; }
 .record-rail--hero .record-rail__track { grid-area: 1 / 1 / span 2; grid-template-rows: subgrid; }
 .record-rail--hero .record-rail__toolbar { position: static; grid-area: 2 / 1; justify-self: end; margin: 0 30px 30px; }
}
@media (max-width: 600px) {
 .record-rail__page { scroll-snap-align: start; }
 .record-rail--tests { grid-template-columns: minmax(0,1fr); gap: 0; }
 .record-rail--tests .record-rail__track { display: grid; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; margin-bottom: 30px; }
 .record-rail--tests[data-rail-enhanced="true"] .record-rail__toolbar { display: flex; margin: 0 0 20px; }
 .record-rail--clients .record-rail__track { grid-auto-columns: 100%; }
 .record-rail--clients .record-rail__page { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .record-rail--projects .record-rail__track { grid-auto-columns: calc(100% - var(--record-rail-preview, 0px)); }
 .record-rail--projects .record-rail__toolbar { bottom: calc(100% + 26px); }
 .record-rail--hero .record-rail__toolbar { bottom: 10px; right: 10px; left: 10px; }
}
@media (prefers-reduced-motion: no-preference) { .record-rail__track { scroll-behavior: smooth; } }