/* ========================================================================
   Gaussian 输入文件块 —— 文件名条 + 「复制 / 下载」按钮 + 行号
   ------------------------------------------------------------------------
   放映页（slide_0X.html）与阅读页（doc_0X.html）共用这一份样式，
   所以两边的 HTML 结构必须一致：

     <div class="inpfile">
       <div class="inp-bar">
         <span class="inp-name">water-hf.com</span>
         <span class="inp-acts">
           <button type="button" class="inp-btn" data-act="copy">复制</button>
           <button type="button" class="inp-btn" data-act="down" data-ext=".com">下载 .com</button>
           <button type="button" class="inp-btn" data-act="down-gjf" data-ext=".gjf">下载 .gjf</button>
         </span>
       </div>
       <pre>…输入文件正文（行号由 codefile.js 注入）…</pre>
     </div>

   交互由 assets/js/codefile.js 负责：
   · 给 <pre> 的每一行插入行号 <span class="inp-ln">，同时把**未加行号的原文**
     记在 <pre> 上；「复制 / 下载」一律用原文，所以拿到手的内容没有行号；
   · 点击时再剥掉行尾的中文讲解注解（"<- …"）、把末尾补成「恰好一个空行」，
     然后写进剪贴板 / 存成文件。
   · 两个下载按钮内容完全一样，只有扩展名不同（`.com` 与 `.gjf`）——
     前者是 Gaussian 公司的传统写法，后者是 GaussView / 集群脚本更常见的后缀，
     学生按自己的习惯拿。

   【条上三个按钮会不会撑破】文件名用省略号收缩（.inp-name 给了 min-width:0，
   否则 flex 的 min-width:auto 会顶住不缩、把按钮挤出画布），
   窄屏再统一收一档 padding / gap。条的高度**不随按钮个数变化**，
   所以加按钮不花任何纵向预算。

   【配色 —— 绿色系】
   带「复制 / 下载」的文件块 = 讲义里的「计算案例输入文件」，
   用绿色与其它代码块（青色，见 slide.css / doc.css 里的 pre）区分开：
   一眼就能分出「这是能直接拿去跑的输入文件」和「这只是一段日志 / 命令」。
   颜色全部收在 --inp-* 变量里，换色只改 .inpfile 里那一段。

   【字号】文件名条属于「页面外壳」，字号写死 px，**不跟随 --fs 缩放**，
   与放映页工具栏、阅读页浮动控件保持一致。
   代码块正文与行号在 <pre> 内部，由 pre 的字号决定，**跟随 --fs**。

   【为什么两页共用一份而不各写一份】样式只有这一处，
   改一次两边同时生效，不会出现「放映页已经变、阅读页还是老样子」。
   ======================================================================== */

/* 【高度】放映页是固定高度的舞台，讲义页本来就排得很满，
   这条工具栏是**净增**的高度，所以每个尺寸都按最小可用值给：
   padding 2px、按钮 3px/11.5px，整条约 21px 高。
   实测（1366×768）比不放条多占约 12–20px，页面靠 .slide 自带
   的 overflow-y:auto 兜底，与站内其它课程一致。 */
.inpfile {
  margin: 6px 0;
  /* ---------- 案例配色（绿色系）：换色只改这一段 ---------- */
  --inp-bg:      #f1faf4;   /* 代码块底色 */
  --inp-bar:     #e2f5e9;   /* 文件名条底色 */
  --inp-border:  #bfe4cd;   /* 边框 */
  --inp-accent:  #2f9e5f;   /* 顶端色条 / 主色 / 按钮悬停 */
  --inp-ink:     #14503a;   /* 代码文字 */
  --inp-ln:      #8dbfa1;   /* 行号 */
  --inp-ln-rule: rgba(47, 158, 95, .28);  /* 行号右侧竖线 */
  --inp-bar-ink: #12603f;   /* 文件名 / 按钮文字 */
}

.inp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 10px;
  background: var(--inp-bar, #e2f5e9);
  border: 1px solid var(--inp-border, #bfe4cd);
  border-left: 4px solid var(--inp-accent, #2f9e5f);
  border-radius: 6px 6px 0 0;
}

.inp-bar .inp-name {
  font-family: var(--font-mono, var(--mono, monospace));
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--inp-bar-ink, #12603f);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* flex 子项默认 min-width:auto —— 文件名 nowrap 时它的 min-content 就是整串
     文字宽度，会顶住不让缩，把右边三个按钮挤出条外。必须显式给 0 才能省略号收缩。 */
  flex: 0 1 auto; min-width: 0;
}

.inp-bar .inp-acts { margin-left: auto; display: flex; gap: 6px; flex: none; }

.inp-btn {
  font-family: var(--font-mono, var(--mono, monospace));
  font-size: 11.5px; line-height: 1; cursor: pointer;
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--inp-border, #bfe4cd);
  background: #fff; color: var(--inp-bar-ink, #12603f);
  transition: background .15s, color .15s, border-color .15s;
}
.inp-btn:hover {
  background: var(--inp-accent, #2f9e5f);
  border-color: var(--inp-accent, #2f9e5f);
  color: #fff;
}
.inp-btn:active { transform: translateY(1px); }
/* 操作反馈（「已复制」/「已下载」）：绿底再深一档，与常态区分 */
.inp-btn.ok {
  background: #d8f0e0; border-color: var(--inp-accent, #2f9e5f); color: #0e4a2c;
}

/* 代码块与文件名条连成一体：去掉上圆角与上边框，避免出现双线。
   选择器要压过 .slide.tight pre / code2 pre 等既有规则，故写出全路径；
   同时把底色、左边色条与文字色换成案例绿。 */
.inpfile > pre,
.slide .inpfile > pre,
.slide.tight .inpfile > pre,
main .inpfile > pre {
  margin: 0;
  background: var(--inp-bg, #f1faf4);
  border-color: var(--inp-border, #bfe4cd);
  border-left: 4px solid var(--inp-accent, #2f9e5f);
  border-top: none;
  border-radius: 0 0 6px 6px;
  color: var(--inp-ink, #14503a);
  /* 顶部内边距也收一档：上边界已经由文件名条给出，不必再留一段空白 */
  padding-top: 4px;
}

/* ---------- 行号 ----------
   由 assets/js/codefile.js 在每一行开头插入 <span class="inp-ln">。
   宽度用 em，于是跟着 pre 的字号（进而跟着 --fs 的字号缩放）一起变。
   user-select:none —— 手动拖选复制时也不会把行号带走；
   「复制 / 下载」按钮更是直接用未加行号的原文。 */
.inpfile pre .inp-ln {
  display: inline-block;
  width: 2.7em; padding-right: .6em; margin-right: .65em;
  border-right: 1px solid var(--inp-ln-rule, rgba(47, 158, 95, .28));
  text-align: right;
  color: var(--inp-ln, #8dbfa1);
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  cursor: default;
}

/* 窄屏：文件名与三个按钮并排会很挤，各自收一档 */
@media (max-width: 620px) {
  .inp-bar { gap: 6px; padding: 3px 8px; }
  .inp-bar .inp-name { font-size: 11.5px; }
  .inp-acts { gap: 4px; }
  .inp-btn { padding: 3px 7px; font-size: 11px; }
  .inpfile pre .inp-ln { width: 2.3em; padding-right: .45em; margin-right: .5em; }
}

/* 打印阅读资料时按钮没有意义，隐藏文件名条，只留输入文件正文 */
@media print {
  .inp-bar { display: none; }
  .inpfile > pre,
  .slide .inpfile > pre,
  main .inpfile > pre {
    padding-top: .9rem;
    border-radius: 6px;
    border-top: 1px solid var(--inp-border, #bfe4cd);
  }
}