/* Trial countdown pill, in the rail foot above the account item. */

.trial-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: 9px;
  text-decoration: none;
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.22);
  transition: background 140ms, border-color 140ms;
}
.trial-pill:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.38);
}

.trial-pill-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, #6366f1);
}

.trial-pill-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.trial-pill-text strong {
  font-size: 12px;
  font-weight: 650;
  color: var(--fg, #eef0f4);
}
.trial-pill-text small {
  font-size: 10.5px;
  color: var(--fg-mute, #9aa3b2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Last few days: amber rather than red. This is information, not a failure. */
.trial-pill.ending {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.28);
}
.trial-pill.ending:hover { background: rgba(251, 191, 36, 0.16); }
.trial-pill.ending .trial-pill-dot { background: #fbbf24; }

.trial-pill.ended {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-2, rgba(255, 255, 255, 0.10));
}
.trial-pill.ended .trial-pill-dot { background: var(--fg-mute, #9aa3b2); }

/* Collapsed rail: the pill becomes just its dot, so the rail keeps its width. */
html[data-rail="collapsed"] .trial-pill {
  justify-content: center;
  margin: 0 8px 8px;
  padding: 8px 0;
}
html[data-rail="collapsed"] .trial-pill-text { display: none; }