/* rail · status bar */
.rail { position: relative; z-index: 6; display: flex; align-items: center; height: 36px; border-bottom: 1px solid var(--line-3); background: var(--bg-2);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
.rl-label { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 100%; border-right: 1px solid var(--line-3); color: var(--accent); }
.rl-label .dot { background: var(--accent); }
.rl-mid { flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; align-items: center; padding: 0 22px; }
.rl-track { display: flex; min-width: 0; }
.rl-items { display: flex; align-items: center; gap: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-items > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.rl-track.is-scroll { width: max-content; animation: rl-scroll var(--rl-seconds, 48s) linear infinite; }
.rl-track.is-scroll .rl-items { overflow: visible; padding-right: 20px; }
.rail:hover .rl-track.is-scroll { animation-play-state: paused; }
@keyframes rl-scroll { to { transform: translateX(-50%); } }
.rl-sep { color: var(--dim); }
.rl-ok { color: var(--ok); font-weight: 400; }
.rl-down { color: var(--alert); font-weight: 400; }
.rl-cell { flex: none; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-left: 1px solid var(--line-3); }
.rl-theme { padding-left: 18px; padding-right: 14px; }
.rl-beas img { width: 18px; height: auto; }
.rl-beas b { color: var(--title); font-weight: 400; }
@media (max-width: 900px) { .rl-mid { display: none; } .rl-theme { margin-left: auto; } }   /* the theme menu sits on the right, by Bea */
@media (max-width: 900px) {                     /* tablets, music playing: drop the "Theme" word and keep the title short, so Bea's count fits */
  .rail:has(.rl-np:not([hidden])) .rl-theme { font-size: 0; gap: 0; }
  .rail:has(.rl-np:not([hidden])) .rl-theme .thsel { font-size: 12px; }
  .rail:has(.rl-np:not([hidden])) .np-t { max-width: 130px; }
  .rail:has(.rl-np:not([hidden])) .rl-beas { position: relative; }       /* …and Bea shrinks to her face with the count, like on phones */
  .rail:has(.rl-np:not([hidden])) .rl-beas > span { display: none; }
  .rail:has(.rl-np:not([hidden])) .rl-beas img { width: 24px; }
  .rail:has(.rl-np:not([hidden])) .rl-bmini { display: block; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 3px; border-radius: 2px;
    background: rgba(var(--bg-rgb), .85); color: var(--title); font-size: 8px; font-weight: 600; line-height: 1; font-style: normal; letter-spacing: .04em; white-space: nowrap; }
  .rail:has(.rl-np:not([hidden])) .rl-bmini b { font-weight: 600; color: var(--accent); }
}
@media (max-width: 600px) { .rl-label { padding: 0 12px; } .rl-cell { padding: 0 12px; } .rl-beas span { display: none; } }
@media (max-width: 600px) {                     /* phones: the menu without its "Theme" word, so the bar fits */
  .rl-theme { font-size: 0; gap: 0; padding: 0 8px; }
  .rl-theme .thsel { font-size: 11px; width: auto; max-width: 104px; min-height: 24px; padding: 0 20px 0 7px; letter-spacing: .04em; background-position: calc(100% - 8px) 52%; }
}
/* phones: "Beas found" shrinks to her face with the count over her chin */
.rl-bmini { display: none; }
@media (max-width: 600px) {
  .rl-beas { position: relative; }
  .rl-beas img { width: 24px; }
  .rl-bmini { display: block; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); padding: 1px 3px; border-radius: 2px;
    background: rgba(var(--bg-rgb), .85); color: var(--title); font-size: 8px; font-weight: 600; line-height: 1; font-style: normal; letter-spacing: .04em; white-space: nowrap; }
  .rl-bmini b { font-weight: 600; color: var(--accent); }
  .rl-beas .rl-bmini span { display: inline; }   /* (the rule above hides the long "Beas found" text, not the total) */
}
@media (max-width: 380px) {                     /* the narrowest phones */
  .rl-theme .thsel { max-width: 92px; }
  .rl-label, .rl-cell { padding: 0 10px; }
}