/* Catch Up, the dial (Nov 2026). The popover, the header badge, the progress
 * pill and the stack treatment in the reader. Behaviour in catchup-dial.js. */

:root {
  --cud-brand: var(--color-brand, #ff6b35);
  --cud-accent: light-dark(#d44009, #ff7a45);
  --cud-card: var(--color-card, light-dark(#ffffff, #1b1b1e));
  --cud-fg: var(--color-text, light-dark(#0a0a0a, #f2f2f2));
  --cud-dim: var(--color-text-secondary, light-dark(#5f6368, #9aa0a6));
  --cud-track: light-dark(rgba(0, 0, 0, 0.09), rgba(255, 255, 255, 0.12));
  --cud-chip: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
  --cud-shadow: light-dark(0 18px 50px rgba(0, 0, 0, 0.18), 0 18px 50px rgba(0, 0, 0, 0.7));
}

/* ── the header button's count ─────────────────────────────────────────── */
.fbh__btn[data-catchup], .action-btn[data-catchup] { position: relative; }
.cud-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--cud-brand);
  color: #fff;
  font: 600 10.5px/17px var(--font-family, system-ui);
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  border: 2px solid light-dark(#fff, #282828);
  box-sizing: content-box;
}
.action-btn img + .cud-badge { filter: none; }
.action-btn.is-working img { animation: cud-breathe 1.4s ease-in-out infinite; }
.fbh__btn.is-working svg { animation: cud-breathe 1.4s ease-in-out infinite; color: var(--cud-accent); }
@keyframes cud-breathe { 50% { transform: scale(0.88); } }

/* ── the popover ───────────────────────────────────────────────────────── */
.cud {
  position: fixed;
  z-index: 1200;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: var(--cud-card);
  color: var(--cud-fg);
  box-shadow: var(--cud-shadow);
  border: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
  text-align: center;
  font-family: var(--font-family, system-ui);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cud.is-open { opacity: 1; transform: none; }
.cud[hidden] { display: none; }
.cud__head { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; }
.cud__number { margin-top: 6px; height: 64px; overflow: hidden; }
.cud__value {
  display: inline-block;
  font-size: 56px;
  line-height: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cud__value.is-down { animation: cud-down 180ms ease-out; }
.cud__value.is-up { animation: cud-up 180ms ease-out; }
@keyframes cud-down { from { transform: translateY(-40%); opacity: 0.2; } }
@keyframes cud-up { from { transform: translateY(40%); opacity: 0.2; } }
.cud__of { color: var(--cud-dim); font-size: 14px; margin-top: -2px; }

.cud__slide { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.cud__step {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--cud-chip);
  color: var(--cud-fg);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.cud__range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--cud-brand) var(--fill, 50%), var(--cud-track) var(--fill, 50%));
  outline: none;
}
.cud__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
  cursor: grab;
}
.cud__range::-moz-range-thumb {
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.cud__range:focus-visible { box-shadow: 0 0 0 3px light-dark(rgba(255, 107, 53, 0.3), rgba(255, 122, 69, 0.35)); }

.cud__presets { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cud__preset {
  min-width: 56px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--cud-chip);
  color: var(--cud-fg);
  font: 500 14px var(--font-family, system-ui);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.cud__preset.is-on { background: var(--cud-brand); color: #fff; }
.cud__caption { min-height: 20px; margin: 12px 0 14px; color: var(--cud-dim); font-size: 13.5px; }
.cud__go {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 14px;
  background: var(--cud-brand);
  color: #fff;
  font: 600 16px var(--font-family, system-ui);
  cursor: pointer;
}
.cud__go:disabled { background: var(--cud-chip); color: var(--cud-dim); cursor: default; }
.cud__all {
  margin-top: 8px;
  border: none;
  background: none;
  color: var(--cud-accent);
  font: 500 14px var(--font-family, system-ui);
  cursor: pointer;
}
.cud.is-disabled .cud__range, .cud.is-disabled .cud__step { opacity: 0.4; }
.cud button:focus-visible { outline: 2px solid var(--cud-accent); outline-offset: 2px; }

@media (max-width: 520px) {
  .cud { border-radius: 22px; }
}

/* ── progress ──────────────────────────────────────────────────────────── */
.cud-status {
  /* Lives in #toast-container, with the toasts, above the action bar. */
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border-radius: 999px;
  background: var(--cud-card);
  color: var(--cud-fg);
  box-shadow: var(--cud-shadow);
  font: 500 14px var(--font-family, system-ui);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cud-status.is-on { opacity: 1; transform: none; }
.cud-status__ring svg { width: 20px; height: 20px; display: block; transform: rotate(-90deg); }
.cud-status__ring circle { fill: none; stroke: var(--cud-track); stroke-width: 2.6; }
.cud-status__ring .cud-status__arc {
  stroke: var(--cud-brand);
  stroke-linecap: round;
  stroke-dasharray: 50.27;
  stroke-dashoffset: 46;
  transition: stroke-dashoffset 500ms ease;
}
.cud-status.is-spin .cud-status__ring svg { animation: cud-spin 1.1s linear infinite; }
@keyframes cud-spin { to { transform: rotate(270deg); } }
.cud-status__stop {
  border: none;
  border-radius: 999px;
  padding: 5px 11px;
  background: var(--cud-chip);
  color: var(--cud-fg);
  font: 500 13px var(--font-family, system-ui);
  cursor: pointer;
}

/* ── the fold, in the reader ───────────────────────────────────────────── */
.article.cud-folding { animation: cud-fold 520ms cubic-bezier(0.3, 0.7, 0.2, 1); }
@keyframes cud-fold {
  0% { transform: none; filter: none; }
  35% { transform: translateY(6px) scale(0.965); filter: drop-shadow(0 6px 0 var(--cud-track)) drop-shadow(0 12px 0 var(--cud-track)); }
  100% { transform: none; filter: none; }
}
.article__title.cud-retitle { animation: cud-retitle 420ms ease; }
@keyframes cud-retitle { from { opacity: 0.15; transform: translateY(3px); } }

/* A stack's visual brief replacing its plain text. */
.article__tldr.cud-visual-in { animation: cud-visual-in 480ms ease; }
@keyframes cud-visual-in { from { opacity: 0; transform: translateY(4px); } }

/* A sub-stack inside a big stack: a tile that opens in the reader. */
.source-tile--stack .source-tile__media {
  background: linear-gradient(135deg, light-dark(#fff3ec, #2a1d17), light-dark(#ffe1d1, #3a2418));
}
.source-tile--stack .source-tile__count {
  position: absolute;
  inset: auto auto 10px 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cud-brand);
  color: #fff;
  font: 600 12.5px var(--font-family, system-ui);
}

/* Undo after Done on a stack. */
.cud-undo {
  /* Lives in #toast-container, with the toasts, above the action bar. */
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: light-dark(#1b1b1e, #f2f2f2);
  color: light-dark(#f2f2f2, #0a0a0a);
  font: 500 14.5px var(--font-family, system-ui);
  box-shadow: var(--cud-shadow);
  animation: cud-undo-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cud-undo-in { from { opacity: 0; transform: translateY(10px); } }
.cud-undo button {
  border: none;
  border-radius: 9px;
  padding: 6px 12px;
  background: transparent;
  color: var(--cud-brand);
  font: 600 14.5px var(--font-family, system-ui);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cud, .cud-status, .cud-undo { transition: opacity 120ms linear; animation: none; }
  .article.cud-folding, .article__title.cud-retitle, .cud__value, .article__tldr.cud-visual-in { animation: none !important; }
  .fbh__btn.is-working svg, .action-btn.is-working img { animation: none; }
}