/* ===== 组件库：卡片、标签、按钮、提示、表单、表格、时间线 ===== */

/* —— 卡片 —— */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

/* 整卡可点：标题链接的 ::after 铺满整卡，摘要与元信息区域同样可跳转 */
.card--clickable {
    position: relative;
    cursor: pointer;
}

.card--clickable:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

.card--clickable .card__title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
}

.card--clickable:hover .card__title a { color: var(--accent-dark); }

.card--link {
    display: block;
    color: inherit;
}

.card--link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    text-decoration: none;
    color: inherit;
}

.card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--accent-dark); }

.card__desc {
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0;
}

.card__meta {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--muted);
}

/* —— 网格 —— */
.grid {
    display: grid;
    gap: var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* —— 标签 chip —— */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    line-height: 1.7;
    white-space: nowrap;
}

.chip--accent {
    border-color: transparent;
    background: var(--accent-tint);
    color: var(--accent-dark);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* 分类标签：读者看到的是中文知识域名，不再显示 A.02 这类编码 */
.chip--topic {
    border-color: transparent;
    background: var(--accent-tint);
    color: var(--accent-dark);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* —— 状态徽标 —— */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.7;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.badge--ok { background: var(--ok-tint); color: var(--ok); }
.badge--warn { background: var(--warn-tint); color: var(--warn); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }
.badge--muted { background: var(--paper-3); color: var(--muted); }
.badge--muted::before { border-radius: 1px; }

/* —— 按钮 —— */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
    text-decoration: none;
}

.btn--primary {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #FFFFFF;
}

.btn--primary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

/* —— 筛选面板 —— */
.filter-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4);
    box-shadow: var(--shadow-sm);
}

.filter-panel__group { margin-bottom: var(--space-4); }

.filter-panel__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.filter-panel select,
.filter-panel input[type="search"] {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-panel select:focus,
.filter-panel input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* —— 提示条 —— */
.notice {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--accent-tint);
    color: var(--ink-soft);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.notice--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.notice--danger { border-left-color: var(--danger); background: var(--danger-tint); }

/* —— 元数据行 —— */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--muted);
}

/* —— 区块标题 —— */
.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-12) 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.section-title h2 {
    font-size: var(--text-xl);
}

.section-title__note {
    font-size: var(--text-sm);
    color: var(--muted);
}

/* —— 表格 —— */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--text-sm);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.data-table tr:last-child td { border-bottom: 0; }

.data-table th {
    background: var(--paper-3);
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* —— 代码块 / 模板 —— */
.code-block {
    position: relative;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brass);
    border-radius: var(--radius-md);
    background: var(--paper-3);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: 1.8;
    white-space: pre-wrap;
}

/* —— 时间线 —— */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-4);
    border-left: 2px solid var(--line-strong);
}

.timeline li {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-4);
}

.timeline li:last-child { padding-bottom: 0; }

.timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-4) - 6px);
    top: 9px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 3px var(--paper-2);
}

.timeline strong {
    font-family: var(--font-num);
    font-size: var(--text-lg);
    color: var(--accent-dark);
}