/* ============================================================
   随机工具站 · assets/core.css（v001）
   共用外壳样式 + 设计令牌。工具自己的样式在 tools/<slug>/tool.css。
   ⚠️ 工具样式一律以 .tool- 前缀或 #tool-root 后代选择器书写，
      不许出现裸标签选择器（button / input），否则会污染外壳。
   ============================================================ */

/* ── 设计令牌 ───────────────────────────────────────────── */
:root {
  --ink:        #14171c;
  --ink-soft:   #5a6270;
  --ink-faint:  #98a1af;
  --paper:      #fbfaf8;
  --surface:    #ffffff;
  --line:       #e5e3de;
  --accent:     #2f6f5e;
  --accent-ink: #ffffff;
  --accent-dim: #eaf2ef;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(20,23,28,.05), 0 8px 24px rgba(20,23,28,.05);
  /* 字体：@font-face 与「哪门语言用哪个字库」由 build.mjs 生成到 assets/fonts.css。
     这里只放兜底栈。绝不在这里硬写某个 Noto 家族名 —— 声明一个没随包发出去的
     字体，得到的是静默的系统字体兜底，那是最难发现的一类问题。 */
  --sans-fallback: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans",
                   "Malgun Gothic", "Microsoft YaHei", sans-serif;
  --sans:       var(--sans-fallback);
  --mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gap:        clamp(16px, 3vw, 28px);
  --maxw:       880px;
}

/* ── 结构铁律：应用外壳，全站唯一滚动器是 #scrollRoot ────────
   任何页面都不许留一个活的文档滚动器（跨项目铁律）。
   已知代价（明说）：手机地址栏靠文档滚动才收起，锁死后永久展开；
   iOS 点状态栏一键回顶失效。换来 dvh 不再跳变、彻底没有底部空白。
   ──────────────────────────────────────────────────────── */
html, body {
  height: 100vh;      /* 回落链：老浏览器 */
  height: 100svh;
  height: 100dvh;     /* 禁止裸 100vh 单独使用 */
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
#scrollRoot {
  position: fixed;
  inset: 0;
  top: 56px;                       /* 让开固定顶栏 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* 禁止非 fixed 元素向下位移（transform 计入可滚动溢出区）。
   入场动效只用 opacity 或负值位移。 */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.enter { animation: fadeIn .22s ease both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 顶栏 ──────────────────────────────────────────────── */
.shell-top {
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gap);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 30;
}
.shell-brand {
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.shell-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.shell-nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 14px;
  padding: 6px 10px; border-radius: 8px;
}
.shell-nav a:hover { background: var(--accent-dim); color: var(--accent); }
.shell-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* 语言按钮：顶栏只放一个，点开才列出全部语言。
   7 门语言横排在顶栏，360px 的手机放不下（品牌+导航+7个码 ≈ 434px）。 */
.lang-btn {
  font: inherit; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-left: 6px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  opacity: 1 !important;                 /* C1 */
  transition: filter .12s, border-color .12s;
  white-space: nowrap;
}
.lang-btn:hover  { border-color: var(--accent); color: var(--accent); }
.lang-btn:active { filter: brightness(.94); }   /* C2/C3：变暗用 brightness，不用 opacity */

/* 语言弹层。挂 document.body（A2），遮罩点击有 A1 守卫，ESC 关最上层（A3）。 */
.lang-mask {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 23, 28, .38);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .15s ease both;
}
.lang-sheet {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
  width: 100%; max-width: 320px; overflow: hidden;
  /* A6：高度上限不用裸 vh。iOS 的 vh 按工具栏全收起算，弹层会比可见区高，
     顶部内容跑到屏幕外且滚不回来。优先级 svh > dvh > vh。 */
  max-height: 80vh; max-height: 80dvh; max-height: 80svh;
  display: flex; flex-direction: column;
}
.lang-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.lang-x {
  font: inherit; cursor: pointer; border: 0; background: transparent;
  color: var(--ink-faint); padding: 4px 8px; border-radius: 6px;
  opacity: 1 !important;
}
.lang-x:hover { color: var(--ink); background: var(--accent-dim); }
.lang-list {
  list-style: none; margin: 0; padding: 6px;
  overflow-y: auto; overscroll-behavior: contain;
}
.lang-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  text-decoration: none; color: var(--ink);
}
.lang-list a:hover { background: var(--accent-dim); }
.lang-list a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.lang-native { font-weight: 600; }
.lang-code {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--ink-faint);
}
.lang-list a[aria-current="true"] .lang-code { color: var(--accent-ink); }

/* ── 主体 ──────────────────────────────────────────────── */
main { max-width: var(--maxw); margin: 0 auto; padding: var(--gap); }
h1 { font-size: clamp(26px, 4.5vw, 38px); line-height: 1.2; letter-spacing: -.02em; margin: .2em 0 .3em; }
.lede { color: var(--ink-soft); max-width: 52ch; margin: 0 0 2em; }
.crumb { display: inline-block; font-size: 14px; color: var(--ink-soft); text-decoration: none; margin-bottom: 8px; }
.crumb:hover { color: var(--accent); }

/* 工具卡片网格（首页 + 工具页底部的「换一个」） */
.tool-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); padding: 0; list-style: none; margin: 0; }
.tool-card {
  display: block; padding: 16px 18px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.tool-card .ic { display: block; margin-bottom: 8px; color: var(--accent); }

/* 内联 SVG 图标。跟随 currentColor，不依赖任何字库。 */
.ic-svg { width: 22px; height: 22px; display: block; }
.lang-btn .ic-svg { width: 16px; height: 16px; display: inline-block; vertical-align: -2px; }
.crumb .ic-svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; margin-right: 2px; }
.tool-card .nm { font-weight: 650; display: block; }
.tool-card .bl { font-size: 14px; color: var(--ink-soft); display: block; margin-top: 2px; }

/* 工具挂载点 —— 每个工具把自己的 UI 渲染进这里 */
#tool-root {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(16px, 3vw, 28px);
  margin-bottom: 2.4em;
}

/* 外壳提供的通用控件（工具可直接用，保证全站一致） */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  opacity: 1 !important;                 /* C1：可滚动区里的按钮禁用 opacity 变化 */
  transition: filter .12s;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { filter: brightness(.9); }  /* C2/C3：变暗用 brightness，不用 opacity */
.btn.ghost  { background: transparent; color: var(--accent); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.field {
  font: inherit; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink);
}
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── 页脚 ──────────────────────────────────────────────── */
.shell-foot {
  border-top: 1px solid var(--line); margin-top: 3em;
  padding: 22px var(--gap) 40px; color: var(--ink-faint); font-size: 13px;
  max-width: var(--maxw); margin-inline: auto;
}

/* ── toast（挂 document.body，不挂任何会被重渲染的容器）──── */
#toast-layer { position: fixed; left: 0; right: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 90; }
.toast {
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  border-radius: 999px; font-size: 14px; box-shadow: var(--shadow);
  animation: fadeIn .18s ease both;
}

/* ── 尺寸/间距工具类 ────────────────────────────────────────
   工具需要「这个输入框 5em 宽」时用这些类，不要写内联 style。
   原因不是洁癖：CSP 的 style-src 没有 'unsafe-inline'，
   内联 style 属性会被直接拦掉，输入框会摊成整行宽。
   新增工具时如果需要新尺寸，往这里加一个类，别退回内联。 */
.w-5 { width: 5em; }
.w-6 { width: 6em; }
.mt-12 { margin-top: 12px; }