/* ============================================================
   yidian.ai 设计令牌 + 公共组件(全站唯一取值来源)
   —— base.html 在所有页面样式之前引入;分享独立页也直接引入本文件。
   基准语言 = 纽约时报式报纸排版:纯白画布、黑线结构、层次靠字号与细线,
   不靠色块与阴影;唯一功能蓝 #326891 只用于链接与主按钮。
   规则:新增样式一律引用这里的变量;不要在下游文件里再写裸色值/裸字号。
   ============================================================ */

/* 标题字体:思源宋体 600(自托管子集,GB2312 一级字,生僻字回落系统宋体)。
   全站唯一一处 @font-face,分享页/站内样式不得重复声明。 */
@font-face{
  font-family:"Noto Serif SC";
  src:url("/static/fonts/NotoSerifSC-600-L1.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  /* ---- 字体栈(全站仅此三种):标题衬线(Georgia 兜英文数字),正文/UI 系统黑体 ---- */
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  --serif:"Noto Serif SC",Georgia,"Songti SC","STSong","SimSun",serif;
  /* 仿宋:快讯标题的公文气质;系统仿宋缺席时回落宋体衬线,不回落黑体 */
  --fangsong:"FangSong","STFangsong","FangSong_GB2312","仿宋","Noto Serif SC","Songti SC","SimSun",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- 色板:每个用途一个值 ---- */
  /* 唯一功能蓝:链接 / 主按钮。品牌浅蓝只留 logo 图形,不再进画布。 */
  --blue:#326891;
  --navy:#274b6d;        /* 快讯标题与时间列深蓝:有色但低调,比 --blue 深一档 */
  --blue-deep:#000;      /* 衬线大标题:纯黑 */
  --blue-soft:#f4f6f8;   /* 退役中的浅蓝底:降为冷调浅灰,仅剩少量提示底 */
  /* 墨色与灰阶(三档灰) */
  --ink-strong:#000;     /* 标题纯黑 */
  --ink:#121212;         /* 正文 */
  --ink-2:#5a5a5a;       /* 辅助文字 / 摘要 */
  --mut:#999;            /* 弱化 meta / 表头 */
  --faint:#999;          /* 最弱 meta 与 --ink-3 同档:更浅在白底上不达任何对比度档位 */
  --line:#e2e2e2;        /* 细线(唯一分隔线灰) */
  --line-dark:#121212;   /* 黑结构线:版块顶粗线 / 表头下线 / 报头双线 */
  --soft:#f7f7f7;        /* 极浅灰底(仅少数提示区,不做卡片底) */
  --canvas:#fff;         /* 独立页画布:同为纯白 */
  /* 状态色:只作深色文字 / 细描边,彩底胶囊退役;-soft 仅剩表格行的极淡提示底 */
  --green:#1c7a43;       --green-soft:#f0f7f2; --green-line:#cfe3d6;
  --red:#a81817;         --red-soft:#faf1f0;   --red-line:#e9cfcd;
  --orange:#b3540c;      --orange-soft:#faf4ee;
  --gold:#8a6d2f;        --gold-soft:#faf6ec;  --gold-line:#e7dcc2;
  --gold-ink:#8a6d2f;    /* 与 --gold 合流:金色系一律深色文字 */
  --teal:#3d6470;        /* 栏目强调(产业):同样只作文字色 */

  /* ---- 字号阶梯(8 档;不要在下游写裸 rem)。标题行高统一 1.15~1.3 ---- */
  --fs-xs:.72rem;   /* kicker、微标签 */
  --fs-sm:.8rem;    /* meta、徽章、小按钮 */
  --fs-md:.875rem;  /* 辅助文字、按钮、表单标签 */
  --fs-base:.95rem; /* 列表标题、输入框 */
  --fs-lg:1.1rem;   /* 正文导语、面板标题 */
  --fs-xl:1.5rem;   /* 页面 h1(次级页) */
  --fs-2xl:1.9rem;  /* 版块大标题 / 分享页标题 */
  --fs-3xl:2.5rem;  /* 头版 h1(36~42px 档) */

  /* ---- 间距 / 圆角 / 阴影:圆角上限 3px,卡片阴影退役(下拉浮层除外) ---- */
  --r-sm:2px; --r-md:3px; --r-lg:3px; --r-pill:3px;
  --shadow-pop:0 6px 20px rgba(0,0,0,.12);  /* 唯一保留:下拉/浮层 */

  --wrap:1180px;
  --measure:640px;       /* 深度阅读版心 */
}

/* ============================================================
   公共组件(全站共用一套;页面样式不得另起炉灶)
   ============================================================ */

/* ---- 按钮:方角,触控高度 ≥32px。主=实心功能蓝,次=1px 描边白底 ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:4px 16px;background:var(--blue);color:#fff;border:0;
  border-radius:var(--r-sm);font-size:var(--fs-md);font-family:inherit;line-height:1.4;
  cursor:pointer;text-decoration:none;vertical-align:middle;white-space:nowrap}
.btn:hover{background:#28536f;text-decoration:none}
.btn-dark{background:var(--ink)}          /* 黑实心主按钮(报纸语言的另一档) */
.btn-dark:hover{background:#000}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:4px 14px;background:#fff;border:1px solid var(--ink);
  color:var(--ink);border-radius:var(--r-sm);font-size:var(--fs-md);font-family:inherit;
  line-height:1.4;cursor:pointer;text-decoration:none;vertical-align:middle;white-space:nowrap}
.btn-ghost:hover{background:var(--soft);text-decoration:none}
.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:32px;padding:2px 12px;background:var(--blue);color:#fff;border:0;
  border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;line-height:1.4;
  cursor:pointer;text-decoration:none;vertical-align:middle;white-space:nowrap}
.btn-sm:hover{background:#28536f;text-decoration:none}
/* 表格行内的次要小按钮(静默/停抓/移除/发到邮箱…):描边弱化但触控仍 ≥32px */
.btn-sm-ghost{display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:32px;padding:2px 10px;background:#fff;border:1px solid var(--line);
  color:var(--ink-2);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;
  line-height:1.4;cursor:pointer;text-decoration:none;vertical-align:middle;white-space:nowrap}
.btn-sm-ghost:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.btn-sm-ghost.is-danger{color:var(--red);border-color:var(--red-line)}
.btn-sm-ghost.is-danger:hover{border-color:var(--red);color:var(--red)}

/* ---- 徽章:彩底胶囊退役,一律细描边 / 纯文字小标签 ----
   .st?  内容状态(已发布/待审/编译中/失败)
   .score-pill + .s-*  评分档(高/中/低)——后台六处模板复制版应逐步删除,以这里为准 */
.st{display:inline-block;padding:1px 8px;border:1px solid;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap;text-decoration:none;
  background:none;line-height:1.5}
a.st:hover{text-decoration:none;background:var(--soft)}
.st-pub{color:var(--green)}
.st-ready{color:var(--blue)}
.st-pending{color:var(--orange)}   /* 编译中:深橙文字,进行时可辨 */
.st-muted{color:var(--mut)}
.st-fail{color:var(--red)}
.score-pill{display:inline-block;min-width:38px;text-align:center;padding:1px 7px;
  border:1px solid;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;
  white-space:nowrap;background:none;line-height:1.5}
.s-hi{color:var(--green)}
.s-mid{color:var(--gold)}
.s-lo{color:var(--red)}
/* 表格里的辅助小徽章:色相即语义,但只上文字与描边(绿成功/金提醒/红危险/蓝信息/灰停用) */
.badge{display:inline-block;padding:1px 6px;border:1px solid;border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:none;line-height:1.5}
.badge-green{color:var(--green)}
.badge-gold{color:var(--gold)}
.badge-red{color:var(--red)}
.badge-blue{color:var(--blue)}
.badge-gray{color:var(--ink-2);border-color:var(--line)}

/* ---- 表格:表头下 2px 黑线 + 行间细线,无斑马纹 ----
   窄屏一律用 <div class="table-wrap"> 包住表格在容器内横滚,禁止整页横滚。
   数字列加 class="num";可排序表头当前列加 class="on"。 */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:18px 0 50px}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;
  vertical-align:top}
.table th{color:var(--ink-2);font-weight:600;font-size:var(--fs-sm);
  border-bottom:2px solid var(--line-dark)}
.table th.num,.table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table th a{color:var(--ink-2)}
.table th.on a{color:var(--ink-strong);font-weight:700}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* CJK 的最小内容宽度是一个字:不给下限,窄屏上表格宁可把「分项/话题」列
   压成一字一行的竖条(行高随之爆炸),也不肯触发横滚。给下限后表格保持
   桌面布局、在 .table-wrap 内横滑 —— 这才是上面注释承诺的行为。 */
@media(max-width:640px){
  .table-wrap>.table{min-width:640px}
}

/* ---- 表单控件:input/select/textarea 共用一套 ---- */
.form{display:flex;flex-direction:column;gap:16px;margin:22px 0}
.form label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-md);color:var(--ink-2)}
.form input,.form select,.form textarea{padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--fs-base);font-family:inherit;color:var(--ink);
  background:#fff}
.form textarea{line-height:1.7;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);border-color:transparent}
.form .btn{align-self:flex-start}
/* inline-flex 而非 flex:表格单元格 / 链接旁的小表单要留在行内流里 */
.inline-form{display:inline-flex;gap:6px;align-items:center}
.inline-form select,.inline-form input{padding:5px 8px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--fs-md);color:var(--ink);background:#fff}

/* ---- 报纸结构件:kicker(栏目眉)/ 版块标题黑粗线 / 报头双细线 ---- */
.kicker{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.rule-top{border-top:3px solid var(--line-dark)}      /* 版块标题顶 3px 黑粗线 */
.rule-double{border-bottom:3px double var(--line-dark)} /* 报头下双细线 */
