/**
 * changelog.css
 *
 * Changelog drawer — rendered by template-parts/changelog-drawer.php.
 * Enqueued only on singular pages alongside changelog.js.
 *
 * @package BeatTheFish
 * @since   2.1.0
 */

.cl-drawer {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cl-drawer.open { max-height: 500px; }

.cl-drawer-inner {
  background: var(--changelog-bg);
  box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.1),
              inset 0 2px 6px rgba(0, 0, 0, 0.06),
              inset 0 -8px 20px rgba(0, 0, 0, 0.1),
              inset 0 -2px 6px rgba(0, 0, 0, 0.06);
  padding: 8px 0 12px;
}

.cl-drawer-label {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink3);
  padding: 20px 0 10px;
}

.cl-drawer-rows {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.cl-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 11px 0;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.cl-row:last-child { border-bottom: none; }

.cl-drawer .cl-row {
  background: none;
  padding: 10px 0;
}

.cl-drawer .cl-row:last-child { padding-bottom: 15px; border-bottom: none; }

.cl-date {
  grid-row: 1; grid-column: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--ink3);
}

.cl-text { grid-row: 2; grid-column: 1 / -1; font-size: 0.84rem; color: var(--ink2); }
.cl-tags { grid-row: 1; grid-column: 2; display: flex; gap: 5px; flex-shrink: 0; justify-self: end; }

@media (min-width: 600px) {
  .cl-row  { grid-template-columns: 100px 1fr auto; gap: 14px; }
  .cl-date { grid-row: auto; grid-column: auto; }
  .cl-text { grid-row: auto; grid-column: auto; }
  .cl-tags { grid-row: auto; grid-column: auto; justify-self: auto; }
}

.cl-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  border: none;
  box-shadow: none;
}

.tag-score    { background: rgba(34, 113, 177, 0.12); color: #1a5a8a; }
.tag-terms    { background: rgba(214, 54, 56, 0.10); color: #a82d2e; }
.tag-bonus    { background: rgba(13, 115, 119, 0.10); color: #0a5c5f; }
.tag-content  { background: rgba(140, 94, 0, 0.10);  color: #7a5200; }
.tag-factual  { background: rgba(110, 74, 180, 0.10); color: #5a3d96; }
.tag-games    { background: rgba(110, 74, 180, 0.08); color: #5a3d96; }
.tag-payments { background: rgba(0, 163, 42, 0.10);  color: #1a7a2e; }
.tag-other    { background: rgba(102, 102, 102, 0.10); color: #666; }
.tag-ai       { background: rgba(102, 102, 102, 0.10); color: #666; }

.cl-chevron-svg { transition: transform 0.3s; display: inline-block; }

.cl-drawer.open ~ .author-bar #cl-chevron,
#cl-toggle-btn[aria-expanded="true"] #cl-chevron {
  transform: rotate(180deg);
}

.cl-drawer .cl-row.cl-empty {
  display: block;
  grid-template-columns: none;
  color: var(--ink4);
  font-size: 0.88rem;
  font-style: italic;
}