/* ================================================================
   CSS 常用技巧页专属（css-tricks.html）
   源：pages.css（原第 3331-3553 行区间内容，按需拆分）
   ================================================================ */

/* 分类粘性导航 */
.ct-nav {
    position: sticky;
    top: calc(var(--header-height) + 12px);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-24);
    border-radius: var(--radius-12);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}
.ct-nav-link {
    padding: var(--space-6) var(--space-16);
    border-radius: var(--radius-pill);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--text-secondary);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.ct-nav-link:hover {
    color: var(--primary-dark);
    background: rgba(93, 151, 67, 0.12);
}
.ct-category-title {
    margin: var(--space-32) 0 var(--space-16);
}
.ct-grid {
    display: grid;
    /* minmax(0, 1fr)：轨道允许收缩到 0，否则内部 .ct-code（white-space:pre）
       的 min-content 会把两列顶到 1270px，实测整页横向溢出 582px */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}
/* 网格项必须显式允许收缩：min-width:auto 时项的自动最小尺寸取 min-content，
   内部的 pre 代码块会把它撑爆，轨道再窄也没用 */
.ct-grid > .ct-tip,
.ct-extra-grid > article,
.ct-compat-grid > article {
    min-width: 0;
}
.ct-tip {
    position: relative; padding: var(--space-20) var(--space-20) var(--space-16) ;
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.10);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.ct-tip:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 151, 67, 0.30);
    box-shadow: 0 14px 30px rgba(93, 151, 67, 0.13);
}
.ct-tip-num {
    position: absolute;
    top: var(--space-12);
    right: var(--space-16);
    font-family: var(--font-mono);
    font-size: var(--fs-32);
    font-weight: 800;
    line-height: 1;
    color: rgba(93, 151, 67, 0.15);
    -webkit-user-select: none;
    user-select: none;
}
.ct-tip-title {
    margin-bottom: var(--space-8);
    padding-right: 52px;
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--text-primary);
}
.ct-tip-desc {
    margin-bottom: var(--space-12);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ct-code {
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: #41533a;
    white-space: pre;
    overflow-x: auto;
}
.ct-comment {
    color: #8aa07c;
    font-style: italic;
}
/* enrich */
.ct-enrich, .ct-compat {
    padding-top: var(--space-32);
    border-top: 1px dashed rgba(93, 151, 67, 0.25);
}
.ct-extra-grid, .ct-compat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}
.ct-extra-grid article, .ct-compat-grid article {
    padding: var(--space-20);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.12);
    background: rgba(255, 255, 255, 0.78);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.ct-extra-grid article:hover, .ct-compat-grid article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ct-extra-grid h3, .ct-compat-grid h3 {
    margin-bottom: var(--space-8);
    font-size: var(--fs-14);
    font-weight: 700;
    color: var(--text-primary);
}
.ct-extra-grid p, .ct-compat-grid p {
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: var(--text-secondary);
}
.ct-extra-grid pre, .ct-compat-grid pre {
    margin-top: var(--space-10);
    padding: var(--space-12);
    border-radius: var(--radius-6);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: #f8fbf4;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    line-height: var(--lh-base);
    color: #41533a;
    overflow-x: auto;
}
.ct-modern {
    display: flex;
    flex-wrap: wrap; gap: var(--space-8);
    margin-top: var(--space-16);
}
.ct-modern code {
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(93, 151, 67, 0.20);
    background: rgba(93, 151, 67, 0.08);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 600;
    color: var(--primary-dark);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.ct-modern code:hover {
    transform: translateY(-2px);
    background: rgba(93, 151, 67, 0.16);
}
.ct-troubleshoot {
    margin-top: var(--space-16);
    padding: var(--space-20) var(--space-24);
    border-radius: var(--radius-8);
    border: 1px solid rgba(93, 151, 67, 0.14);
    background: rgba(93, 151, 67, 0.05);
    counter-reset: ctstep;
}
.ct-troubleshoot h3 {
    margin-bottom: var(--space-12);
    font-size: var(--fs-15);
    font-weight: 700;
    color: var(--primary-dark);
}
.ct-troubleshoot li {
    position: relative;
    padding: 7px 0 7px 40px;
    font-size: var(--fs-13);
    line-height: var(--lh-base);
    color: var(--text-secondary);
    counter-increment: ctstep;
}
.ct-troubleshoot li::before {
    content: counter(ctstep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    font-weight: 800;
    color: var(--primary-color);
}
@media (max-width: 991px) {
    .ct-grid, .ct-extra-grid, .ct-compat-grid {
        grid-template-columns: 1fr;
    }
}
/* ================================================================
   npm 常用包推荐（np-）— 规则已拆分到 pages-npm-packages.css
   ================================================================ */