/* ============================================================
   分数查学校
   ------------------------------------------------------------
   只在 score.html 加载（通过 {% block head %} 引入），
   因此移动端规则写在本文件内，不依赖 responsive.css。

   只引用 tokens.css 的变量，不写死色值——check.py 会扫这一份。
   ============================================================ */

.sc-note{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-6)}

.sc-input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);margin:0 0 var(--s-5)}
.sc-input label{display:block;font-size:var(--f-sm);font-weight:600;color:var(--ink);
  margin-bottom:var(--s-2)}
.sc-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.sc-total{font-size:var(--f-sm);color:var(--muted)}
.sc-quick{margin:var(--s-3) 0 0;font-size:var(--f-xs);color:var(--muted)}

.sc-summary{margin:0 0 var(--s-4);font-size:var(--f-sm);color:var(--muted)}
.sc-summary b{color:var(--ink);font-size:var(--f-md)}
/* 非法输入：用红色把「这不是结果，是错误」说清楚，别让家长把全量列表当结论 */
.sc-summary.is-error{color:var(--red);background:var(--red-bg);
  border-radius:var(--r-md);padding:var(--s-2) var(--s-3);font-weight:600}

.sc-band{margin:0 0 var(--s-6)}
.sc-band h2{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  margin:0 0 var(--s-3);font-size:var(--f-lg);padding-left:var(--s-3);
  border-left:3px solid var(--line-strong)}
.sc-band h2 span{font-size:var(--f-xs);color:var(--muted);font-weight:400}
/* 三档用左侧色条区分：保底偏绿、较稳偏蓝、临界偏琥珀。
   颜色不是唯一线索——每张卡右侧都写了具体分差。 */
.sc-band:nth-of-type(1) h2{border-left-color:var(--green)}
.sc-band:nth-of-type(2) h2{border-left-color:var(--accent)}
.sc-band:nth-of-type(3) h2{border-left-color:var(--amber)}

.sc-grid{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sc-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);
  align-items:baseline;padding:var(--s-3) var(--s-4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);color:var(--text);
  transition:border-color var(--t-fast),background var(--t-fast)}
.sc-card:hover{border-color:var(--accent);background:var(--accent-weak);text-decoration:none}
.sc-name{font-size:var(--f-sm);font-weight:600;color:var(--ink);line-height:1.5;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sc-meta{grid-column:1;font-size:var(--f-2xs);color:var(--muted)}
.sc-line{grid-column:1;font-size:var(--f-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;margin-top:2px}
.sc-val{margin-right:var(--s-2)}
.sc-val i{font-style:normal;color:var(--muted);margin-left:2px}
.sc-val.is-line{color:var(--text);font-weight:600}
.sc-delta{grid-column:2;grid-row:1/span 3;align-self:center;
  font-size:var(--f-sm);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--muted);white-space:nowrap}
.sc-card.b-safe .sc-delta{color:var(--green)}
.sc-card.b-ok .sc-delta{color:var(--accent-text)}
.sc-card.b-edge .sc-delta{color:var(--amber)}
.sc-card.b-far .sc-delta{color:var(--muted)}

.sc-far{margin:var(--s-4) 0 0;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface)}
.sc-far .sc-grid{padding:0 var(--s-4) var(--s-4)}

.sc-warn{margin:0 0 var(--s-4);padding:var(--s-3) var(--s-4);font-size:var(--f-sm);
  color:var(--text);background:var(--amber-bg);border:1px solid var(--line);
  border-radius:0 var(--r-md) var(--r-md) 0;border-left:3px solid var(--amber);line-height:1.7}

.sc-legend{margin:var(--s-7) 0 0;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);padding:0 var(--s-4)}
.sc-legend ul{margin:0 0 var(--s-3);padding-left:var(--s-5)}
.sc-legend li{font-size:var(--f-sm);color:var(--muted);margin:var(--s-1) 0;line-height:1.7}
.sc-legend li b{color:var(--text)}
.sc-legend p{margin:0 0 var(--s-3);font-size:var(--f-xs);color:var(--muted);line-height:1.8}
.sc-legend a{color:var(--accent-text)}
/* 折叠块里放参考表：去掉表格自带外框，避免「框套框」；
   保留 .table-wrap 的横向滚动，窄屏时表格按 min-width 撑开出滚动条。 */
.sc-legend .table-wrap{margin:0 0 var(--s-3);border:0;border-radius:0;
  background:transparent;box-shadow:none}
.sc-legend .table-wrap table{min-width:420px}
.sc-legend .table-wrap td,.sc-legend .table-wrap th{font-size:var(--f-xs)}
/* 指标生摘要卡：前一个元素是折叠块，需要自己的上边距 */
.sc-legend + .sc-note{margin-top:var(--s-6)}

@media (max-width:720px){
  .sc-input{padding:var(--s-4)}
  .sc-grid{grid-template-columns:1fr}
  .sc-card{padding:var(--s-3)}
  /* 窄屏把分差从右栏移到第二行，避免和长校名抢宽度 */
  .sc-card{grid-template-columns:1fr auto}
  .sc-delta{grid-row:auto;align-self:end}
}

/* 分数前缀与分隔符：一串数字不加分隔会被读成一个数（「600 594」） */
.sc-k{font-size:var(--f-2xs);color:var(--muted);margin-right:5px}
.sc-sep{color:var(--line-strong);margin:0 4px}

/* 键盘聚焦要看得见，但不要浏览器的默认黑框（在蓝底按钮上很难看） */
.btn-primary:focus-visible,#scScore:focus-visible,
.sc-chip:focus-visible,.sc-far summary:focus-visible,
.sc-legend summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}