/* ===================  SHARED SCOPE  =================== */
.updates-changelog,
.updates-quickstart {
  --bg:      #0b0d10;
  --card:    #12161b;
  --muted:   #9aa4af;
  --text:    #e8edf2;
  --accent:  #4aa3ff;
  --chip:    #1c232b;
  --border:  #1a2230;
  color: var(--text);
}
.updates-changelog .wrap,
.updates-quickstart.wrap { max-width: 1100px; }

.muted { color: var(--muted); }

/* buttons/inputs */
.updates-changelog .btn,
.updates-quickstart .btn {
  appearance: none; background: var(--accent); color: #fff;
  border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; line-height: 1;
}
.updates-changelog .btn.secondary,
.updates-quickstart .btn.secondary { background:#2e3844; }

.select, .input {
  background: var(--card); color: var(--text); border:1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}

/* chips */
.chip {
  background: var(--chip); color: var(--muted); font-size: 12px; padding: 3px 8px;
  border-radius: 999px; border:1px solid var(--border);
}
.chip.sev-minor    { background:#13361d; color:#86efac; border-color:#1f512d; }
.chip.sev-major    { background:#3a2a12; color:#facc15; border-color:#6b4b12; }
.chip.sev-critical { background:#3a1313; color:#fca5a5; border-color:#6b1b1b; }
.chip.tag-alerts {background:#1d2a4d;color:#60a5fa;border-color:#2563eb}
.chip.tag-ops {background:#2a1d4d;color:#c084fc;border-color:#9333ea}
.chip.tag-dev {background:#1d4d3a;color:#34d399;border-color:#059669}
.chip.tag-marketing {background:#4d1d1d;color:#f87171;border-color:#dc2626}

/* toast */
.toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  background: #0f172a; color: #c7d2fe;
  border: 1px solid #334155; border-radius: 10px;
  padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 1; transform: translateY(0); transition: opacity .3s, transform .3s;
}
.toast.hide { opacity: 0; transform: translateY(6px); }

/* ===================  CHANGELOG  =================== */
.updates-changelog h1 { margin: 12px 0 16px; }

/* sticky toolbar */
.updates-changelog .toolbar.sticky {
  position: sticky;
  top: 64px; /* adjust if your site header height differs */
  z-index: 300;
  background: rgba(11,13,16,0.85);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  padding: 10px 12px;
}
.updates-changelog .toolbar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 18px;
}
.updates-changelog .toolbar .group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.updates-changelog .compact-toggle { display:inline-flex; align-items:center; gap:6px; margin-left:8px; }
.updates-changelog .compact-toggle input { transform: translateY(1px); }

.updates-changelog .spacer { flex:1 1 auto; }
.updates-changelog .sorter .select { min-width: 150px; }
.updates-changelog .input { min-width: 240px; }

/* grid that truly stacks on small screens */
.updates-changelog .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
/* Force single column on narrow viewports */
@media (max-width: 900px) {
  .updates-changelog .grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .updates-changelog .toolbar { gap: 8px; }
  .updates-changelog .input { min-width: 180px; }
}

.updates-changelog .card {
  background: var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; overflow:hidden;
}
.updates-changelog .ts { color: var(--muted); font-size: 13px; }
.updates-changelog .headline { font-size: 18px; margin: 4px 0 6px; word-break: break-word; overflow-wrap:anywhere; }
.updates-changelog .meta { display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0; }
.updates-changelog .bullets { margin:10px 0 0 18px; }

.updates-changelog .row { display:flex; align-items:center; gap:8px; margin-top:10px; }
.updates-changelog .demo {
  background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:8px;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  white-space: pre-wrap; word-break: break-word; overflow:auto; max-height:96px; max-width:100%;
  flex:1 1 auto;
}
.updates-changelog .copy {
  background: transparent; color: var(--accent); border:1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
}
.updates-changelog .doclink { margin-top:8px; }
.updates-changelog a { color: var(--accent); text-decoration: none; }

@media (max-width: 480px) {
  .updates-changelog .input { min-width: 160px; }
}

/* COMPACT MODE — denser spacing & slightly smaller fonts */
.updates-changelog.compact .toolbar.sticky { padding: 8px 10px; }
.updates-changelog.compact .btn { padding: 6px 10px; }
.updates-changelog.compact .select, 
.updates-changelog.compact .input { padding: 6px 8px; }
.updates-changelog.compact .card { padding: 12px; border-radius: 10px; }
.updates-changelog.compact .headline { font-size: 16px; margin: 2px 0 4px; }
.updates-changelog.compact .ts { font-size: 12px; }
.updates-changelog.compact .grid { gap: 12px; }
.updates-changelog.compact .demo { max-height: 84px; }

/* ===================  QUICKSTART  =================== */
.updates-quickstart h1 { margin: 12px 0 10px; }
.updates-quickstart h2 { margin-top: 20px; }
.updates-quickstart .row { display:flex; align-items:center; gap:10px; }
.updates-quickstart .demo {
  background:#0d1117; border:1px solid var(--border); border-radius:8px; padding:10px;
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  white-space: pre-wrap; overflow:auto; max-width:100%;
  flex: 1 1 auto;
}
.updates-quickstart .copy {
  background: transparent; color: var(--accent); border:1px solid var(--border);
  padding: 8px 12px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
}
.updates-quickstart .explain-list { margin-left: 18px; }