/* Late Shift preview cards (Juno, 2026-10-08).
   Link after late-shift.css. Every rule is under #late-shift.
   Shift cards: a slot-color stripe, a number chip, a serif title, the calls under a dashed rule.
   Slot colors run gold, teal (door-1), pink, purple, the Bot Forge order.
   Chips take dark type on gold, teal and pink, light type on purple and on Classic's dark teal.
   The number comes from data-card on the li ("01", "04", "07"). Without it, a counter numbers them. */

#late-shift .ls-cards { counter-reset: ls-card; }
#late-shift .ls-card {
  --sc: var(--gold);
  --sc-ink: var(--ink);
  counter-increment: ls-card;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 2px solid var(--ink);
  border-top: 8px solid var(--sc);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--paper-deep);
}
#late-shift .ls-card:nth-child(4n+2) { --sc: var(--door-1); }
#late-shift .ls-card:nth-child(4n+3) { --sc: var(--pink); }
#late-shift .ls-card:nth-child(4n+4) { --sc: var(--purple); --sc-ink: #fff; }
html[data-theme="classic"] #late-shift .ls-card:nth-child(4n+2) { --sc-ink: #fff; }

#late-shift .ls-card::before {
  content: counter(ls-card, decimal-leading-zero);
  align-self: flex-start;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: var(--sc);
  color: var(--sc-ink);
  font: 700 0.78rem/1 var(--font-sans);
  letter-spacing: 0.08em;
}
#late-shift .ls-card[data-card]::before { content: attr(data-card); }

#late-shift .ls-card h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink);
}
#late-shift .ls-card .ls-card-setup {
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
#late-shift .ls-card .ls-card-calls {
  margin: auto 0 0.75rem;
  padding-top: 0.7rem;
  border-top: 2px dashed var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
}
#late-shift .ls-card .ls-card-source {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap, 2.75rem);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--link);
}
#late-shift .ls-card .ls-card-source:hover { color: var(--link-hover); }