/* ============================================================
   页面专属样式
   ------------------------------------------------------------
   仅在特定页面出现的布局（首页首屏与统计条、详情页、文档页、对比页、打印）。
   共享组件（卡片、表格、徽章、导航、页脚）在 site.css。
   两者都只引用 tokens.css 中的变量。
   ============================================================ */

/* ------------------------------------------------------------
   首页 · 首屏
   ------------------------------------------------------------ */
/* 首屏保持居中：试过与下方区块统一左对齐，结果是 h1 只占半屏、
   右半区整片空白，落地页明显失衡。首屏作为「入口段」居中，
   其下的内容区块左对齐 —— 这是两段不同性质的版式，不必强行同轴。 */
.hero{padding:var(--s-9) 0 var(--s-8);text-align:center;position:relative;overflow:hidden}
/* 极轻的径向光晕，仅用于建立视觉焦点，不参与信息表达 */
.hero::before{content:"";position:absolute;inset:-40% 20% auto;height:420px;
  background:radial-gradient(ellipse at center,var(--accent-weak) 0%,transparent 70%);
  opacity:.8;pointer-events:none;z-index:0}
.hero > *{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:var(--s-3)}
/* balance：390px 下 15 字标题会被切成 13+2，「楚」字孤零零落在第二行。
   让浏览器把两行排匀。不支持的浏览器退回普通折行，不影响可读 */
.hero h1{font-size:var(--f-3xl);margin:0 0 var(--s-3);letter-spacing:-.03em;
  text-wrap:balance}
.hero p{color:var(--muted);font-size:var(--f-md);max-width:46ch;
  margin:0 auto var(--s-6)}
.hero-search{max-width:520px;margin:0 auto;display:flex;gap:var(--s-2);
  background:var(--surface);padding:6px;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--sh-1)}
.hero-search input{flex:1;min-width:0;padding:11px var(--s-4);font-size:var(--f-base);
  border:0;background:transparent;color:var(--text);outline:none;font-family:inherit}
.hero-search input::placeholder{color:var(--muted)}
.hero-search button{padding:11px var(--s-5);border:0;border-radius:var(--r-md);
  cursor:pointer;background:var(--accent);color:var(--on-accent);font-size:var(--f-sm);
  font-weight:600;font-family:inherit;white-space:nowrap;
  transition:background var(--t-fast)}
.hero-search button:hover{background:var(--accent-strong)}
.hero-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
/* 常搜词：placeholder 只能"告诉你能搜什么"，这里给"点一下就进去" */
.hero-quick{margin:var(--s-4) 0 0;font-size:var(--f-xs);color:var(--muted);
  line-height:2}
.hero-quick a{color:var(--accent-text);margin:0 5px}
.hero-quick a:hover{text-decoration:underline}

/* 统计条：一张卡 + 发丝线分隔，比五个独立卡片更整 */
.stats{display:flex;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);margin:var(--s-7) 0 0;overflow:hidden}
/* 格数不固定（2 或 3 格），用 flex 而不是定列数的 grid，避免出现空列 */
.stat{flex:1;padding:var(--s-5) var(--s-4);text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
/* 收录总量是页面的核心数字，给它更高的视觉权重，其余四项作为构成说明 */
/* 原来给第一格数字上强调色，但它不可点、也非当前状态——
   同一行其余 4 格是 --ink，会造成「第一格能点」的错觉。层级靠字号就够了。 */
/* 三格等宽同字号：层级靠位置和标签表达，不再叠 1.35 倍宽度 + 1.45 倍字号。
   连带修掉一个真实缺陷：首格撑宽后第三格内容区只剩 91.3px，
   而「2026 政策变化」需要 91.5px —— 差 0.2px 就折行，第二行只剩一个「化」。 */
.stat b{display:block;font-size:var(--f-2xl);line-height:1.15;color:var(--ink);
  letter-spacing:-.02em}
.stat span{display:block;margin-top:var(--s-1);font-size:var(--f-xs);color:var(--muted)}

/* ------------------------------------------------------------
   首页 · 学段与行政区
   ------------------------------------------------------------ */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
/* 四个入口（特长生的四类）：三列排会剩一个落单 */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.lv-card{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);color:var(--text);
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base)}
.lv-card:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px);
  text-decoration:none}
.lv-card h3{font-size:var(--f-md);color:var(--muted);font-weight:600;margin-bottom:var(--s-1)}
.lv-card .n{font-size:var(--f-xl);font-weight:700;color:var(--accent);letter-spacing:-.02em}
.lv-card p{color:var(--muted);font-size:var(--f-xs);margin:var(--s-2) 0 0}

/* 11 个区在 auto-fill 下被切成 7 列，第二行只剩 4 个，且每张卡挤三行小字。
   固定 4 列 → 4+4+3，卡宽约 265px，区名和数量都能放大一档。 */
.dist-grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--s-3)}
.dist{display:block;color:var(--text)}
/* 区名与数量组成一行头部：原来数量是 float:right，浮动占位把下面那行压窄，
   于是「江北新区」那格第三行只剩一个「3」。改成 flex 后各行宽度一致。 */
.dist .dhead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2)}
.dist b{font-size:var(--f-md);font-weight:600}
.dist span{color:var(--muted);font-size:var(--f-xs);font-variant-numeric:tabular-nums;
  flex:none}
.dist small{display:block;color:var(--muted);font-size:var(--f-2xs);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 补位卡：与区卡区分开，一眼看出它不是第 12 个区 */
.dist-all{border-style:dashed}
.dist-all:hover{border-color:var(--accent);border-style:solid}

/* ------------------------------------------------------------
   详情页
   ------------------------------------------------------------ */

.detail-grid{display:grid;grid-template-columns:var(--toc-w) minmax(0,1fr);gap:var(--s-8);
  align-items:start}
.toc{position:sticky;top:76px;font-size:var(--f-sm)}
.toc-title{font-size:var(--f-2xs);letter-spacing:.1em;color:var(--muted);
  margin-bottom:var(--s-2)}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:7px 12px;line-height:1.5;color:var(--muted);font-size:var(--f-xs);
  border-left:2px solid transparent;margin-left:-2px;
  transition:color var(--t-fast),border-color var(--t-fast)}
.toc li a:hover{color:var(--text);text-decoration:none;border-left-color:var(--line-strong)}
.toc li a[aria-current="true"]{color:var(--accent-text);border-left-color:var(--accent);
  font-weight:600}

.article{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-2) var(--s-6) var(--s-6);
  box-shadow:var(--sh-1);
  /* 卡片定宽居中：.wrap 是满宽的，只限段落宽会变成「卡片很宽、字只占左半」 */
  max-width:calc(46em + 2 * var(--s-6));margin-inline:auto}
/* 行宽统一由 .article 的 max-width 控制（约 44 汉字/行），文字块填满卡片 */
.article > p,.article > ul,.article > ol,.article > blockquote{max-width:none}
.article h2{font-size:var(--f-lg);margin:var(--s-7) 0 var(--s-3);
  padding-left:var(--s-3);border-left:3px solid var(--accent);line-height:1.4}
.article h3{font-size:var(--f-md);margin:var(--s-6) 0 var(--s-2)}
.article h4{font-size:var(--f-sm);margin:var(--s-5) 0 var(--s-2);color:var(--muted)}
.article > p{line-height:var(--lh-base)}
.article ul,.article ol{padding-left:var(--s-5)}
.article li{margin:var(--s-1) 0}
.article blockquote{margin:var(--s-4) 0;padding:var(--s-3) var(--s-4);
  background:var(--surface-2);border-left:3px solid var(--line-strong);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--muted);
  font-size:var(--f-sm)}
.article blockquote strong{color:var(--text)}

/* 首段引用固定是「一句话定位」，用强调色与普通引用区分 */
.article > blockquote:first-of-type{background:var(--accent-weak);
  border-left-color:var(--accent);color:var(--text)}
.article code{background:var(--surface-2);padding:1px 6px;border-radius:5px;
  font-size:var(--f-xs);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.article hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
.article > p:first-of-type{margin-top:var(--s-4)}

/* ------------------------------------------------------------
   施教区：逐条路名 + 自查入口
   ------------------------------------------------------------
   原文是一整段「琅琊路、北京西路[19-69号…]、天竺路、…」，
   家长要在密集文本里完成「找路名 → 比号段 → 判单双号」三步核对。
   拆成一条一行之后，至少「找路名」这一步从扫描变成定位。
   ------------------------------------------------------------ */
.roads{list-style:none;margin:var(--s-3) 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15em,1fr));
  gap:2px var(--s-4);background:var(--surface-2);
  border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-3) var(--s-4)}
.roads li{font-size:var(--f-sm);line-height:1.9;color:var(--text);
  padding-left:var(--s-3);position:relative;overflow-wrap:anywhere}
/* 用一条极短的发丝线做行首标记：比圆点轻，不抢字号 */
.roads li::before{content:"";position:absolute;left:0;top:.95em;
  width:5px;height:1px;background:var(--line-strong)}
.roads mark,.sk-hit{background:var(--amber-bg);color:var(--amber);
  border-radius:3px;padding:0 2px}

/* 自查框：命中后高亮原文并说明「在哪个校区的哪一条里」，
   不输出「能上/不能上」——号段规则各校写法不一，机器判错的代价太大。 */
.sk-box{margin:var(--s-4) 0;padding:var(--s-4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.sk-label{display:block;font-size:var(--f-sm);font-weight:600;color:var(--ink);
  margin-bottom:var(--s-2)}
.sk-row{display:flex;gap:var(--s-2)}
.sk-out{margin:var(--s-2) 0 0;font-size:var(--f-xs);color:var(--muted);line-height:1.7}
.sk-out.hit{color:var(--text)}
.sk-out.miss{color:var(--muted)}

/* ------------------------------------------------------------
   说明页 / 独立内容页
   ------------------------------------------------------------ */
.panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6)}

/* ------------------------------------------------------------
   文档型页面（政策 / 数据说明）
   与档案正文共用 .article 容器，但标题层级更接近独立文章
   ------------------------------------------------------------ */
.article .doc-title{font-size:var(--f-2xl);margin:var(--s-1) 0 var(--s-2);
  letter-spacing:-.02em}
.article > .eyebrow{margin-top:var(--s-4)}
.article > h2:first-of-type{margin-top:var(--s-6)}
.article .hint{margin-bottom:var(--s-4)}

/* ------------------------------------------------------------
   内容型提示框（首页年度变化等）：比直接放文章容器更轻
   ------------------------------------------------------------ */
.callout{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-2) var(--s-5) var(--s-4);
  box-shadow:var(--sh-1)}
.callout ul{padding-left:var(--s-5);margin:var(--s-3) 0 0}
.callout li{margin:var(--s-2) 0;font-size:var(--f-sm);color:var(--text);
  line-height:var(--lh-base)}
.callout li strong{color:var(--ink)}

/* 表格列宽工具（避免在模板里写行内样式） */
.col-status{width:180px}
.contents{display:contents}

/* ------------------------------------------------------------
   打印：家长打印施教区、招生计划是真实场景
   ------------------------------------------------------------ */
@media print{
  /* 家长会打印施教区与招生计划，纸面上不能出现「点了才有用」的东西：
     吸顶导航、横向滑动的目录条、固定在右下角的回顶按钮、骨架屏、对比按钮。 */
  .nav,.filter-toggle,footer .cols,.skip,.cmp-add,.to-top,
  .picker,.chips,.cmp-actions,.cmp-gtoggle .cmp-gcaret,.card-skel,.all-jump{
    display:none!important}
  .cmp-wrap{overflow:visible}
  .cmp-table th,.cmp-table td{padding:4px 6px;font-size:9pt}
  .cmp-cell.is-diff{background:transparent;color:var(--text);font-weight:700}
  /* 打印时一律展开折叠组：纸面上没有「展开」按钮可按。
     需要 !important，因为折叠规则写在本块之后，同权重下会盖掉这里。 */
  tbody.is-collapsed tr:not(.cmp-ghead){display:table-row!important}
  body{background:var(--bg);color:var(--text);font-size:11pt}
  .article,.detail-head,.callout,.table-wrap{box-shadow:none;border-color:var(--line)}
  /* 目录在纸上反而有用：长档案打印出来要能按页翻。
     屏幕上它是吸顶横条，打印时改成两栏静态列表。 */
  .toc{display:block!important;position:static;margin:0 0 6mm;font-size:9pt}
  .toc-title{display:block;margin-bottom:2mm}
  .toc ol{display:grid;grid-template-columns:1fr 1fr;gap:0 8mm;border-left:0;overflow:visible}
  .toc li a{padding:1mm 0;border-left:0}
  /* 只给站外链接印 URL：站内链接印出来是一串 ../schools/%E9%AB%98…，
     150 个字符谁也不会去敲，还把施教区那种密集短行撑乱。 */
  .article a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;
    color:var(--muted);word-break:break-all}
  .detail-grid{display:block}
  .detail-main{max-width:none}
  .article{page-break-inside:auto}
  .article .table-wrap{overflow:visible}
  /* 表格行别被切成两半 */
  tr{page-break-inside:avoid}
}

/* 超窄屏（≤420px）
   1) 剩 5 项：首页 / 学校库 / 时间轴 / 查分 / 政策。
      「分数查学校」在这个断点用短标签「查分」（省 37px），
      否则 375px 上要么放不下、要么得砍掉一个入口。
      对比收在页脚（详情页也有入口），数据说明在 720 断点已收。
   2) 品牌原来只剩一个「宁」字方块，新用户看不出这是什么站——
      改成保留「南京档案」四个字（隐去中间的 em）。 */
@media (max-width:420px){
  .brand-text em{display:none}
}

/* 骨架屏（学校库） */
.card-skel{display:none;min-height:210px;border-style:dashed;
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%);
  background-size:250% 100%;animation:skel 1.2s ease-in-out infinite}
html.js .card-skel{display:block}
@keyframes skel{from{background-position:150% 0}to{background-position:-50% 0}}

/* ------------------------------------------------------------
   404 页
   ------------------------------------------------------------ */
.notfound{max-width:720px;margin:0 auto;padding:var(--s-9) 0 var(--s-8)}
.notfound h1{font-size:var(--f-3xl);margin:var(--s-2) 0 var(--s-3)}
.nf-search{margin:var(--s-5) 0 var(--s-7)}
/* 360px 下限 → 720px 容器里正好 2 列，4 个入口排成 2×2；
   原来 210px 会算成 3 列，第 4 个落单，像少了一个入口 */
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--s-3)}
.nf-card{display:block;padding:var(--s-4);border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);color:var(--text);
  transition:border-color var(--t-fast),background var(--t-fast)}
.nf-card b{display:block;font-size:var(--f-md);margin-bottom:2px;color:var(--ink)}
.nf-card span{font-size:var(--f-xs);color:var(--muted)}
.nf-card:hover{border-color:var(--accent);background:var(--accent-weak);
  text-decoration:none}

/* 首页常搜词说明：「拉力琅」「玄外」这类圈内简称，
   本地老家长秒懂，新落户家庭完全不知所云——放在入口处就是门槛。 */
.quick-note{margin:var(--s-2) auto 0;max-width:44em;font-size:var(--f-2xs);
  color:var(--muted);line-height:1.75}

/* 首页 · 招生时间轴入口
   统计条正下方的一条窄带：不抢占学段卡的位置，但排在首屏内。
   家长找这张表时通常是「明天就截止」的状态，入口必须一眼可见。 */
.tl-entry{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  margin:var(--s-4) 0 0;padding:var(--s-4) var(--s-5);
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--text);transition:border-color var(--t-fast),background var(--t-fast)}
.tl-entry:hover{background:var(--amber-bg);text-decoration:none}
.tl-entry-k{font-size:var(--f-sm);font-weight:700;color:var(--ink);flex:0 0 auto;
  white-space:nowrap}
.tl-entry-v{font-size:var(--f-xs);color:var(--muted);flex:1 1 260px;line-height:1.6}
.tl-entry-go{font-size:var(--f-xs);font-weight:600;color:var(--amber);flex:0 0 auto}

/* 首页两个工具入口并排（时间轴 / 分数查学校）。
   单列时每个占满一行，两条并排后原来的 margin 要归零由容器接管。 */
.home-tools{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:var(--s-4) 0 0}
.home-tools .tl-entry{margin:0}
.tl-entry--score{border-left-color:var(--accent)}
.tl-entry--score:hover{background:var(--accent-weak)}
.tl-entry--score .tl-entry-go{color:var(--accent-text)}

@media (max-width:720px){
  .home-tools{grid-template-columns:1fr}
}

/* 比 375 更窄的屏（安卓常见 360dp）：5 项会多出约 12px。
   375 恰好放得下（余量约 3px），所以阈值卡在 374 而不是 380——
   按「大概多少」划断点，会把本来放得下的尺寸也一起砍掉。
   首页让位：左上角品牌本身就是回首页的链接，这是通用约定。 */
@media (max-width:374px){
  .nav-links a[data-nav="home"]{display:none}
}

/* 政策页的「其他招生通道」：5 张卡在 2 列网格里会剩最后一张落单。
   让总览卡跨满一行当横幅，下面 4 类正好 2×2。 */
.nf-lead{grid-column:1/-1}