/* 单工具页专属样式（从 templates/tool/ech.html 的内联 <style> 抽离而来） */

/* 表单主体：左「域名输入」右「操作按钮」。
   用 align-items: flex-start 而不是 stretch —— 两列各自按自己的内容排，
   对齐交给下面写死的 148px（左 textarea / 右按钮列同值），
   这样以后任一侧加内容也不会把另一侧拉变形。
   左列不再有额外的说明文案，因此左列高度 = textarea 高度。 */
.ech-form-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ech-form-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
/* 必须先清掉 style.css 的
   `.tool-page > .tool-form .form-group input,select,textarea { height: 44px; padding: 0 12px }`
   —— 那条是按「单行输入框」给的定高 + 无纵向内边距，会把这里的多行框
   压成一行、并把文字顶到框顶。
   ⚠️ 不能只靠 min-height 兜底：min-height 只撑开盒子，height 仍按 44px
   算内容区，结果是「框高 148、内容按一行排、右侧出滚动条」—— 看起来像
   样式完全没生效，排查成本很高。所以 height 必须显式覆盖。 */
.ech-form-body .ech-form-main textarea { width: 100%; height: 148px; min-height: 148px; padding: 12px 14px; border: 1px solid #d0dde3; border-radius: 8px; font-family: Menlo, Consolas, "Microsoft YaHei", monospace; font-size: 13px; line-height: 1.75; color: #254150; resize: vertical; }
.ech-form-body .ech-form-main textarea:focus { border-color: #4285ed; box-shadow: 0 0 0 2px rgba(66,133,237,.15); outline: none; }
/* 按钮列：宽 280，高度写死成与左侧 textarea 相同的 148px，
   两个按钮各占其中一半 —— 视觉上就是「两个按钮叠起来和输入框一样高」。
   不依赖 stretch / 50% 这类依赖父高的写法，对齐是算出来的。 */
.ech-form-side { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; height: 148px; }
/* height 必须显式写到具体像素：style.css 的
   `.tool-page > .tool-form .btn { height: 44px }` 是 (0,4,1)、
   `.btn-lg` 同为 (0,4,1)，都高于本条的 (0,2,0)。
   只写 flex:1 不会把按钮拉高 —— 这是上一版没对齐的直接原因。
   148 = 2 × 69 + 10（gap），因此按钮高固定 69px。 */
.ech-form-side .btn { width: 100%; height: 69px; flex: 0 0 auto; padding: 0 20px; border-radius: 6px; font-size: 14px; }

/* 常显提示：本页最容易犯的错是把「配置合法」读成「服务端接受 ECH」。
   这条不可折叠、不可关闭 —— 结论的适用边界必须与结论同时可见。 */
.ech-disclaimer { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid #e6a23c; background: #fdf6ec; border-radius: 6px; color: #7a5b21; font-size: 13px; line-height: 1.75; }
.ech-disclaimer strong { color: #8a5a00; }

.ech-target-cell { font-weight: 600; color: #254150; word-break: break-all; }
.ech-mono { font-family: Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.ech-idlist { font-size: 12px; color: #44525c; }
.ech-muted { color: #91a0a9; font-size: 12px; }

/* 状态徽标。取值必须与节点侧结果契约一致（见 probe/ech.go 常量），
   未知取值一律中性灰 —— 宁可看不出结论，也不能把不认识的失败渲染成绿色。 */
/* 结果表：本页列数最多（11 列），表头与单元格都比通用基线再紧凑一点，
   否则 1280 宽度下会出现横向滚动条。行高与 .ech-target-cell 保持可读。 */
.ech-result-table th { white-space: nowrap; }
.ech-result-table td { vertical-align: middle; }

/* 空态行（「等待节点反馈...」）。ech.js 一直在输出这个类名，
   但此前全站没有任何规则命中它，于是它退回 td 的普通左对齐文本，
   在一张 11 列的宽表里孤零零挂在最左边。这里把它居中并压淡。 */
.ech-empty { text-align: center; color: #91a0a9; padding: 26px 12px; }

.ech-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.ech-ok { background: #e8f7ee; color: #1f9254; }
.ech-warn { background: #fdf6ec; color: #b8821b; }
.ech-bad { background: #fdecec; color: #c0392b; }
.ech-neutral { background: #eef2f5; color: #6b7b87; }
.ech-note { color: #b8821b; font-size: 12px; line-height: 1.6; margin-top: 2px; }
.ech-detail-btn { background: #fff; border: 1px solid #c5d3da; border-radius: 6px; color: #2a6fae; font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.ech-detail-btn:hover { border-color: #2a9df4; color: #2a9df4; }

/* 详情弹窗：沿用「点遮罩/Esc 关闭、点浮层内部不关」的既有交互，
   不引入新的模态组件与焦点管理。 */
.ech-modal { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(21,41,53,.45); }
.ech-modal.is-open { display: block; }
.ech-modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(760px, 92vw); max-height: 84vh; overflow: auto; background: #fff; border-radius: 12px; box-shadow: 0 16px 48px rgba(21,41,53,.28); }
.ech-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef4f7; position: sticky; top: 0; background: #fff; z-index: 1; }
.ech-modal-head strong { color: #254150; font-size: 15px; word-break: break-all; }
.ech-modal-close { background: none; border: none; font-size: 22px; line-height: 1; color: #91a0a9; cursor: pointer; padding: 0 4px; }
.ech-modal-close:hover { color: #c0392b; }
.ech-modal-body { padding: 16px 18px 22px; }
.ech-section-title { font-size: 13px; font-weight: 600; color: #254150; margin: 18px 0 8px; }
.ech-kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.ech-kv th { width: 160px; text-align: left; font-weight: 500; color: #7a8b96; padding: 6px 10px 6px 0; vertical-align: top; }
.ech-kv td { padding: 6px 0; color: #254150; word-break: break-all; }
.ech-cfg-card { border: 1px solid #e6eef2; border-radius: 8px; padding: 12px; margin-bottom: 10px; background: #fbfdfe; }
.ech-raw { font-family: Menlo, Consolas, monospace; font-size: 12px; background: #f7fafc; border: 1px solid #e6eef2; border-radius: 6px; padding: 10px; word-break: break-all; max-height: 160px; overflow: auto; color: #44525c; white-space: pre-wrap; }
.ech-copy { background: #fff; border: 1px solid #c5d3da; border-radius: 6px; color: #5c707d; font-size: 12px; padding: 3px 10px; cursor: pointer; margin-top: 8px; }
.ech-copy:hover { border-color: #2a9df4; color: #2a9df4; }
.ech-node-block { border: 1px dashed #dfe8ec; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.ech-node-block-head { font-weight: 600; color: #254150; font-size: 13px; margin-bottom: 6px; }


/* 响应头表格：头名定宽、值可换行。响应头值常常很长（CSP、Set-Cookie），
   不允许换行会把弹窗撑出横向滚动条。
   表格下方不再跟 .ech-raw 原始文本块（内容与表格重复），因此也没有
   针对 `.ech-http-headers + .ech-raw` 的高度覆盖规则。 */
.ech-http-headers { margin-bottom: 0; }
.ech-http-headers th { width: 200px; font-family: Menlo, Consolas, monospace; font-size: 12px; }
.ech-http-headers td { font-family: Menlo, Consolas, monospace; font-size: 12px; }