/* realizacja-status.css - campaign status panel (templates/public/_campaign_status.html) and the
   state badge (_status_badge.html), layered on tokens.css + realizacja.css. Used by the
   /realizacja "used" view (every Spotify order) and the 2+1 hub cards (formularze.css).
   Look: Claude Design 2026-10-19, formularze-2plus1 frames A/B/E. Days only: the exact end hour
   of a campaign is unknown, so the countdown never shows hours. */

.cs-card { max-width: 520px; }

/* ── state badge: "w trakcie" always ice, "zakończony" green, "do wykorzystania" 2+1 gradient ── */
.cs-state {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
}
.cs-state i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.cs-state svg { flex: none; }
.cs-state--live {
  color: var(--ice);
  background: rgba(125,211,252,0.10);
  border-color: rgba(125,211,252,0.32);
}
.cs-state--live i {
  background: var(--ice);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.2);
  animation: cs-pulse 2s ease-in-out infinite;
}
.cs-state--done {
  color: var(--st-fulfilled);
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.3);
}
.cs-state--free {
  color: #1a0d04;
  background: linear-gradient(135deg, #fdba74 0%, #fb923c 52%, #f97316 100%);
  border-color: transparent;
  font-weight: 700;
}
.cs-state--wait i { border: 1.5px solid var(--text-2); }
.cs-state--off { color: var(--text-2); background: transparent; border-color: var(--line); }
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(125,211,252,0.25); }
  50% { box-shadow: 0 0 0 6px rgba(125,211,252,0); }
}

/* ── panel ── */
.cs {
  display: grid;
  margin: 0 0 var(--sp-6);
  padding: 20px 22px 22px;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.cs--running {
  border-color: rgba(125,211,252,0.35);
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(125,211,252,0.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
}
.cs--in-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.cs-head { display: flex; margin-bottom: 16px; }
/* The standalone panel (used view) keeps sentence case: it is the page's status line. */
.cs-head .cs-state { text-transform: none; }

.cs-track {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cs--ended .cs-track { opacity: 0.85; }
.cs-cover {
  display: block;
  width: 56px; height: 56px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--surface-3);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cs-cover--empty {
  display: grid; place-items: center;
  background: linear-gradient(145deg, hsl(205 70% 52%), hsl(239 62% 30%));
}
.cs-cover--empty svg { fill: rgba(255,255,255,0.55); }
.cs-meta { display: grid; gap: 1px; min-width: 0; }
.cs-title,
.cs-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-title { color: var(--text); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }
a.cs-title:hover { color: var(--ice); }
.cs-artist { color: var(--text-1); font-size: 13.5px; }

/* where the campaign is: running countdown, ended date, waiting note */
.cs-camp {
  margin-top: 18px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(125,211,252,0.18);
  border-radius: 14px;
  background: rgba(125,211,252,0.06);
}
.cs-camp-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice);
}
.cs-camp-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px; }
.cs-camp-v small { font-size: 14px; font-weight: 500; color: var(--text-1); }
.cs-camp-v b {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cs-bar {
  position: relative;
  height: 6px;
  margin-top: 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.cs-bar span {
  position: absolute; inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ice-1), var(--ice-hi));
}
.cs-bar.is-done span { background: rgba(52,211,153,0.55); }
.cs-camp-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}
.cs-camp-meta b { color: var(--text); font-weight: 600; }
.cs-camp-end { margin-left: auto; }
.cs-camp.is-done,
.cs-camp.is-wait { background: rgba(255,255,255,0.03); border-color: var(--line); }
.cs-camp.is-done .cs-camp-k,
.cs-camp.is-wait .cs-camp-k { color: var(--text-2); }
.cs-camp.is-done .cs-camp-v b,
.cs-camp.is-wait .cs-camp-v b { font-size: 22px; color: var(--text-1); }
.cs-camp-copy { margin: 6px 0 0; color: var(--text-1); font-size: 13.5px; line-height: 1.45; }
.cs-camp-copy:first-child { margin-top: 0; }

.cs-report {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin: 4px 0 -10px;
  color: var(--ice);
  font-size: 13px;
  font-weight: 600;
}
a.cs-title:focus-visible,
.cs-report:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 2px; }

.cs-foot { font-size: 13px; }

@media (max-width: 760px) {
  .cs-camp-v b { font-size: 26px; }
  /* 44 px tap target for the track link without moving the text */
  a.cs-title { padding: 11px 0; margin: -11px 0; }
}
@media (max-width: 540px) {
  .center-card.cs-card { padding: var(--sp-8) var(--sp-5); }
  .cs:not(.cs--in-card) { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-state--live i { animation: none; }
}