/* The catalogue: a list people scan, so the cards are quiet and the plan badge is the loud part. */
body { margin:0; background:var(--bg); color:var(--text); line-height:1.6;
  font-family:system-ui,'Segoe UI',Roboto,sans-serif; }
#main { max-width: 980px; margin: 0 auto; padding: 22px 18px 64px; }
h1 { font-size: 30px; margin: 14px 0 8px; }
h2 { font-size: 21px; margin: 30px 0 4px; }
.lede { font-size: 16.5px; max-width: 68ch; }
.muted { color: var(--muted, #8b98a5); }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin: 18px 0 6px; }
.chip { display:inline-flex; align-items:center; min-height:40px; padding:6px 14px; border-radius:20px;
  border:1px solid var(--border, #2d3744); color:var(--muted,#8b98a5); text-decoration:none; font-size:14px; }
.chip.on { color: var(--text); border-color: var(--accent, #3fb950); }
.cards { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { border:1px solid var(--border,#2d3744); border-radius:12px; padding:14px 15px;
  background: var(--panel, #1a212b); }
.ttl { display:block; font-weight:700; color:var(--text); text-decoration:none; font-size:16px; }
.ttl:hover { color: var(--accent, #3fb950); }
.what { margin:6px 0 10px; font-size:14.5px; }
.meta { margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.badge { font-size:12px; border-radius:20px; padding:3px 9px; border:1px solid var(--border,#2d3744);
  color: var(--muted,#8b98a5); }
.badge.free { color: var(--accent,#3fb950); border-color: var(--accent,#3fb950); }
.badge.pro { color: var(--text); border-color: var(--text); }
.badge.lim { color: var(--warn,#d29922); border-color: var(--warn,#d29922); }
.note { margin:8px 0 0; font-size:13px; color:var(--muted,#8b98a5); }
.cta { margin-top: 38px; padding-top: 22px; border-top:1px solid var(--border,#2d3744);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cta h2 { width:100%; margin:0; }
.cta .muted { width:100%; margin:4px 0 8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:12px 20px; border-radius:11px; text-decoration:none; font-weight:700;
  border:1px solid var(--border,#2d3744); color:var(--text); }
.btn-primary { background:var(--accent,#3fb950); border-color:var(--accent,#3fb950); color:var(--on-accent,#0d1218); }
@media (max-width: 600px) { h1 { font-size:25px; } .cta .btn { flex:1 1 100%; } }
/* next-release §6: the file-operations table. Wider than a phone, so it scrolls inside its
   own box and the page itself never does. */
.files { margin: 36px 0 12px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border,#2d3744); border-radius: 10px; }
table.ops { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
table.ops th, table.ops td { text-align: left; vertical-align: top; padding: 10px 12px;
  border-bottom: 1px solid var(--border,#2d3744); line-height: 1.45; }
table.ops thead th { background: var(--panel-2,#243140); font-weight: 700; }
table.ops tbody th { font-weight: 700; white-space: nowrap; }
table.ops tbody tr:last-child th, table.ops tbody tr:last-child td { border-bottom: 0; }
.src-list { margin: 0 0 10px; padding-left: 1.2em; line-height: 1.6; }
.src-list li { margin-bottom: 6px; }