/**
 * sg.css — 校内成绩页（school_grades.html）结构样式
 * 蓝图条款：adaptive-learning-loop/闭环落地文档.md §3.2 v2.8-S ③ 校内成绩锚点 / D14 数据契约
 * 色值口径：锁定双色亮色 token 值；css/xms-theme-dual.css 合入本分支后同名变量自动接管。
 *   变量名取自该主题文件亮色块真名（--accent / --accent-2 / --line / --mute / --card / --ink /
 *   --soft / --primary-btn / --radius-*），fallback 写亮色锁定值：主 #ec4899 / 深 #db2777 /
 *   线 #ebe6e0 / 灰字 #78716c——与页面 SVG 内已用色一致。合入后暗色由主题文件同名变量接管，
 *   故此处不再自造第三主色、不写暗色值。
 * 注：school_grades.html 里的 ../../css/xms-theme-dual.css 现为死链（本工作树无该文件），
 *     它是合入时的 token 挂钩，按约定保留，不注释、不删。
 */

html { -webkit-text-size-adjust: 100%; }

/* hidden 属性优先于本文件的 display 规则（面板/SVG 容器的显示隐藏靠 hidden 切换） */
[hidden] { display: none !important; }

body {
    margin: 0 auto;
    padding: 20px 20px 48px;
    max-width: 880px;
    font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink, #1c1917);
    background: var(--bg, #f7f4f1);
}

/* ── 头部 ── */
.sg-head { margin: 0 0 16px; }
.sg-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--accent-2, #db2777); }
.sg-sub { margin: 0; color: var(--mute, #78716c); font-size: 12px; }

/* ── tabs ── */
.sg-tabs { display: flex; gap: 8px; margin: 0 0 16px; border-bottom: 1px solid var(--line, #ebe6e0); }
.sg-tab {
    appearance: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-ctrl, 12px) var(--radius-ctrl, 12px) 0 0;
    padding: 8px 18px;
    font: inherit;
    color: var(--mute, #78716c);
    background: transparent;
    cursor: pointer;
}
.sg-tab:hover { color: var(--accent-2, #db2777); }
.sg-tab.is-active {
    color: var(--accent-2, #db2777);
    font-weight: 600;
    background: var(--card, #ffffff);
    border-color: var(--line, #ebe6e0);
    margin-bottom: -1px;
}

/* ── 面板 / 行 / 卡片 ── */
.sg-panel { display: block; }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sg-row label { color: var(--mute, #78716c); }
.sg-card {
    margin: 0 0 18px;
    padding: 16px;
    background: var(--card, #ffffff);
    border: 1px solid var(--line, #ebe6e0);
    border-radius: var(--radius-card, 16px);
}
.sg-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

/* ── 表单 ── */
.sg-grid { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 8px; margin: 0 0 10px; }
.sg-grid label { color: var(--mute, #78716c); }
.sg-grid input, .sg-grid select, .sg-row select, .sg-score-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font: inherit;
    color: inherit;
    background: var(--soft, #fdf2f8);
    border: 1px solid var(--line, #ebe6e0);
    border-radius: var(--radius-ctrl, 12px);
}
.sg-grid input:focus, .sg-grid select:focus, .sg-row select:focus, .sg-score-input:focus {
    outline: 2px solid var(--accent, #ec4899);
    outline-offset: 1px;
}

/* ── 按钮 ── */
.sg-btn {
    appearance: none;
    padding: 8px 18px;
    font: inherit;
    font-weight: 600;
    color: var(--ink, #1c1917);
    background: var(--card, #ffffff);
    border: 1px solid var(--line, #ebe6e0);
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
}
.sg-btn:hover { border-color: var(--accent, #ec4899); color: var(--accent-2, #db2777); }
.sg-btn-primary {
    color: #ffffff;
    border-color: transparent;
    background: var(--primary-btn, linear-gradient(135deg, #ec4899, #f59e0b));
}

/* ── 表格 ── */
.sg-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.sg-table th, .sg-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--line, #ebe6e0);
}
.sg-table th { color: var(--mute, #78716c); font-weight: 600; font-size: 12px; }
.sg-table td.sg-name { width: 40%; }
.sg-score-input { max-width: 160px; }

/* ── 状态行 / 说明 ── */
.sg-status { min-height: 20px; margin: 0 0 12px; color: var(--mute, #78716c); font-size: 13px; }
.sg-status[data-state="ok"] { color: var(--accent-2, #db2777); }
.sg-status[data-state="error"] { color: var(--warn, #dc2626); }
.sg-note { margin: 0 0 12px; color: var(--mute, #78716c); font-size: 12px; }

/* ── 曲线 SVG 容器与图元（token 同色接管：CSS 优先于 SVG 表现属性，合入后随主题变色） ── */
.sg-curve {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 0 8px;
    background: var(--card, #ffffff);
    border: 1px solid var(--line, #ebe6e0);
    border-radius: var(--radius-card, 16px);
}
.sg-grid-line { stroke: var(--line, #ebe6e0); }
.sg-axis-label, .sg-axis-x { fill: var(--mute, #78716c); }
.sg-line { stroke: var(--accent, #ec4899); }
.sg-point { fill: var(--accent, #ec4899); }
.sg-point-label { fill: var(--accent-2, #db2777); }