/* ==========================================================================
   小工具大全 · 附属站 —— 门户样式
   设计语言：DESIGN.md「暴露结构」（新粗野主义）
     · 结构即外观：2px / 3px 墨线，4px 零模糊位移块，零圆角
     · 一张纸 + 一色墨 + 一个中性墨强调块；无渐变、无模糊、无玻璃
     · 工具色只描图标（Domain-Color Discipline Rule）
   字号全部取自 DESIGN.md 的 18 档刻度，不新造档位。
   ========================================================================== */

/* --- 令牌 ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  --c-paper: #f4f1ea;
  --c-surface: #ffffff;
  --c-surface-hover: #ededeb;
  --c-text: #0a0a0a;
  --c-text-2: #5c5a54;
  --c-accent: #2a2a2a;          /* 本页唯一的强调色：中性墨 */
  --c-on-accent: #ffffff;
  --c-grid: rgba(10, 10, 10, .07);

  --nb-rule: 2px;
  --nb-rule-heavy: 3px;
  --nb-scrim: rgba(10, 10, 10, .72);
  --nb-dur: 140ms;
  --nb-ease: cubic-bezier(.2, 0, 0, 1);

  --w-col: 52rem;
  --w-narrow: 22rem;

  --f-disp: "Archivo NB", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "Mono NB", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --c-paper: #15161a;
  --c-surface: #1c1e23;
  --c-surface-hover: #262a31;
  --c-text: #f2efe6;
  --c-text-2: #a5a29a;
  --c-accent: #f2efe6;          /* 深色下强调块换成纸色块：实心反白的关系反转，语义不变 */
  --c-on-accent: #15161a;
  --c-grid: rgba(242, 239, 230, .07);
}

/* --- 基础 ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--c-paper);
  /* 唯一允许使用渐变的场合：两条硬停止的结构缝网格（DESIGN.md Don't 的既有例外） */
  background-image:
    linear-gradient(to right, var(--c-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-grid) 1px, transparent 1px);
  background-size: 2rem 2rem;
  color: var(--c-text);
  font-family: var(--f-disp);
  font-size: .9rem;                                             /* body-lg：页面正文基准 */
  line-height: 1.5;
  scrollbar-color: var(--c-text) var(--c-paper);
}

::selection { background: var(--c-text); color: var(--c-paper); }

:focus-visible { outline: var(--nb-rule-heavy) solid var(--c-accent); outline-offset: 2px; }

h1, p { margin: 0; }

svg { display: block; }

a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: calc(var(--w-col) + 2rem);
  margin: 0 auto;
  padding: 1.2rem 1rem 1.6rem;
}

/* --- 规格牌（Spec Plate）------------------------------------------------- */
.plate {
  background: var(--c-surface);
  border: var(--nb-rule) solid var(--c-text);
  box-shadow: 4px 4px 0 var(--c-text);
}

.plate__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem .7rem;
  border-bottom: var(--nb-rule-heavy) solid var(--c-text);
}

.plate__tag {
  min-width: 0;
  font-family: var(--f-mono);
  font-size: .7rem;                                             /* label-xs：刻度下限 */
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-2);
}

.plate__body {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .75rem .5rem;
}

/* 铭牌：图形与 favicon.svg 一致；favicon 里不画外框，页面上的边界交给 CSS 描边 */
.brand {
  flex: none;
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  border: var(--nb-rule-heavy) solid var(--c-text);
  background: #f4f1ea;                                          /* 铭牌自带纸底，深色主题下也不换 */
}

.brand__mark { width: 100%; height: 100%; }

.plate__name {
  min-width: 0;
  font-size: 2.3rem;                                            /* display-xl */
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.plate__name-sub {
  display: inline-block;
  margin-left: .5rem;
  font-size: .82rem;                                            /* title-xs */
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--c-text-2);
  vertical-align: baseline;
}

.plate__data {
  padding: 0 .75rem .8rem;
  font-family: var(--f-mono);
  font-size: .7rem;                                             /* label-xs */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--c-text-2);
}

/* --- 工具格阵 ------------------------------------------------------------ */
/* 格与格之间是 2px 结构缝，不是留白：
   每格自带完整墨线并用负位移与邻居重叠成一条缝；
   第一行/第一列溢出的 2px 由容器内距吸收，末行不满时露出的空位保持面底色，
   外框的右边与底边由 ::after / ::before 补全，因此行尾空位不会破坏闭合。 */
.tools {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: .8rem;
  padding: var(--nb-rule) 0 0 var(--nb-rule);
  background: var(--c-surface);
  box-shadow: 4px 4px 0 var(--c-text);
}

.tools:empty { display: none; }

.tools::before,
.tools::after {
  content: "";
  position: absolute;
  background: var(--c-text);
}

.tools::before { left: 0; right: 0; bottom: 0; height: var(--nb-rule); }

.tools::after { top: 0; right: 0; bottom: 0; width: var(--nb-rule); }

.tool {
  --tool-accent: var(--c-text);

  display: flex;
  align-items: center;
  gap: .7rem;
  margin: calc(-1 * var(--nb-rule)) 0 0 calc(-1 * var(--nb-rule));
  padding: .75rem .8rem;
  background: var(--c-surface);
  border: var(--nb-rule) solid var(--c-text);
  color: var(--c-text);
  text-decoration: none;
  transition:
    background-color var(--nb-dur) var(--nb-ease),
    transform var(--nb-dur) var(--nb-ease);
}

.tool__icon {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: var(--tool-accent);                                   /* 工具色只描图标 */
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.tool__body { flex: 1 1 auto; min-width: 0; }

.tool__name {
  display: block;
  font-size: .94rem;                                            /* title-sm */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.tool__desc {
  display: block;
  margin-top: .3rem;
  font-size: .72rem;                                            /* label */
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-text-2);
}

.tool__arrow {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--c-text);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform var(--nb-dur) var(--nb-ease);
}

@media (hover: hover) {
  .tool:hover { background-color: var(--c-surface-hover); }
  .tool:hover .tool__arrow { transform: translateX(3px); }
}

.tool:active { transform: translate(var(--nb-rule), var(--nb-rule)); }

/* --- 图标按钮 ------------------------------------------------------------ */
.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  background: var(--c-surface);
  border: var(--nb-rule) solid var(--c-text);
  box-shadow: 3px 3px 0 var(--c-text);
  color: var(--c-text);
  cursor: pointer;
  transition:
    background-color var(--nb-dur) var(--nb-ease),
    color var(--nb-dur) var(--nb-ease),
    border-color var(--nb-dur) var(--nb-ease),
    transform var(--nb-dur) var(--nb-ease),
    box-shadow var(--nb-dur) var(--nb-ease);
}

/* 实心方块 = 深色，空心方块 = 浅色；状态不靠颜色，靠实心/空心 + aria-label */
.icon-btn__glyph {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.icon-btn.is-dark .icon-btn__glyph { fill: currentColor; stroke: none; }

@media (hover: hover) {
  .icon-btn:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-on-accent);
  }
}

.icon-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0; }

/* --- 页脚 ---------------------------------------------------------------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem .8rem;
  margin-top: 1rem;
  padding-top: .6rem;
  border-top: var(--nb-rule) solid var(--c-text);
  font-family: var(--f-mono);
  font-size: .7rem;                                             /* label-xs */
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-2);
}

.foot__meta { white-space: nowrap; }

.foot__link {
  padding: .1rem .2rem;
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

@media (hover: hover) {
  .foot__link:hover {
    background: var(--c-accent);
    color: var(--c-on-accent);
    text-decoration: none;
  }
}

/* --- 告示牌（404）-------------------------------------------------------- */
.notice {
  width: 100%;
  max-width: var(--w-narrow);
  margin-top: .8rem;
  background: var(--c-surface);
  border: var(--nb-rule) solid var(--c-text);
  box-shadow: 4px 4px 0 var(--c-text);
}

.notice__top {
  padding: .5rem .7rem;
  border-bottom: var(--nb-rule-heavy) solid var(--c-text);
  font-family: var(--f-mono);
  font-size: .7rem;                                             /* label-xs */
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text-2);
}

.notice__body { padding: .8rem .75rem .5rem; }

.notice__code {
  font-family: var(--f-mono);
  font-size: 1.5rem;                                            /* display-md */
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.notice__text {
  margin-top: .3rem;
  font-size: .9rem;                                             /* body-lg */
  line-height: 1.5;
}

.notice__acts { padding: 0 .75rem .8rem; }

.btn {
  display: inline-block;
  padding: .6rem 1rem;
  background: var(--c-accent);                                  /* 一屏唯一的强调色实心块 */
  border: var(--nb-rule) solid var(--c-text);
  box-shadow: 3px 3px 0 var(--c-text);
  color: var(--c-on-accent);
  font-family: var(--f-mono);
  font-size: .8rem;                                             /* body-sm */
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition:
    transform var(--nb-dur) var(--nb-ease),
    box-shadow var(--nb-dur) var(--nb-ease);
}

.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0; }

/* --- 响应式 -------------------------------------------------------------- */
/* ≥768px 锁定 16px 根字号；以下按视口缩放（DESIGN.md 既有约定） */
@media (max-width: 767px) {
  html { font-size: clamp(14px, 4.1vw, 16px); }
  .wrap { padding: .9rem .7rem 1.2rem; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .tools { grid-template-columns: repeat(2, 1fr); }
  /* 末行只剩一格时让它铺满整行：不给格阵留出空洞 */
  .tools > .tool:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
  .tools > .tool:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ≤400px 保留文字、不缩字号，靠收内距与负字距腾宽度 */
@media (max-width: 400px) {
  .plate__name { font-size: 1.25rem; }                          /* display-xl-narrow */
  .plate__name-sub { display: block; margin: .3rem 0 0; }
  .brand { width: 2.6rem; height: 2.6rem; }
  .tool { padding: .7rem .6rem; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
  }
}