/* ============ /mcp /skills /agents — shared section styles ============ */
/* Relies on tokens+base from globals.css; adds catalog/list/leaderboard bits. */

.sec-head { padding: 32px 0 20px; border-bottom: 1px solid var(--border); }
.sec-head h1 { font-size: 32px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 8px; display:flex; align-items:center; gap:12px; }
.sec-head .sub { font-size: 14px; color: var(--text-2); margin: 0 0 14px; max-width: 720px; line-height:1.5; }
.sec-auto { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--green); background:var(--green-soft); border:1px solid var(--green-soft); padding:4px 10px; border-radius:999px; font-weight:500; }
.sec-auto b { color:var(--green); }

.sec-filters { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0; }
.sec-chip { font-size:13px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--bg-elev); color:var(--text-2); cursor:pointer; white-space:nowrap; transition:.15s; text-decoration:none; }
.sec-chip:hover { border-color:var(--border-strong); color:var(--text); }
.sec-chip.active { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); font-weight:500; }

.sec-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:8px 0 28px; }
.sec-card { background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:12px; transition:.15s; }
.sec-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.sec-card-top { display:flex; align-items:flex-start; gap:12px; }
.sec-logo { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#fff; flex:none; }
.sec-card-id { min-width:0; flex:1; }
.sec-name { font-size:15px; font-weight:600; margin:0; line-height:1.2; overflow-wrap:anywhere; }
.sec-vendor { font-size:12px; color:var(--text-3); margin-top:2px; }
.sec-desc { font-size:13px; color:var(--text-2); line-height:1.5; margin:0; }
.sec-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sec-tag { font-size:11px; padding:3px 8px; border-radius:var(--r-sm); background:var(--bg-hover); color:var(--text-3); }
.sec-badge { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:var(--r-sm); }
.sec-badge.stdio { background:var(--blue-soft); color:var(--blue); }
.sec-badge.http  { background:var(--accent-soft); color:var(--accent); }
.sec-badge.official { background:var(--green-soft); color:var(--green); }
.sec-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:4px; }
.sec-foot.no-rating { justify-content:flex-end; }
.sec-stars { font-size:12px; color:var(--text-2); display:inline-flex; align-items:center; gap:4px; }
.sec-install { font-family:var(--font-mono); font-size:11.5px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; color:var(--text-2); overflow-x:auto; white-space:nowrap; }
.sec-package { font-family:var(--font-mono); font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-package b { color:var(--text-2); font-weight:600; margin-right:6px; }
.sec-stars-source { text-decoration:none; position:relative; z-index:2; }
.sec-stars-source:hover { color:var(--accent); }

/* Agents only: identical card footprint without changing shared MCP/Skills cards. */
.agents-grid { grid-auto-rows:272px; }
.agents-grid .sec-card { height:100%; box-sizing:border-box; overflow:hidden; }
.agents-grid .sec-name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.agents-grid .sec-desc { min-height:78px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.agents-grid .sec-tags { min-height:23px; max-height:23px; overflow:hidden; }

/* clients / install strip */
.sec-strip { margin:8px 0 28px; padding:20px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-lg); }
.sec-strip h2 { font-size:16px; margin:0 0 12px; }
.sec-clients { display:flex; flex-wrap:wrap; gap:10px; }
.sec-client { font-size:13px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text); }

/* featured (skills variant B) */
.sec-featured { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:8px 0 24px; }
.sec-fcard { background:linear-gradient(180deg,var(--accent-soft),var(--bg-elev)); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:10px; }
.sec-fcard .sec-name { font-size:17px; }

.sec-list { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin-bottom:28px; background:var(--bg-elev); }
.sec-row { display:flex; align-items:center; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); transition:.12s; }
.sec-row:last-child { border-bottom:none; }
.sec-row:hover { background:var(--bg-hover); }
.sec-row .r-logo { width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex:none; }
.sec-row .r-main { flex:1; min-width:0; }
.sec-row .r-name { font-size:14px; font-weight:600; }
.sec-row .r-desc { font-size:12.5px; color:var(--text-2); }
.sec-row .r-meta { font-size:12px; color:var(--text-3); white-space:nowrap; display:flex; gap:12px; align-items:center; }

/* tabs (agents) */
.sec-tabs { display:flex; gap:4px; padding:16px 0 4px; border-bottom:1px solid var(--border); }
.sec-tab { font-size:14px; font-weight:500; padding:8px 16px; border-radius:var(--r-md) var(--r-md) 0 0; color:var(--text-2); background:transparent; border:none; cursor:pointer; }
.sec-tab.active { color:var(--accent); border-bottom:2px solid var(--accent); }

/* leaderboard table */
.sec-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); margin:16px 0 28px; }
.sec-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
.sec-table th { text-align:left; padding:12px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); border-bottom:1px solid var(--border); background:var(--bg-elev); }
.sec-table td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); }
.sec-table tr:last-child td { border-bottom:none; }
.sec-table .rank { font-family:var(--font-mono); color:var(--text-3); width:44px; }
.sec-table .score { font-family:var(--font-mono); font-weight:600; color:var(--accent); }
.sec-table .agent { font-weight:600; }

/* company link on cards */
.sec-co { text-decoration:none; display:inline-flex; }
.sec-co .sec-logo { cursor:pointer; transition:.15s; }
.sec-co:hover .sec-logo { transform:scale(1.06); box-shadow:var(--shadow-sm); }
.sec-vendor a { color:var(--text-3); text-decoration:none; }
.sec-vendor a:hover { color:var(--accent); text-decoration:underline; }
.sec-row .r-logo { text-decoration:none; }
.sec-count { font-size:12px; color:var(--text-3); margin-left:8px; font-weight:400; }

/* real logos */
.sec-logo.hasimg { background:#fff !important; border:1px solid var(--border); padding:6px; }
.sec-logo.hasimg img { width:100%; height:100%; object-fit:contain; display:block; }
.r-logo.hasimg { background:#fff !important; border:1px solid var(--border); padding:4px; }
.r-logo.hasimg img { width:100%; height:100%; object-fit:contain; display:block; }

/* swapped logos (data-logo-slug -> img via logos.js) */
.sec-logo.img { background:#fff !important; border:1px solid var(--border); padding:6px; }
.sec-logo.img img { width:100%; height:100%; object-fit:contain; display:block; }
.r-logo.img { background:#fff !important; border:1px solid var(--border); padding:4px; }
.r-logo.img img { width:100%; height:100%; object-fit:contain; display:block; }

/* pagination */
.sec-pager { display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0 36px; flex-wrap:wrap; }
.sec-pager a, .sec-pager span { min-width:38px; height:38px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r-md); font-size:14px; color:var(--text-2); text-decoration:none; background:var(--bg-elev); }
.sec-pager a:hover { border-color:var(--border-strong); color:var(--text); }
.sec-pager .cur { background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent); font-weight:600; }
.sec-pager .disabled { opacity:.4; pointer-events:none; }
.sec-total { font-size:13px; color:var(--text-3); text-align:center; margin-bottom:14px; }

/* ===== detail page ===== */
.sd-crumbs { padding:20px 0 0; font-size:13px; color:var(--text-3); }
.sd-crumbs a { color:var(--text-2); text-decoration:none; }
.sd-crumbs a:hover { color:var(--accent); }
.sd-crumbs .sep { margin:0 8px; color:var(--text-mute); }
.sd-hero { display:flex; gap:20px; align-items:flex-start; padding:24px 0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.sd-logo { width:72px; height:72px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#fff; flex:none; }
.sd-logo.img { background:#fff !important; border:1px solid var(--border); padding:12px; }
.sd-logo.img img { width:100%; height:100%; object-fit:contain; }
.sd-hmain { flex:1; min-width:260px; }
.sd-hmain h1 { font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0 0 6px; }
.sd-hmain .sd-tag { font-size:15px; color:var(--text-2); margin:0 0 12px; line-height:1.5; }
.sd-badges { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sd-co { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:5px 12px 5px 6px; background:var(--bg-elev); }
.sd-co:hover { border-color:var(--border-strong); color:var(--text); }
.sd-co .dot { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; }
.sd-co .dot.img { background:#fff !important; border:1px solid var(--border); padding:2px; }
.sd-co .dot.img img { width:100%; height:100%; object-fit:contain; }
.sd-layout { display:grid; grid-template-columns:1fr 300px; gap:32px; padding:24px 0 40px; }
@media (max-width:820px){ .sd-layout{ grid-template-columns:1fr; } }
.sd-body h2 { font-size:18px; margin:24px 0 10px; }
.sd-body p { font-size:15px; line-height:1.65; color:var(--text); margin:0 0 12px; }
.sd-install { font-family:var(--font-mono); font-size:13px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px; color:var(--text); overflow-x:auto; white-space:nowrap; margin:6px 0 16px; }
.sd-side { }
.sd-panel { border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elev); padding:16px; margin-bottom:16px; }
.sd-panel h3 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin:0 0 12px; }
.sd-kv { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--border); }
.sd-kv:last-child { border-bottom:none; }
.sd-kv .k { color:var(--text-3); } .sd-kv .v { color:var(--text); font-weight:500; text-align:right; }
.sd-links a { display:block; font-size:14px; color:var(--accent); text-decoration:none; padding:6px 0; }
.sd-links a:hover { text-decoration:underline; }
.sd-related { display:flex; flex-direction:column; gap:8px; }
.sd-related a { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); text-decoration:none; padding:6px; border-radius:var(--r-sm); }
.sd-related a:hover { background:var(--bg-hover); }
.sd-related .rl { width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex:none; }
.sd-related .rl.img{ background:#fff!important;border:1px solid var(--border);padding:3px;} .sd-related .rl.img img{width:100%;height:100%;object-fit:contain;}

/* detail: rich install blocks */
.sd-step { font-size:13px; font-weight:600; color:var(--text-2); margin:16px 0 6px; display:flex; align-items:center; gap:8px; }
.sd-step .n { width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none; }
.sd-code { font-family:var(--font-mono); font-size:12.5px; line-height:1.55; background:#0E1116; color:#E6E8EB; border:1px solid var(--border-strong); border-radius:var(--r-md); padding:14px 16px; overflow-x:auto; white-space:pre; margin:0 0 8px; }
.sd-note { font-size:12.5px; color:var(--text-3); margin:2px 0 14px; }
.sd-tools { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.sd-tools span { font-size:12px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--bg-elev); color:var(--text-2); }

/* === UPDATES: light code, full-card click, no-logo tiles === */
.sd-code { background:var(--bg-elev); color:var(--text); border:1px solid var(--border); }
.sec-card, .sec-fcard, .sec-row { position:relative; }
.sec-card, .sec-fcard { cursor:pointer; }
.sec-row { cursor:pointer; }
.sec-stretch { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.sec-card a:not(.sec-stretch), .sec-fcard a:not(.sec-stretch), .sec-row a:not(.sec-stretch) { position:relative; z-index:2; }
.sec-logo.nologo { background:var(--bg-hover) !important; color:var(--text-3); font-weight:600; border:1px solid var(--border); }
.r-logo.nologo { background:var(--bg-hover) !important; color:var(--text-3); font-weight:600; border:1px solid var(--border); }
.sec-vendor .plain, .r-meta .plain { color:var(--text-3); }
.sd-logo.nologo { background:var(--bg-hover) !important; color:var(--text-3); border:1px solid var(--border); }
.sd-co .dot.nologo { background:var(--bg-hover) !important; color:var(--text-3); border:1px solid var(--border); }