/* Today, while the queue is still on its way.
   Ledger cards, not a spinner. The lines are the same rules as a card:
   paper, a ribbon-soft mark, a draft bar with the ribbon on its edge.
   The book in front of them sits on the leather ground. It opens once,
   then keeps turning until the page is painted. Script decides when. */

.bb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.td-skel-wrap { position: relative; display: flex; flex-direction: column; gap: 12px; }
#board-cards > .td-skel-wrap { gap: 0; }

.td-card.td-skel,
.taskrow.td-skel {
  cursor: default;
  pointer-events: none;
}
.td-card.td-skel:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--ds-book-line);
}

.td-skel-line,
.td-skel-av,
.td-skel-pill,
.td-skel-btn {
  background: var(--ds-book-line);
  animation: td-skel-rule 1.6s ease-in-out infinite;
}
.td-skel-line { display: block; height: 8px; border-radius: 1px; }
.td-side-skel { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 12px; }
.td-side-skel .td-skel-line { width: 78%; }
.td-side-skel .td-skel-name { width: 46%; height: 12px; }
.td-skel-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.td-skel-name { width: 46%; height: 12px; }
.td-skel-meta { width: 72%; }
.td-skel-kicker { width: 72px; height: 8px; margin-left: auto; flex: none; }
.td-skel-mem {
  width: 64%;
  margin: 10px 0 0 52px;
  border-left: 1px solid var(--ds-book-line-strong);
  padding-left: 10px;
  height: 10px;
  background: transparent;
  box-shadow: inset 0 -6px 0 var(--ds-book-line);
}
.td-skel-draft {
  width: 100%;
  height: 36px;
  background: var(--ds-book-draft);
  border-left: 3px solid var(--ds-book-ribbon);
  animation: none;
}
.td-card.td-skel .td-av {
  background: var(--ds-book-ribbon-soft);
}
.td-skel-btn {
  display: inline-block;
  width: 72px;
  height: 32px;
  border-radius: 999px;
  background: var(--ds-book-ribbon-soft);
}
.td-skel-btn-strong { width: 88px; background: var(--ds-book-line); }
.td-card.td-skel.is-marked::after {
  content: "";
  position: absolute;
  top: 0;
  right: 12px;
  width: 10px;
  height: 28px;
  background: var(--ds-book-ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.taskrow.td-skel { align-items: center; }
.td-skel-rank { width: 16px; height: 12px; flex: none; }
.td-skel-pill { width: 64px; height: 18px; border-radius: 99px; flex: none; }

@keyframes td-skel-rule {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* The book itself is the 3D flip in book-flip.css. This file keeps the
   leather mask for the first paint, the shell fade under that flip, and
   the still-loading note. The flip keeps turning until the front page
   is painted, then fades over the same 1050ms as the shell. */
body.bb-book-open { overflow: hidden; }
/* The shell is skipped for layout during the turn. A laid-out Today
   under the curling page made every desktop frame miss 60fps.
   bb-settle shows it once the leaf has stopped, and the 1050ms fade
   starts only after those cards have boxes. The shell does not replay
   the book fade. */
html.bb-cover:not(.bb-revealing):not(.bb-settle) .board-shell {
  visibility: hidden;
  content-visibility: hidden;
}
html.bb-cover.bb-under .board-shell { opacity: 1; }
html.bb-settle .board-shell,
html.bb-revealing .board-shell {
  visibility: visible;
  content-visibility: visible;
}
html.bb-revealing .board-shell { animation: none; }
/* Skeleton pulses are opacity, but each one is another animation the
   frame has to service while the book is the only thing on screen. */
html.bb-cover:not(.bb-revealing) .td-skel-line,
html.bb-cover:not(.bb-revealing) .td-skel-av,
html.bb-cover:not(.bb-revealing) .td-skel-pill,
html.bb-cover:not(.bb-revealing) .td-skel-btn,
html.bb-cover:not(.bb-revealing) .skeleton,
html.bb-cover:not(.bb-revealing) .spinner,
html.bb-cover:not(.bb-revealing) .is-revealing {
  animation: none;
}
.bb-reveal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  background-color: var(--ds-book-leather);
  background-image: radial-gradient(70% 46% at 50% 42%, var(--ds-book-leather-glow), transparent 72%);
  pointer-events: auto;
}
.bb-reveal-wait,
.bbf .bb-reveal-wait { text-align: center; }
.bb-reveal-status {
  margin: 0 0 14px;
  color: var(--ds-book-on-leather);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
}
.bb-reveal-retry {
  appearance: none;
  border: 1px solid var(--ds-book-on-leather);
  background: transparent;
  color: var(--ds-book-on-leather);
  font: inherit;
  padding: 8px 16px;
  cursor: pointer;
}
@keyframes bb-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.bb-cover.bb-under .board-shell { opacity: 1; }
  html.bb-revealing .board-shell { animation: none !important; }
  .td-skel-line,
  .td-skel-av,
  .td-skel-pill,
  .td-skel-btn { animation: none; }
}