/* Case tracker. Builds on the queue page's card and row primitives. */

.cs-two {
  display: grid;
  gap: 1.4rem clamp(1.2rem, 1rem + 2vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.cs-two ul { margin: 0.4rem 0 0.5rem; padding-left: 1.1rem; line-height: 1.7; }

/* The privacy split is the most important thing on the page, so both sides get real emphasis. Colour is
   always backed by the heading text, never carrying the meaning alone. */
.cs-stay,
.cs-send {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cs-stay { color: var(--brand, #54c5fb); }
.cs-send { color: var(--accent, #fa7c56); }

.cs-grow { flex: 1 1 16rem; }

.cs-case {
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.cs-case:first-child { border-top: 0; }

.cs-head { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }

.cs-title {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: left;
  cursor: pointer;
}

.cs-title:hover { color: var(--brand, #54c5fb); }
.cs-active .cs-title { color: var(--brand, #54c5fb); }

.cs-del {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  opacity: 0.5;
  cursor: pointer;
}

.cs-del:hover { color: var(--accent, #fa7c56); opacity: 1; }

.cs-timeline { margin: 0.7rem 0 0.6rem; padding: 0; list-style: none; }

.cs-timeline li {
  display: grid;
  gap: 0.2rem 0.9rem;
  grid-template-columns: 6rem 1fr auto;
  padding: 0.35rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cs-date { font-variant-numeric: tabular-nums; opacity: 0.6; }
.cs-days { font-variant-numeric: tabular-nums; opacity: 0.75; }
.cs-now .cs-stage { font-weight: 500; color: var(--brand, #54c5fb); }

.cs-bench { margin: 0.5rem 0 0; font-size: 0.86rem; line-height: 1.6; opacity: 0.85; }
.cs-suppressed { opacity: 0.6; }

.cs-contrib {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  cursor: pointer;
}

.cs-contrib input { margin-top: 0.2rem; flex: 0 0 auto; }

@media (max-width: 560px) {
  .cs-timeline li { grid-template-columns: 1fr auto; }
  .cs-date { grid-column: 1 / -1; }
}

/* Inline links inside cards. Without this they render in the browser's default blue, which on this dark
   surface reads as a broken element rather than a link. */
.cs-update a,
.cs-privacy a {
  color: var(--brand, #54c5fb);
  text-decoration-color: rgba(84, 197, 251, 0.4);
  text-underline-offset: 0.2em;
}

.cs-update a:hover,
.cs-privacy a:hover { text-decoration-color: currentColor; }