/* Section 03 Where it went. OWNER: rails/sources/review worker. */
/* Rows sit in MAX_ROWS fixed slots (--rows) and move with transforms only: the list never changes height. */
.rails-box { --rail-h: 60px; position: relative; height: calc(var(--rows, 9) * var(--rail-h)); border-top: 1px solid var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--rail-h) - 1px), var(--hair) calc(var(--rail-h) - 1px) var(--rail-h)); }
.rails { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rail-h);
  transform: translateY(calc(var(--slot, 0) * var(--rail-h)));
  transition: transform .75s var(--ease), opacity .3s;
  background: var(--paper);
}
.rail.fresh { opacity: 0; transition: none; }
.rail.gone { opacity: 0; pointer-events: none; }
.rail-btn {
  width: 100%; height: 100%; text-align: left; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(210px, 1.6fr) 4fr 56px 150px; gap: 20px; align-items: center;
  padding: 0; border-bottom: 1px solid var(--hair);
  transition: color .3s, opacity .3s;
}
div.rail-btn { cursor: default; }
.rail-name { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font-size: var(--t-lg); font-weight: 500; font-stretch: 92%; letter-spacing: -.005em; }
.rail-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rail-sw { flex: none; width: 8px; height: 8px; background: var(--c, var(--ink)); }
.rail-tag { flex: none; font: 400 11px var(--f-mono); color: var(--grey-t); border: 1px solid var(--hair); padding: 0 5px; line-height: 16px; letter-spacing: 0; }
.rail-fixed { box-sizing: border-box; width: 68px; padding: 0 3px; font-size: 10px; text-align: center; overflow: hidden; } /* fixed 68px slot: fits "part fixed" and never resizes with its text, and leaves "Subscriptions" untruncated at 1440 */
.rail-tag[hidden] { display: none; }
.rail-pin { display: none; color: var(--red-t); border-color: currentColor; }
.rail.pinned .rail-pin { display: inline; }
.rail-track { height: 9px; position: relative; display: flex; align-items: center; }
.rail-track::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--hair); }
.rail-fill { position: relative; height: 5px; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); transition: transform 1.1s var(--expo) var(--rd, 0ms), background .3s; }
.rail-pct { font: 400 var(--t-xs) var(--f-mono); color: var(--grey-t); text-align: right; white-space: nowrap; }
.rail-val { font-size: var(--t-lg); font-weight: 600; font-stretch: 85%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.rail.neg .rail-val { color: var(--grey-t); }
.rails.iso .rail-btn { color: var(--grey-t); }
.rails.iso .rail-fill { background: var(--mute); }
.rails.iso .rail.on .rail-btn { color: var(--ink); }
.rails.iso .rail.on .rail-fill { background: var(--c, var(--red)); }
button.rail-btn:hover .rail-label { text-decoration: underline; text-decoration-color: var(--mute); text-underline-offset: 4px; }
html.js[data-motion="on"] .rails:not(.grown) .rail-fill { transform: scaleX(0); }
html[data-motion="off"] .rail, html[data-motion="off"] .rail-fill { transition: none; }
.rails-empty { position: absolute; left: 0; right: 0; top: 0; height: var(--rail-h); margin: 0; display: flex; align-items: center; color: var(--grey-t); background: var(--paper); border-bottom: 1px solid var(--hair); }
.rails-empty[hidden] { display: none; }
.rails-foot { margin: 14px 0 0; font: 400 var(--t-xs) var(--f-mono); line-height: 16px; color: var(--grey-t); }

@media (max-width: 760px) {
  .rails-box { --rail-h: 70px; }
  .rail-btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 12px; align-content: center; }
  .rail-name { grid-column: 1; grid-row: 1; font-size: 17px; }
  .rail-val { grid-column: 2; grid-row: 1; font-size: 17px; }
  .rail-track { grid-column: 1; grid-row: 2; }
  .rail-pct { grid-column: 2; grid-row: 2; }
}