/* =============================================================================
   PeachPuffTL: status chips in story card footers
   ============================================================================= */

.pp-card-status {
  --cs-bg: rgb(251 170 143 / 24%);
  --cs-line: var(--pp-peach, #fbaa8f);
  --cs-solid: var(--pp-peach, #fbaa8f);
  --cs-ink: #4a2118;

  position: relative;
  z-index: 3; /* above a card's full-size link */
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.7em;
  color: inherit;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  background: var(--cs-bg);
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.pp-cs--ongoing { --cs-bg: rgb(248 178 67 / 24%); --cs-line: var(--pp-gold, #f8b243); --cs-solid: var(--pp-gold, #f8b243); --cs-ink: #4a2d05; }
.pp-cs--completed { --cs-bg: rgb(112 149 96 / 20%); --cs-line: var(--pp-leaf, #709560); --cs-solid: #587a4e; --cs-ink: #fff; }
.pp-cs--canceled { --cs-bg: rgb(253 112 113 / 18%); --cs-line: var(--pp-coral, #fd7071); --cs-solid: #cb2a3a; --cs-ink: #fff; }
.pp-cs--oneshot { --cs-bg: rgb(120 64 48 / 14%); --cs-line: #a47b6e; --cs-solid: #6d4b43; --cs-ink: #fff; }

.pp-card-status .card__footer-status {
  color: inherit;
}

.pp-card-status:hover,
.pp-card-status:focus-visible {
  color: var(--cs-ink);
  background: var(--cs-solid);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
  text-decoration: none;
}

.pp-card-status:focus-visible {
  outline: 2px solid var(--cs-solid);
  outline-offset: 2px;
}