/* ==========================================================================
   changelog.css — page furniture for the GBP Changelog SEO surface
   (feed, category/attribute indexes, entity pages).

   Loaded by changelog/base.html via {% block extra_css %}, on top of
   site.css. Everything shared (tokens, typography, header, footer, .card,
   .pill, .stats, .btn, .crumbs, .eyebrow, .microcopy) comes from site.css —
   nothing here re-declares it. Every selector below is changelog-only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section sub-nav (Changes / Categories / Attributes)
   -------------------------------------------------------------------------- */
.clg-subnav{border-bottom:1px solid var(--border);background:var(--bg-soft)}
.clg-subnav .wrap{display:flex;align-items:center;gap:22px;height:46px}
.clg-subnav a{font-size:13.5px;font-weight:500;color:var(--muted);transition:color .15s}
.clg-subnav a:hover{color:var(--fg)}
.clg-subnav a.active{color:var(--accent-fg)}

/* --------------------------------------------------------------------------
   2. Page rail — the container every changelog page body sits in
   -------------------------------------------------------------------------- */
.clg-page{padding-bottom:30px}
.clg-page > h1{margin:10px 0 6px}
.clg-page > .lead{max-width:720px}
/* Stacked cards on the index / entity pages. Scoped to direct children so the
   feed's grid children (which use the grid gap) are untouched. */
.clg-page > .card{margin:18px 0}

/* --------------------------------------------------------------------------
   3. Feed hero
   -------------------------------------------------------------------------- */
/* Layered on the shared .page-hero / .stats / .microcopy — only the deltas
   live here. A look-alike clone is exactly the drift this refactor removed. */
.clg-hero{padding-left:0;padding-right:0;padding-top:54px}
.clg-hero h1{margin:20px 0 6px}
.clg-hero h1 .hl{background:linear-gradient(transparent 62%,var(--accent-bd) 62%)}
.clg-hero .lead{max-width:560px;margin:12px auto 0}
.clg-hero .microcopy{margin-top:22px}

.stats--clg{justify-content:center;gap:46px;text-align:center;margin:30px 0 0}
.stats--clg .n{font-size:46px}
.stats--clg .l{margin-top:2px}

/* --------------------------------------------------------------------------
   4. Feed layout (list + filter rail)
   -------------------------------------------------------------------------- */
.clg-layout{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start;
  margin:34px 0 70px}

.feed-head{display:flex;align-items:center;gap:14px;padding:18px 20px;
  border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.feed-head h2{font-size:16.5px}
.feed-head .n{color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
.feed-foot{padding:13px;display:flex;justify-content:center;gap:10px;align-items:center;
  color:var(--muted);font-size:13px}

/* --------------------------------------------------------------------------
   5. Search box (feed head + index pages)
   -------------------------------------------------------------------------- */
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 12px;background:var(--bg-soft);
  max-width:320px;margin:4px 0 0}
.search input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;
  width:100%;color:var(--fg)}
.search .ico{color:var(--muted)}
.feed-head .search{margin:0 0 0 auto;min-width:230px}

/* --------------------------------------------------------------------------
   6. Feed rows
   -------------------------------------------------------------------------- */
.feed-row{display:flex;align-items:center;gap:14px;padding:15px 20px;
  border-bottom:1px solid var(--border-soft)}
.feed-row:last-child{border-bottom:0}

.evt-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  flex:none;font-size:15px;font-weight:700}
.evt-ic.add{background:var(--accent-bg);color:var(--accent-fg);border:1px solid var(--accent-bd)}
.evt-ic.rem{background:var(--red-bg);color:var(--red-fg);border:1px solid var(--red-bd)}
.evt-ic.mod{background:var(--amber-bg);color:var(--amber-fg);border:1px solid var(--amber-bd)}

.what{min-width:0;flex:1}
.lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em}
.lbl.add{color:var(--accent-fg)}
.lbl.rem{color:var(--red-fg)}
.lbl.mod{color:var(--amber-fg)}
.ttl{font-weight:600;font-size:14.5px;margin-top:1px}
.ctx{color:var(--muted);font-size:12.5px;margin-top:1px}
.ctx .mono{font-size:11.5px}
.chg{font-size:12.5px;color:var(--fg-soft-2);margin-top:5px;display:flex;gap:7px;
  align-items:center;flex-wrap:wrap}
.old{font-family:var(--mono);font-size:11.5px;background:var(--red-bg);color:var(--red-fg);
  padding:2px 7px;border-radius:6px}
.new{font-family:var(--mono);font-size:11.5px;background:var(--accent-bg);color:var(--accent-fg);
  padding:2px 7px;border-radius:6px}
.where{flex:none;text-align:right;display:flex;align-items:center;gap:12px}
.where .when{color:var(--muted);font-size:12px;min-width:74px}

.empty{padding:46px 20px;text-align:center;color:var(--muted)}

/* --------------------------------------------------------------------------
   7. Filter / summary / notify panels (feed rail)
   -------------------------------------------------------------------------- */
.side{display:flex;flex-direction:column;gap:18px}
.clg-panel{padding:17px 18px}
.clg-panel h3{font-size:14.5px;margin-bottom:12px}
.clg-panel h3 .rst{float:right;font-size:12px;color:var(--muted);font-weight:400}
.clg-panel .note{color:var(--muted);font-size:12.5px;margin-bottom:11px}

.grp{margin-bottom:13px}
.grp .gt{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:7px}
.ck{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fg-soft-2);
  padding:3px 0;cursor:pointer}
.ck input{accent-color:var(--accent)}

.clg-panel select,.clg-panel .sel{width:100%;font:inherit;font-size:13.5px;padding:7px 10px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--fg-soft-2)}
.clg-panel .sel--upper{text-transform:uppercase}
.apply{width:100%;margin-top:4px}

.sum{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.sum .col-t{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
.srow{display:flex;align-items:baseline;gap:8px;padding:2.5px 0;font-size:12.5px;color:var(--muted)}
.srow b{font-size:17px;font-weight:600;color:var(--fg);min-width:26px}

.notif{display:flex;gap:9px}
.notif .btn{flex:1;padding:0 8px;font-size:12.5px}

/* --------------------------------------------------------------------------
   8. Link grids (category / attribute indexes and cross-link cards)
   -------------------------------------------------------------------------- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:2px 18px;padding:14px 18px}
.link-grid a{font-size:13.5px;color:var(--fg-soft-2);padding:4px 0;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-grid a:hover{color:var(--accent-fg)}
.link-grid .mono{font-size:11px;color:var(--muted)}
.link-grid .empty-note{padding:10px 0;color:var(--muted)}

/* fresh-change marker: modified in the last 7 days */
.recent-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f5b30b;
  margin-right:7px;vertical-align:middle;flex:0 0 auto}
.card-head .hint{float:right;font-weight:500;font-size:12.5px;color:var(--muted)}

/* --------------------------------------------------------------------------
   9. Key/value detail lists (entity pages)
   -------------------------------------------------------------------------- */
.kv{padding:6px 18px 14px;font-size:13.5px;color:var(--fg-soft-2)}
.kv .row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--border-soft)}
.kv .row:last-child{border-bottom:0}
.kv .k{min-width:150px;color:var(--muted)}
.kv .pill{margin:2px 3px 2px 0}
.kv--pills{padding-top:12px}

/* --------------------------------------------------------------------------
   10. Change-history rows (entity pages)
   -------------------------------------------------------------------------- */
.evt{display:flex;gap:12px;align-items:baseline;padding:10px 18px;
  border-bottom:1px solid var(--border-soft);font-size:13.5px}
.evt:last-child{border-bottom:0}
.evt .t{font-size:10.5px;font-weight:700;letter-spacing:.05em;min-width:150px}
.evt .t.add{color:var(--accent-fg)}
.evt .t.rem{color:var(--red-fg)}
.evt .t.mod{color:var(--amber-fg)}
.evt .when{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.evt .none{color:var(--muted)}

/* --------------------------------------------------------------------------
   11. Pager + closing line
   -------------------------------------------------------------------------- */
.pager{display:flex;justify-content:center;gap:12px;align-items:center;padding:16px;
  color:var(--muted);font-size:13px}
.clg-outro{color:var(--muted);font-size:13px}
.clg-outro a{color:var(--accent-fg)}

/* --------------------------------------------------------------------------
   12. Responsive — shared breakpoints only (900 / 760)
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .clg-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .clg-hero{padding-top:40px}
  .clg-hero-stats{gap:26px}
  .clg-hero-stats .n{font-size:36px}
  .feed-head .search{margin-left:0;min-width:0;width:100%}
  .where{flex-direction:column;align-items:flex-end;gap:4px}
}