/* ============================================================
   专业录取分数明细浮层 · major-scores-modal.css
   Hallmark · genre: modern-minimal · theme: xyt-edu-platform
   taste-skill dials: VARIANCE 3 / MOTION 2 / DENSITY 6
   设计取向：编辑式排版 · 克制横线（仅表头下一条与行分隔细线）
             · 偏大弹窗（960px） · 等宽数字 · 留白充足
   ============================================================ */

.msm {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5, 20px);
}
.msm[hidden] { display: none; }

html.msm-lock,
html.msm-lock body { overflow: hidden; }

.msm-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    transition: opacity 220ms ease;
}
.msm.is-open .msm-scrim { opacity: 1; }

.msm-panel {
    position: relative;
    width: min(960px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e6e9ef);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-2xl, 0 24px 64px rgba(15, 23, 42, 0.22));
    opacity: 0;
    transform: translateY(8px) scale(0.99);
    transition: opacity 220ms ease, transform 220ms ease;
}
.msm.is-open .msm-panel { opacity: 1; transform: none; }
.msm-panel:focus { outline: none; }
.msm-panel ::selection { background: var(--color-primary-ring-strong, #dbeafe); color: var(--color-foreground, #0f172a); }

/* ---------- 头部 ---------- */
.msm-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px) var(--space-6, 24px);
    /* 克制：仅一条浅色发丝线作分区，不用黑色粗线 */
    border-bottom: 1px solid var(--color-border, #e6e9ef);
}
.msm-head-text { flex: 1 1 auto; min-width: 0; }
.msm-title {
    font-family: var(--font-heading, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-foreground, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}
.msm-sub {
    margin: var(--space-1, 4px) 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-secondary, #64748b);
    overflow-wrap: anywhere;
}
.msm-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--color-text-secondary, #64748b);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.msm-close:hover { background: var(--color-background, #f1f5f9); color: var(--color-foreground, #0f172a); border-color: var(--color-border, #e6e9ef); }
.msm-close:active { transform: translateY(1px); }
.msm-close:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }

/* ---------- 主体 ---------- */
.msm-body {
    overflow: auto;
    padding: var(--space-3, 12px) var(--space-6, 24px) var(--space-6, 24px);
}
.msm-body:focus { outline: none; }
.msm-body::-webkit-scrollbar { width: 10px; height: 10px; }
.msm-body::-webkit-scrollbar-track { background: transparent; }
.msm-body::-webkit-scrollbar-thumb {
    background: var(--color-border, #e6e9ef);
    border-radius: 999px;
    border: 3px solid var(--color-surface, #fff);
}

/* ---------- 表格 ---------- */
.msm-table-wrap { width: 100%; overflow-x: auto; }
.msm-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-family: var(--font-body, inherit);
    font-size: 0.9rem;
    line-height: 1.4;
}
.msm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface, #fff);
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary, #64748b);
    padding: var(--space-3, 12px) var(--space-3, 12px);
    /* 唯一一条稍明显的横线：表头下沿 */
    border-bottom: 1px solid var(--color-border, #e6e9ef);
    white-space: nowrap;
}
.msm-table thead th.num { text-align: right; }
.msm-table tbody td {
    padding: var(--space-3, 12px) var(--space-3, 12px);
    /* 克制：仅行与行之间的浅色发丝线，末行去线 */
    border-bottom: 1px solid var(--color-line, var(--color-border, #eef1f6));
    color: var(--color-foreground, #0f172a);
    vertical-align: middle;
}
.msm-table tbody tr:last-child td { border-bottom: none; }
.msm-table tbody tr:hover td { background: var(--color-background, #f8fafc); }

.msm-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
}
.msm-table .msm-code {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #64748b);
    white-space: nowrap;
}
.msm-table .msm-name {
    font-weight: 600;
    color: var(--color-foreground, #0f172a);
    white-space: nowrap;
}
.msm-table .msm-muted {
    color: var(--color-text-secondary, #64748b);
    min-width: 6rem;
}

/* ---------- 状态（加载 / 空 / 锁定 / 错误）---------- */
.msm-skel { padding: var(--space-4, 16px) 0; }
.msm-skel-bar {
    height: 14px; width: 40%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-background, #eef2f7) 25%, var(--color-border, #e2e8f0) 37%, var(--color-background, #eef2f7) 63%);
    background-size: 400% 100%;
    animation: msm-shimmer 1.3s ease infinite;
    margin-bottom: var(--space-5, 20px);
}
.msm-skel-rows { display: grid; gap: var(--space-3, 12px); }
.msm-skel-row {
    height: 30px; border-radius: 8px;
    background: linear-gradient(90deg, var(--color-background, #eef2f7) 25%, var(--color-border, #e2e8f0) 37%, var(--color-background, #eef2f7) 63%);
    background-size: 400% 100%;
    animation: msm-shimmer 1.3s ease infinite;
}
@keyframes msm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .msm-skel-bar, .msm-skel-row { animation: none; }
}

.msm-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2, 8px);
    padding: var(--space-12, 48px) var(--space-6, 24px);
}
.msm-state-icon {
    color: var(--color-text-secondary, #94a3b8);
    display: inline-flex;
}
.msm-state--locked .msm-state-icon { color: var(--color-primary, #2563eb); }
.msm-state--error  .msm-state-icon { color: var(--color-danger, #dc2626); }
.msm-state-title { margin: 0; font-family: var(--font-heading, inherit); font-size: 1.05rem; font-weight: 700; color: var(--color-foreground, #0f172a); }
.msm-state-desc { margin: 0; font-size: 0.9rem; color: var(--color-text-secondary, #64748b); max-width: 38ch; }

.msm-cta {
    margin-top: var(--space-3, 12px);
    display: inline-flex;
    align-items: center;
    padding: var(--space-2, 8px) var(--space-5, 20px);
    background: var(--color-primary, #2563eb);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}
.msm-cta:hover { background: var(--color-primary-hover, #1d4ed8); }
.msm-cta:active { transform: translateY(1px); }
.msm-cta:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }

.msm-retry {
    margin-top: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-5, 20px);
    background: transparent;
    border: 1px solid var(--color-border, #e6e9ef);
    border-radius: var(--radius-md, 10px);
    color: var(--color-foreground, #0f172a);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.msm-retry:hover { background: var(--color-background, #f1f5f9); border-color: var(--color-muted, #cbd5e1); }
.msm-retry:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }

/* ---------- 移动端：底部抽屉式 ---------- */
@media (max-width: 640px) {
    .msm { padding: 0; align-items: flex-end; }
    .msm-panel {
        width: 100%;
        max-height: 90vh;
        border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
        transform: translateY(12px);
    }
    .msm.is-open .msm-panel { transform: none; }
    .msm-head { padding: var(--space-4, 16px); }
    .msm-body { padding: var(--space-2, 8px) var(--space-4, 16px) var(--space-4, 16px); }
}
@media (prefers-reduced-motion: reduce) {
    .msm-panel, .msm-scrim { transition-duration: 1ms; }
    .msm-panel { transform: none; }
}