/* ===== Roadmap 样式 v3.36 =====
 * - 移动端：单列；桌面端：Grid 双列（稳定，不抖动）
 * - 移除列宽中的 vw 参与，避免“临界抖动”
 * - 列为 border-box，右侧按钮栏 padding 被轨道宽度吸收，不再撑宽
 */

/* ---------------- 主题变量（默认：浅色） ---------------- */
:root{
    --bg-main:#f7f8fb;
    --bg-card:#ffffff; --bg-card-hover:#f2f4f7;
    --text-main:#111827; --text-muted:#6b7280; --border:#e5e7eb;
    --divider:#d1d5db;

    --accent:#ff6b81;
    --label-new:#10b981;
    --label-improve:#7c3aed;
    --label-policy:#2563eb;
    --label-important:#ef4444;

    --radius:7px;
    --gap:.75rem;
    --ri-gutter-x:1.5rem;

    /* 右侧按钮栏（列内） */
    --nav-w:40px;
    --nav-gap:28px;

    /* 每栏宽度上限（避免过宽）—— Grid 在桌面强制两列，这里决定每列最大宽度 */
    --col-max:620px;
    --col-min:360px;
}

/* ---------------- 深色主题覆盖 ---------------- */
html[data-bs-theme="dark"]{
    --bg-main:#222529;
    --bg-card:#24272d; --bg-card-hover:#2e3137;
    --text-main:#f5f6f7; --text-muted:#b1b3b8; --border:#3c4048;
    --divider:#4a4f57;

    --label-new:#22c55e;
    --label-improve:#7c3aed;
    --label-policy:#2163e8;
    --label-important:#ef4444;
}

/* ---------- 外层 ---------- */
.srmp-wrapper{
    width:100%;
    max-height:none;
    padding:1rem var(--ri-gutter-x);
    margin:auto;
    background:var(--bg-main);
    color:var(--text-main);
    overflow:visible;
    box-sizing:border-box;
    position:relative;
    z-index:0;
}
/* 容器最大宽度（与 Bootstrap 容器一致） */
@media(min-width:576px){.srmp-wrapper{max-width:540px}}
@media(min-width:768px){.srmp-wrapper{max-width:720px}}
@media(min-width:992px){.srmp-wrapper{max-width:960px}}
@media(min-width:1200px){.srmp-wrapper{max-width:1140px}}
@media(min-width:1400px){.srmp-wrapper{max-width:1320px}}

.srmp-title{
    text-align:center;
    font-size:clamp(1.1rem,4.2vw,1.55rem);
    margin:0 0 .65rem;
    font-weight:700;
}

/* ---------- 分隔线：页面水平正中心（桌面端可见） ---------- */
.srmp-wrapper::before{
    content:"";
    position:absolute;
    top:calc(1rem + 2.0rem);
    bottom:1rem;
    left:50%;
    transform:translateX(calc(50vw - 50% - 1px));
    width:2px;
    background:var(--divider);
    opacity:.9;
    pointer-events:none;
    z-index:0;
}

/* ---------- 列容器：移动端 1 列；桌面 Grid 2 列 ---------- */
.srmp-columns{
    /* 改为 Grid：彻底摆脱 Flex-wrap 抖动 */
    display:grid;
    grid-template-columns: 1fr;             /* 默认单列 */
    gap:calc(var(--gap) + 1.6rem);
    align-items:flex-start;
    justify-content:center;                 /* 让网格整体在容器中居中 */
    position:relative;
    z-index:1;
    overflow:visible;
}

/* >=992：固定双列；每列宽度 [--col-min, --col-max]；超出时整体居中 */
@media (min-width: 992px){
    .srmp-columns{
        grid-template-columns: repeat(2, minmax(var(--col-min), var(--col-max)));
        justify-content:center;
    }
}

/* ---------- 单栏：在 Grid 下不需要 flex 基础宽度 ---------- */
.srmp-col{
    box-sizing:border-box;                  /* 关键：padding 计入轨道宽 */
    min-width:0;                            /* 防止内容撑破 */
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    position:relative;

    /* 右侧按钮栏空间（被 border-box 吸收） */
    padding-right:calc(var(--nav-w) + var(--nav-gap));
}

/* ---------- 每栏标题 ---------- */
.srmp-col-title{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    text-align:center;
    padding:.45rem .6rem;
    font-size:.95rem;
    font-weight:700;
    margin-bottom:.55rem;
    padding-right:calc(.6rem + var(--nav-w) + var(--nav-gap));
}

/* ---------- 列“视窗” ---------- */
.srmp-list-wrap{
    flex:1 1 auto;
    max-height:250px;
    overflow:hidden;
    scrollbar-width:none;
    scroll-snap-type:none;
    overscroll-behavior:contain;
}
.srmp-list{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    will-change:transform;
    transition:transform .22s ease;
}

/* ---------- 卡片 ---------- */
.srmp-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:.55rem .78rem .9rem;
    position:relative;
    transition:.2s background, .2s border-color, .2s box-shadow;
}
.srmp-card:hover{background:var(--bg-card-hover)}

/* 最近项闪烁（JS 添加 .srmp-flash） */
@keyframes srmpFlash {
    0%   { box-shadow:0 0 0 0 rgba(255,107,129,0); border-color:var(--border); }
    50%  { box-shadow:0 0 0 6px rgba(255,107,129,0.28); border-color:var(--accent); background:var(--bg-card-hover); }
    100% { box-shadow:0 0 0 0 rgba(255,107,129,0); border-color:var(--border); }
}
.srmp-card.srmp-flash{ animation: srmpFlash 0.9s ease-in-out 3; }

/* ---------- 点赞按钮 ---------- */
.srmp-like{
    position:absolute;top:.55rem;left:.55rem;width:36px;height:36px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;background:none;
    border:1px solid var(--border);border-radius:6px;cursor:pointer;
}
.srmp-like .heart{font-size:.8rem;line-height:1;}
.srmp-like em{margin-top:.12rem;font-style:normal;font-size:.66rem;color:var(--text-main);}
.srmp-like:not(.srmp-liked) .heart{color:#888;}
.srmp-like.srmp-liked .heart{color:var(--accent);}
.srmp-like.srmp-liked em{color:var(--accent);}
.srmp-like[disabled]{cursor:not-allowed}

/* ---------- 标签 ---------- */
.srmp-labels{margin-left:50px;margin-bottom:.34rem;display:flex;flex-wrap:wrap;gap:.32rem}
.srmp-label{font-size:.56rem;font-weight:600;color:#fff;border-radius:4px;padding:.11rem .38rem}
.srmp-label-new{background:var(--label-new)}
.srmp-label-improvement{background:var(--label-improve)}
.srmp-label-features,.srmp-label-policy{background:var(--label-policy)}
.srmp-label-important{background:var(--label-important)}

/* ---------- 文本 & 时间 ---------- */
.srmp-card-title{margin:0 0 .24rem 50px;font-size:.88rem;font-weight:700;color:var(--text-main)}
.srmp-card-desc{margin:0 0 .48rem 50px;color:var(--text-muted);font-size:.76rem;line-height:1.4}
.srmp-dates{margin-left:50px}
.srmp-date{display:block;color:var(--text-muted);font-size:.64rem}

/* ---------- 加载 ---------- */
.srmp-loading{padding:1rem;text-align:center;font-size:.86rem;color:var(--text-muted)}

/* ---------- Skip 按钮 ---------- */
.srmp-skip{
    position:absolute;right:var(--ri-gutter-x);top:1rem;
    background:var(--bg-card-hover);color:var(--text-main);border:1px solid var(--border);
    border-radius:6px;padding:.15rem .6rem;font-size:.8rem;cursor:pointer;
    transition:.2s background, .2s border-color, .2s color;
}
.srmp-skip:hover{background:var(--bg-card)}

/* ========== 每栏右侧按钮栏（垂直居中） ========== */
.srmp-col-nav{
    position:absolute;
    right:.5rem;
    top:50%; transform:translateY(-50%);
    width:var(--nav-w);
    display:flex;flex-direction:column;gap:.55rem;align-items:center;
    z-index:2;
}
.srmp-col-nav .srmp-nav-btn{
    width:var(--nav-w);height:36px;border:1px solid var(--border);
    background:var(--bg-card);color:var(--text-main);
    border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:.9rem;line-height:1;transition:.2s background, .2s border-color, .2s color;
    user-select:none;
}
.srmp-col-nav .srmp-nav-btn:hover{background:var(--bg-card-hover)}
.srmp-col-nav .srmp-nav-btn:active{transform:translateY(1px)}
.srmp-col-nav .srmp-nav-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 小屏（隐藏中线 + 堆叠时加分隔） ---------- */
@media (max-width: 768px){
    .srmp-wrapper::before{display:none;}
    .srmp-col + .srmp-col{
        border-top:1px solid var(--divider);
        padding-top:1.1rem; margin-top:1.1rem;
    }
    :root{ --nav-w:34px; --nav-gap:20px; }
    .srmp-col-nav .srmp-nav-btn{ height:32px; font-size:.85rem; }
}