/**
 * design_system.css
 *
 * 版本: 1.0
 * 描述: 法律网站 (Laws V2) 的核心设计系统文件。
 *      它定义了设计变量 (Tokens)、全局样式、布局、工具类和可复用的UI组件。
 *
 * --- 结构目录 ---
 * 1. DESIGN TOKENS
 *    - 颜色 (Colors)
 *    - 尺寸与间距 (Sizing & Spacing)
 *    - 阴影 (Shadows)
 *    - 字体 (Typography)
 * 2. GLOBAL STYLES
 *    - 基础重置与全局字体
 * 3. UTILITY CLASSES
 *    - 辅助工具类
 * 4. LAYOUT
 *    - 页面主布局
 * 5. COMPONENTS
 *    - 面板 (Panel)
 *    - 按钮 (Buttons)
 *    - 标签 (Chips & Tags)
 *    - 侧边栏 (Sidebar)
 *    - 工具栏与视图切换 (Toolbar & View Switcher)
 *    - 卡片 (Cards)
 *    - 时间轴 (Timeline)
 *    - 分页 (Pagination)
 *    - 其他UI元素 (Back to Top, etc.)
 * 6. RESPONSIVE DESIGN
 *    - 响应式媒体查询
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* 1.1 Colors - 定义了整个UI的色板 */
    --color-primary: #798095;
    --color-primary-hover: #626778;
    --color-primary-bg: rgba(121, 128, 149, 0.1);
    /* 用于柔和的背景或辉光 */
    --color-text: #2c2d41;
    --color-text-sub: #5a6272;
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-border: #e2e6ee;
    --color-accent: rgb(255, 255, 0);
    --color-danger: #d93025;

    /* Status Colors - 状态颜色的语义化变量 */
    --color-status-valid-bg: #e4f7ef;
    --color-status-valid-text: #137349;
    --color-status-expired-bg: #eceef0;
    --color-status-expired-text: #5f6670;
    --color-status-pending-bg: #fff4d6;
    --color-status-pending-text: #9a6b00;
    --color-status-core-text: #523f00;

    /* 1.2 Sizing & Spacing - 统一的尺寸和间距单位 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-full: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* 1.3 Shadows - 标准化的阴影效果 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.1);

    /* 1.4 Typography - 字体大小规范 */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-base: 14px;
    --font-md: 16px;
    --font-lg: 20px;
    --font-xl: 28px;
}

/* ==========================================================================
   2. GLOBAL STYLES
   ========================================================================== */

body.laws-v2 {
    background: var(--color-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--color-text);
    font-size: var(--font-base);
    line-height: 1.6;
}

.laws-v2 *,
.laws-v2 *::before,
.laws-v2 *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */

.lw-flex {
    display: flex;
}

.lw-col {
    display: flex;
    flex-direction: column;
}

.lw-gap {
    gap: var(--space-3);
}

.lw-scroll {
    overflow: auto;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.laws-v2-layout {
    display: flex;
    gap: var(--space-6);
    width: 92%;
    max-width: 1480px;
    margin: 30px auto 80px;
    align-items: flex-start;
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* 5.1 Panel - 通用面板/容器样式 */
.lw-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}

/* 5.2 Buttons - 按钮组件 */
.lw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 6px 14px;
    font-size: var(--font-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    text-decoration: none;
}

.lw-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.lw-btn:active {
    transform: scale(0.99);
}

.lw-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.lw-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.lw-btn.primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.lw-btn.ghost {
    background: transparent;
    border-color: transparent;
}

.lw-btn.ghost:hover {
    background: var(--color-primary-bg);
    border-color: transparent;
    color: #ef4444;
}

/* 5.3 Chips & Tags - 筛选屑片与状态标签 */
.lw-chips,
.lw-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.lw-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: #eef1f6;
    color: var(--color-text-sub);
    padding: 4px 10px;
    font-size: var(--font-xs);
    border-radius: var(--radius-full);
}

.lw-chip .x {
    cursor: pointer;
    transition: color 0.2s;
}

.lw-chip .x:hover {
    color: var(--color-danger);
}

.lw-chip-clear {
    background: rgba(217, 48, 37, 0.1);
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}

.lw-status-pill {
    font-size: var(--font-xs);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.lw-status-pill.valid {
    background: var(--color-status-valid-bg);
    color: var(--color-status-valid-text);
}

.lw-status-pill.expired {
    background: var(--color-status-expired-bg);
    color: var(--color-status-expired-text);
}

.lw-status-pill.pending {
    background: var(--color-status-pending-bg);
    color: var(--color-status-pending-text);
}

.lw-mini-tag {
    background: #eef1f6;
    color: #495464;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.lw-mini-tag.core {
    background: var(--color-accent);
    color: var(--color-status-core-text);
}

/* 5.4 Sidebar - 筛选侧边栏 */
.lw-filter-sidebar {
    width: 280px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lw-filter-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.lw-filter-block header {
    font-size: var(--font-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.lw-filter-block .items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
 
.lw-filter-block .items label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.lw-filter-block .items label:hover {
    background: #f0f3f7;
}

/* 5.5 Toolbar & View Switcher - 内容区工具栏 */
.lw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.lw-toolbar .left {
    font-size: var(--font-sm);
    color: var(--color-text-sub);
}

.lw-toolbar select {
    padding: 6px 10px;
    font-size: var(--font-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.lw-view-switch {
    display: flex;
    gap: 6px;
    margin-bottom: var(--space-3);
}

.lw-view-tab {
    padding: 8px 18px;
    font-size: var(--font-sm);
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-surface);
    transition: 0.18s;
}

.lw-view-tab.active,
.lw-view-tab:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* 5.6 Cards - 结果卡片 */
.lw-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lw-law-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.25s, transform 0.22s;
}

.lw-law-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.lw-law-card header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.lw-law-title {
    font-size: var(--font-md);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
    text-decoration: none;
}

.lw-law-title:hover {
    text-decoration: underline;
}

.lw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--font-sm);
    color: var(--color-text-sub);
}

.lw-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lw-abstract {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-sub);
}

/* 5.7 Timeline - 时间轴视图 */
.lw-timeline {
    position: relative;
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lw-tl-year {
    position: relative;
}

.lw-tl-year>h3 {
    font-size: 18px;
    margin: 0 0 10px;
    font-weight: 600;
    cursor: pointer;
}

.lw-tl-year.collapsed .lw-tl-nodes {
    display: none;
}

.lw-tl-year::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 6px;
    bottom: 0;
    width: 2px;
    background: #d8dde3;
}

.lw-tl-node {
    position: relative;
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.25s, transform 0.22s;
}

.lw-tl-node:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.lw-tl-node::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-surface);
}

.lw-tl-node.expired::before {
    background: #9fa6b2;
}

.lw-tl-node.pending::before {
    background: var(--color-accent);
}

.lw-tl-date {
    font-size: var(--font-xs);
    color: var(--color-text-sub);
}

.lw-tl-title a {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.lw-tl-title a:hover {
    text-decoration: underline;
}

/* 5.8 Pagination - 分页 */
.lw-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: var(--space-8) 0;
    flex-wrap: wrap;
}

.lw-page-btn {
    min-width: 34px;
    padding: 6px 10px;
    font-size: var(--font-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: 0.18s;
}

.lw-page-btn.active,
.lw-page-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* 5.9 Other UI Elements - 其他UI元素 */
.lw-back-top {
    position: fixed;
    right: 26px;
    bottom: 40px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    font-size: 18px;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
}

.lw-back-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.lw-back-top:hover {
    background: var(--color-primary-hover);
}

.lw-back-top:active {
    transform: scale(0.9);
}

.lw-filter-toggle {
    display: none;
    /* Initially hidden, shown in media query */
    position: fixed;
    left: 14px;
    bottom: 30px;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 98;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1100px) {
    .laws-v2-layout {
        flex-direction: column;
    }

    .lw-filter-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        width: 100%;
        flex: unset;
    }
}

@media (max-width: 680px) {
    .lw-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .lw-view-switch {
        flex-wrap: wrap;
    }

    .lw-law-card {
        padding: var(--space-3);
    }

    .lw-filter-sidebar {
        display: none;
        /* Recommended: pair with JS to show/hide in a modal/drawer */
    }

    .lw-filter-toggle {
        display: inline-flex;
    }
}