/* =========================================
   Changelog – Intiqore (rounded, outline, open)
   Abhängig von layout.css (Tokens/Buttons/Container)
   ========================================= */

.changelog{
  --accent: var(--brand);
  --panel:  var(--surface);
  --line:   var(--border);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-xxl: 30px;
}

/* Sections */
.changelog .section{ padding-block: clamp(26px, 2vw, 64px); }

.changelog .headline{ font-weight: 900; line-height: 1.04; letter-spacing: .1px; }
.changelog .h2{ font-size: clamp(2rem, 4.6vw, 2.6rem); }
.changelog .h3{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.changelog .sub{ color: var(--muted); max-width: 72ch; }

.changelog .eyebrow{
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:800;
  color: var(--accent);
  font-size:0.8rem;
}

/* Controls */
.changelog .controls{
  display: grid;
  gap: 12px;
  margin-top: 14px;
  align-items: start;
}

@media (min-width: 880px){
  .changelog .controls{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.changelog .search input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line) 70%, var(--accent) 30%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, #000 2%), transparent);
  color: inherit;
  outline: none;
}

.changelog .search input:focus{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Pills */
.changelog .type-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content: flex-start;
}

@media (min-width: 880px){
  .changelog .type-pills{ justify-content: flex-end; }
}

.changelog .pill{
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
  cursor: pointer;
  color: inherit;
}

.changelog .pill:hover{
  border-color: color-mix(in oklab, var(--accent) 42%, var(--line));
}

.changelog .pill--active{
  border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* Latest band */
.changelog .h2--mini{ font-size: clamp(1.35rem, 3.2vw, 1.7rem); }

.changelog .outline-band{
  border: 1px solid color-mix(in oklab, var(--line) 65%, var(--accent) 35%);
  border-radius: var(--radius-xxl);
  padding: clamp(14px, 2.6vw, 22px);
  background:
    radial-gradient(520px 220px at 10% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--panel) 99%, #000 1%), transparent);
}

.changelog .latest-head{ max-width: 78ch; }

.changelog .latest-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Meta bits */
.changelog .meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}

.changelog .badge{
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--line));
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.01));
}

.changelog .tags{ display:flex; flex-wrap:wrap; gap: 6px; }
.changelog .tag{
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  border: 1px solid color-mix(in oklab, var(--line) 75%, var(--accent) 25%);
  opacity: .9;
}

/* Release list */
.changelog .release-list{
  display:grid;
  gap: 12px;
}

.changelog .outline-card{
  border: 1px solid color-mix(in oklab, var(--line) 70%, var(--accent) 30%);
  border-radius: var(--radius-xxl);
  padding: 14px;
  background:
    radial-gradient(420px 180px at 10% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, #000 2%), transparent);
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}

.changelog .outline-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 42%, var(--line));
  box-shadow: 0 12px 24px rgba(0,0,0,.24);
}

.changelog .release-title{
  margin: 8px 0 6px;
  font-weight: 900;
  line-height: 1.15;
}

.changelog .release-link{
  color: inherit;
  text-decoration: none;
}

.changelog .release-link:hover{ text-decoration: underline; }

.changelog .release-summary{
  margin: 0;
  max-width: 80ch;
}

/* Details */
.changelog .release-details{
  margin-top: 10px;
}

.changelog .release-summaryline{
  cursor: pointer;
  user-select: none;
  font-weight: 900;
  list-style: none;
}

.changelog .release-details > summary::-webkit-details-marker{ display:none; }
.changelog .release-summaryline{
  display:flex;
  gap: 10px;
  align-items: baseline;
}

.changelog .release-details[open] .release-summaryline{
  opacity: .95;
}

/* Change list */
.changelog .change-list{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.changelog .change-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 10px 12px;
  border-radius: calc(var(--radius-xxl) - 8px);
  border: 1px solid color-mix(in oklab, var(--line) 78%, var(--accent) 22%);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
}

.changelog .change-text{ color: color-mix(in oklab, var(--text, #fff) 86%, var(--muted)); }

/* Chips per type */
.changelog .chip{
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  letter-spacing: .01em;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  background: radial-gradient(240px 140px at 20% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02));
}

/* Optional: semantische Varianten (greift auch bei unbekannten Types sauber als Default) */
.changelog .chip--neu{
  border-color: color-mix(in oklab, #22c55e 55%, var(--line));
}
.changelog .chip--verbessert{
  border-color: color-mix(in oklab, #60a5fa 55%, var(--line));
}
.changelog .chip--fix,
.changelog .chip--fixes{
  border-color: color-mix(in oklab, #f59e0b 55%, var(--line));
}
.changelog .chip--security{
  border-color: color-mix(in oklab, #ef4444 55%, var(--line));
}

/* Footer row */
.changelog .release-foot{
  margin-top: 10px;
  display:flex;
  gap: 8px;
}

/* Hide filtered releases */
.changelog .is-hidden{ display: none; }

/* Reveal + Stagger */
.changelog .reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.changelog .reveal.in{ opacity: 1; transform: none; }
.changelog [data-stagger] > *{ --i: 0; transition-delay: calc(var(--i) * 80ms); }

/* Accessibility helpers */
.changelog .sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  .changelog *{ transition: none !important; animation: none !important; }
}