/* 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 runs once, for 900ms, and only from script
   when nothing is saved and motion is allowed. */

.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-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: 2px;
  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. It enters, the cover draws back toward the spine, and the
   overlay leaves. translate3d and scaleX only: a 3D page turn is dropped
   by iOS Safari when any ancestor fades. 900ms is the whole thing. */
.bb-reveal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: color-mix(in srgb, var(--ds-book-leather) 55%, transparent);
  pointer-events: none;
  /* !important holds the 900ms open against the reduced-motion rule that
     sets every animation to a hair of a millisecond. That rule is the right
     default for the rest of the product. This one motion is already skipped
     when the reader has asked for less motion, in script and in the query
     below, so it does not need the haircut as well. */
  animation: bb-reveal-fade 900ms linear forwards !important;
}
.bb-reveal-book {
  position: relative;
  width: min(260px, 70vw);
  height: min(360px, 62vh);
  height: min(360px, 62dvh);
  transform: translate3d(0, 36px, 0) scale(0.9);
  animation: bb-book-in 900ms cubic-bezier(.2, .8, .2, 1) forwards !important;
}
.bb-reveal-page {
  position: absolute;
  inset: 0;
  background: var(--ds-book-paper);
  border: 1px solid var(--ds-book-line-strong);
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--ds-book-lift);
}
.bb-reveal-page-kicker {
  position: absolute;
  left: 22px;
  bottom: 22px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  color: var(--ds-book-ink);
}
.bb-reveal-ribbon {
  position: absolute;
  top: 0;
  right: 28px;
  width: 14px;
  height: 56px;
  background: var(--ds-book-ribbon);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.bb-reveal-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px;
  background: var(--ds-book-leather);
  background-image: radial-gradient(120% 80% at 0 0, var(--ds-book-leather-glow) 0, transparent 55%);
  color: var(--ds-book-on-leather);
  border-radius: 2px 8px 8px 2px;
  box-shadow: var(--ds-book-panel-shadow);
  transform-origin: left center;
  animation: bb-cover-open 900ms cubic-bezier(.2, .8, .2, 1) forwards !important;
}
.bb-reveal-brand {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  animation: bb-brand-out 900ms linear forwards !important;
}
.bb-reveal-rule {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--ds-book-ribbon);
}

@keyframes bb-reveal-fade {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bb-book-in {
  0% { opacity: 0; transform: translate3d(0, 48px, 0) scale(0.88); }
  32% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 1; transform: translate3d(0, -6px, 0) scale(1.02); }
}
@keyframes bb-cover-open {
  0%, 32% { transform: translate3d(0, 0, 0) scaleX(1); }
  78%, 100% { transform: translate3d(-6%, 0, 0) scaleX(0); }
}
@keyframes bb-brand-out {
  0%, 30% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-reveal { display: none !important; }
  .td-skel-line,
  .td-skel-av,
  .td-skel-pill,
  .td-skel-btn { animation: none; }
}