/**
 * /tool/ 页面样式。
 *
 * 作用域全部限定在 .tool-app / .tool-* 前缀下，不污染博客页面。
 * 配色沿用 Stellar 的 CSS 变量，自动跟随暗色模式。
 */

/**
 * 工具页去掉左右侧栏。
 *
 * 为什么用 CSS 而不靠 front-matter 的 `leftbar: []`：
 *   `leftbar: []` 只会清空 widget 列表，但侧栏的 logo、站内搜索、社交图标
 *   仍然会渲染（见 theme 的 _partial/sidebar/index_leftbar.ejs 末尾）。
 *
 * 为什么只影响工具页：
 *   本文件**只在 9 个工具页被引入**（页面里显式 <link>），
 *   所以这里的规则天然不会波及其余页面 —— 不需要额外的作用域前缀。
 *
 * 为什么必须同时改 grid-template-columns：
 *   .l_body 原本是 `grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr`。
 *   网格是**按顺序自动放置**的：把两个 aside 设为 display:none 后，它们不再是
 *   网格项，.l_main 就变成了**第一个** in-flow 子元素，会被放进**第 1 列**。
 *   所以第 1 列不能是 0 —— 那样主区宽度为 0，内容溢出到左侧变成一窄条。
 *   只剩一个网格项时，正确写法是**单列**栅格：
 *     grid-template-columns: minmax(200px, 1040px)
 *     justify-content: center
 *   同时把主区从 720px 放宽到 1040px —— 720px 对卡片网格太挤。
 */
.l_body {
  grid-template-columns: minmax(200px, 1040px);
  justify-content: center;
}

.l_body > .l_left,
.l_body > .l_right {
  display: none;
}

/* 手机端：l_left 是抽屉，隐藏后连汉堡按钮一起消失，这里收掉遮罩 */
.l_body > .main-mask {
  display: none;
}

/**
 * 工具页不需要侧栏 -> 页脚社交图标本来也在侧栏里，
 * 这里补一个页脚链接区，避免页面底部完全空掉。
 */
.tool-app {
  --tool-gap: 0.75rem;
  --tool-radius: 10px;
}

.tool-app :is(a) {
  color: var(--theme-color, #425aef);
}

/* ---------------- 表单 ---------------- */

.tool-form {
  display: flex;
  flex-direction: column;
  gap: var(--tool-gap);
  margin: 1rem 0;
}

.tool-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tool-field-label {
  font-size: 0.85rem;
  opacity: 0.75;
}

.tool-app :is(input, select, textarea) {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--tool-border, #d0d7de);
  border-radius: var(--tool-radius);
  background: var(--tool-bg, transparent);
  color: inherit;
  font-family: inherit;
  font-size: 0.95rem;
}

.tool-app textarea {
  resize: vertical;
  min-height: 3rem;
}

.tool-app :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--theme-color, #425aef);
  outline-offset: 1px;
}

.tool-params {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tool-gap);
}

.tool-params .tool-field {
  min-width: 9rem;
  flex: 1 1 9rem;
}

.tool-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.tool-app button {
  padding: 0.5rem 1.1rem;
  border-radius: var(--tool-radius);
  border: 1px solid var(--tool-border, #d0d7de);
  background: var(--tool-bg, transparent);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tool-app button.contrast {
  background: var(--theme-color, #425aef);
  border-color: var(--theme-color, #425aef);
  color: #fff;
}

.tool-app button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------------- 提示 / 错误 ---------------- */

.tool-hint,
.tool-warn {
  font-size: 0.88rem;
  opacity: 0.8;
  margin: 0.4rem 0;
}

.tool-warn {
  color: #b26a00;
  opacity: 1;
}

.tool-error {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #d1242f;
  border-radius: 4px;
  background: rgba(209, 36, 47, 0.08);
  color: #d1242f;
  font-size: 0.88rem;
  word-break: break-word;
}

.tool-result {
  font-size: 0.88rem;
  min-height: 1.4em;
}

.tool-result.is-ok { color: #1a7f37; }
.tool-result.is-bad { color: #d1242f; }

.tool-branch {
  font-size: 0.85rem;
  opacity: 0.75;
}

.tool-output,
.tool-log,
.tool-table {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
}

.tool-log {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--tool-log-bg, rgba(127, 127, 127, 0.08));
  padding: 0.7rem 0.9rem;
  border-radius: var(--tool-radius);
  min-height: 3rem;
}

.tool-download {
  display: inline-block;
  margin-top: 0.5rem;
}

.tool-table {
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  width: 100%;
  max-width: 32rem;
}

.tool-table :is(th, td) {
  border: 1px solid var(--tool-border, #d0d7de);
  padding: 0.3rem 0.6rem;
  text-align: left;
}

/* ---------------- 文件拖放区 ---------------- */

.tool-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
  padding: 2rem 1rem;
  border: 1.5px dashed var(--tool-border, #d0d7de);
  border-radius: 14px;
  background: var(--tool-drop-bg, rgba(127, 127, 127, 0.05));
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.tool-drop.is-dragover {
  border-color: var(--theme-color, #425aef);
  background: var(--theme-color, #425aef);
  background: color-mix(in srgb, var(--theme-color, #425aef) 10%, transparent);
  transform: scale(1.005);
}

.tool-drop.has-file {
  border-style: solid;
  border-color: color-mix(in srgb, var(--theme-color, #425aef) 45%, transparent);
}

.tool-drop-icon {
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.55;
}

.tool-drop-hint {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* 隐藏原生 file input，但保留在 DOM 里：label[for] 需要它，且仍可键盘聚焦 */
.tool-file-input.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tool-file-btn {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--tool-border, #d0d7de);
  background: var(--tool-bg, transparent);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.tool-file-btn:hover {
  border-color: var(--theme-color, #425aef);
  color: var(--theme-color, #425aef);
}

.tool-file-status {
  font-size: 0.85rem;
  opacity: 0.8;
  word-break: break-all;
}

.tool-file-status:empty {
  display: none;
}

/* ---------------- phpaudit：代码编辑器 + 结果表 ---------------- */

/* 编辑器容器必须有确定高度，否则 monaco 拿到 0 高度会渲染成一条细线。
   背景色**不要**在这里覆盖：monaco 自带 vs / vs-dark 两套主题，
   亮色暗色由 ui/phpaudit.js 跟随站点切换（见 followColorScheme），
   在 CSS 里写死颜色会把它覆盖回白底。 */
.phpaudit-editor {
  position: relative;   /* 拖入提示遮罩要定位在这里 */
  height: 500px;
  margin: 0.5rem 0 0.8rem;
  border: 1px solid var(--tool-border, #d0d7de);
  border-radius: var(--tool-radius, 8px);
  overflow: hidden;
}

/* 拖文件到代码区时的提示遮罩（用伪元素，不额外占 DOM） */
.phpaudit-editor.is-dragover::after {
  content: '松开以载入文件';
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--theme-color, #425aef);
  border-radius: var(--tool-radius, 8px);
  background: color-mix(in srgb, var(--theme-color, #425aef) 12%, transparent);
  font-size: 0.95rem;
  pointer-events: none;   /* 不能挡住 drop 事件 */
}

.phpaudit-result {
  overflow-x: auto;
}

.phpaudit-table {
  max-width: none;
  font-size: 0.82rem;
}

.phpaudit-table th,
.phpaudit-table td {
  vertical-align: top;
  word-break: break-all;
}

.phpaudit-row {
  cursor: pointer;
}

.phpaudit-row:hover {
  background: rgba(127, 127, 127, 0.08);
}

.phpaudit-line {
  text-align: right;
  white-space: nowrap;
  opacity: 0.75;
}

/* 等级配色：与 monaco marker 的四档一一对应（高=Error / 中=Warning / 低=Info / 信息=Hint） */
.phpaudit-row.sev-高 td:nth-child(2) { color: #d1242f; font-weight: 600; }
.phpaudit-row.sev-中 td:nth-child(2) { color: #bc4c00; font-weight: 600; }
.phpaudit-row.sev-低 td:nth-child(2) { color: #1a7f37; }
.phpaudit-row.sev-信息 td:nth-child(2) { color: #6e7781; }

/* 工具详情页的「相关分析」链接 */
.tool-ref {
  margin: 2rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tool-border, #d0d7de);
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ---------------- 工具集首页 ---------------- */

.tool-index-bar {
  display: flex;
  gap: var(--tool-gap);
  align-items: center;
  margin-bottom: 0.8rem;
}

.tool-search {
  flex: 1 1 auto;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--tool-border, #d0d7de);
  border-radius: 999px;
  background: var(--tool-bg, transparent);
  color: inherit;
  font: inherit;
}

.tool-result-count {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
}

.tool-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.tool-tab {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--tool-border, #d0d7de);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tool-tab.is-active {
  background: var(--theme-color, #425aef);
  border-color: var(--theme-color, #425aef);
  color: #fff;
}

.tool-tab-count {
  font-size: 0.78rem;
  opacity: 0.7;
}

.tool-tab.is-active .tool-tab-count { opacity: 0.9; }

/*
 * 卡片网格：**最多 3 列**。
 * 之前是 `repeat(auto-fill, minmax(15rem, 1fr))` —— 主区放宽到 1040px 后
 * 会排成 4 列，看起来很拥挤。断点与主题保持一致：
 *   1180px 主题启用平板布局（侧栏变抽屉），这里降到 2 列
 *    768px / 667px 降到 1 列
 */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tool-gap);
}

@media screen and (max-width: 1180px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 768px), screen and (max-width: 667px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
}

.tool-card {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--tool-border, #d0d7de);
  border-radius: var(--tool-radius);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.15s, transform 0.15s;
}

.tool-card:hover {
  border-color: var(--theme-color, #425aef);
  transform: translateY(-1px);
}

.tool-card[hidden] { display: none; }

.tool-card-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 8px;
  object-fit: cover;
}

.tool-card-body { min-width: 0; flex: 1 1 auto; }

/* 标题：完整展示，允许换行，不做省略号截断 */
.tool-card-name {
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}

.tool-card-desc {
  margin-top: 0.2rem;
  font-size: 0.83rem;
  opacity: 0.75;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 类型标签：简介下方单独一行，走文档流。
   不能用 position:absolute 贴右上角（会与标题重叠），也不与标题同行
   （名字一长就被压缩）。 */
.tool-card-type {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--tool-border, #d0d7de);
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.6;
  opacity: 0.7;
  white-space: nowrap;
}

.tool-empty {
  opacity: 0.7;
  text-align: center;
  padding: 2rem 0;
}