/* ─────────────────────────────────────────────────────────────────────────
 * Shared continue-pills styles for the topbar.
 *
 * Used by library.html, programs.html, daily.html, account.html — every
 * page except index.html (/app), which has its own copy with --refr-*
 * prefixed tokens.
 *
 * Pair this with /continue-pills.js, which populates the #continuePills
 * container with active enrollment links.
 * ──────────────────────────────────────────────────────────────────────── */

.continue-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.continue-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft, #F2EFE8);
  border: 1px solid var(--line, rgba(20, 20, 26, 0.08));
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  text-decoration: none;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  cursor: pointer;
  line-height: 1;
}
.continue-pill:hover {
  border-color: var(--line-strong, rgba(20, 20, 26, 0.18));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 20, 26, 0.05);
}
.continue-pill .pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--periwinkle, #6B6FE0);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 var(--periwinkle, #6B6FE0);
  animation: continue-pill-pulse 2s ease-in-out infinite;
}
@keyframes continue-pill-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(107, 111, 224, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(107, 111, 224, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(107, 111, 224, 0);    }
}
.continue-pill-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.continue-pill-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint, #8A877D);
}
.continue-pill-name {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink, #14141A);
  letter-spacing: -0.005em;
}

/* When there are multiple pills, slightly tighter so 5 fit comfortably */
.continue-pills.multi .continue-pill {
  padding: 5px 12px 5px 9px;
}
.continue-pills.multi .continue-pill-name { font-size: 13px; }
.continue-pills.multi .continue-pill-label { font-size: 9px; }

/* Done-today state — pill stays clickable but visually quiet.
   Green check replaces the pulsing periwinkle dot; the label shifts
   from "CONTINUE" to "DONE TODAY". Background is a hint dimmer so the
   pill doesn't shout "still owed" when the user has already shown up. */
.continue-pill-check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(74, 138, 92, 0.16);
  color: #4A8A5C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.continue-pill-check svg {
  width: 10px; height: 10px;
}
.continue-pills.done-today .continue-pill {
  background: transparent;
  border-color: rgba(20, 20, 26, 0.06);
}
.continue-pills.done-today .continue-pill-label {
  color: #4A8A5C;
}

/* On narrow topbars, give pills priority over hiding the nav. The flex
 * container in the topbar should already wrap, but tighten pill padding
 * a bit more on mobile so things don't blow out. */
@media (max-width: 720px) {
  .continue-pill { padding: 5px 12px 5px 8px; }
  .continue-pill-name { font-size: 13px; }
}