/* Changelog page — filters, timeline cards + email signup (Apple-style refresh) */

/* Tighter reading column for the whole changelog stack */
.cl-controls,
#changelog-content,
.cl-signup-section { max-width: 760px; }

.cl-page-sub { margin-bottom: 4px; }

/* ── Top controls: segmented filter + notify link ───────────────── */
.cl-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px 18px; flex-wrap:wrap; margin:4px 0 30px;
}

/* iOS-style segmented control */
.cl-filter-bar{
  display:inline-flex; gap:2px; padding:4px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:999px;
}
.cl-filter-chip{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:.86rem; font-weight:500;
  padding:8px 15px; border:none; background:transparent;
  color:var(--muted); border-radius:999px; cursor:pointer;
  transition:color .18s, background .18s, box-shadow .18s;
  white-space:nowrap;
}
.cl-filter-chip:hover{ color:var(--text); }
.cl-filter-chip.active{
  background:var(--surface-2,#1c2128); color:var(--text);
  font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.35), 0 0 0 .5px rgba(255,255,255,.04);
}
.cl-filter-count{ font-size:.74rem; opacity:.55; font-variant-numeric:tabular-nums; }
.cl-filter-chip.active .cl-filter-count{ opacity:.75; }

.cl-notify-link{
  font-size:.85rem; font-weight:500; color:var(--muted);
  text-decoration:none; white-space:nowrap; transition:color .15s;
}
.cl-notify-link:hover{ color:var(--green); }

/* ── Entry cards (timeline feel) ────────────────────────────────── */
.cl-entry{
  position:relative;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px 16px 26px;
  margin:0 0 14px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.cl-entry:hover{ border-color:var(--border-strong,#30363d); transform:translateY(-1px); }
/* thin left accent, coloured by type */
.cl-entry::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px;
  width:3px; border-radius:0 3px 3px 0; background:var(--cl-accent,var(--muted));
}
.cl-entry[data-cl-type="tool"]    { --cl-accent:var(--blue); }
.cl-entry[data-cl-type="plant"]   { --cl-accent:var(--green); }
.cl-entry[data-cl-type="article"] { --cl-accent:var(--purple); }

/* heading + date sit tighter inside the card */
.cl-entry .changelog-version-heading{ margin:0 0 6px; font-size:clamp(1.05rem,2.4vw,1.25rem); }
.cl-entry .cl-released{
  margin:0 0 12px; font-size:.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; font-weight:500;
}
/* de-clutter the bullet list — no internal divider lines */
.cl-entry .cl-list{ margin:0; }
.cl-entry .cl-item{ border-bottom:none; padding:4px 0; font-size:.925rem; line-height:1.6; }
.cl-entry .cl-bullet{ color:var(--cl-accent,var(--green)); }
.cl-entry .cl-chip{ margin:10px 0 6px; }

.cl-no-matches{ padding:28px 4px; color:var(--muted); font-size:.95rem; text-align:center; }

/* Hidden by an active filter */
.cl-hide{ display:none!important; }

/* ── Older-releases archive: cards inside too ───────────────────── */
.cl-archive{ margin-top:20px; }
.cl-archive-body{ padding-top:14px; }

/* ── Email signup — refined closing card ────────────────────────── */
html{ scroll-behavior:smooth; }
.cl-signup-section{ margin:36px 0 8px; scroll-margin-top:84px; }
.cl-signup{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(63,185,80,.05), rgba(63,185,80,.015));
  border-radius:18px; padding:28px 26px;
}
.cl-signup-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green); margin:0 0 10px;
}
.cl-signup-head{ font-size:1.3rem; font-weight:700; color:var(--text); margin:0 0 6px; letter-spacing:-.01em; }
.cl-signup-sub{ font-size:.9rem; color:var(--text2); line-height:1.55; margin:0 0 18px; max-width:52ch; }

/* Topics as selectable pills (the checkbox drives an .is-on state via CSS :has) */
.cl-signup-topics{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 16px; }
.cl-topic{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.875rem; color:var(--text2);
  padding:8px 14px; border:1px solid var(--border); border-radius:999px;
  background:var(--bg); transition:border-color .15s, background .15s, color .15s;
}
.cl-topic:hover{ border-color:var(--green-border,#2d4a2d); color:var(--text); }
.cl-topic:has(input:checked),
.cl-topic.is-on{
  background:var(--green-faint,rgba(63,185,80,.09));
  border-color:rgba(63,185,80,.45); color:var(--green);
}
.cl-topic input{ width:15px; height:15px; accent-color:var(--green); cursor:pointer; margin:0; }

.cl-signup-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
/* Clean form inputs (not the calculator .tinput style) */
.cl-input{
  font:inherit; font-size:1rem; color:var(--text);
  background:var(--field-bg); border:1px solid var(--field-border);
  border-radius:var(--field-radius); padding:0 14px; text-align:left; width:100%;
  height:48px; box-sizing:border-box;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.cl-input::placeholder{ color:var(--muted); }
.cl-input:hover:not(:focus){ border-color:var(--field-border-hover); }
.cl-input:focus{ border-color:var(--blue); box-shadow:var(--focus-ring); }
.cl-signup-name{ flex:1; min-width:130px; }
.cl-signup-email{ flex:1.7; min-width:190px; }
.cl-signup-btn{ flex-shrink:0; height:48px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; }
.cl-signup-msg{ width:100%; margin:10px 0 0; font-size:.85rem; line-height:1.5; min-height:1em; }
.cl-signup-msg.ok{ color:var(--green); }
.cl-signup-msg.err{ color:#f85149; }
.cl-signup-legal{ width:100%; margin:12px 0 0; font-size:.72rem; color:var(--muted); line-height:1.5; }
.cl-honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media(max-width:640px){
  .cl-controls{ margin-bottom:22px; }
  .cl-filter-bar{ width:100%; justify-content:space-between; }
  .cl-filter-chip{ padding:8px 10px; flex:1; justify-content:center; }
  .cl-entry{ padding:18px 18px 14px 22px; border-radius:12px; }
  .cl-signup{ padding:22px 18px; border-radius:14px; }
  .cl-signup-name,.cl-signup-email,.cl-signup-btn{ flex:1 1 100%; }
}