/* Hallmark · genre: editorial · macrostructure: Catalogue · theme: Almanac · design-system: linxiexie-home/design.md
 * autodl.linxiexie.com — GPU 存货查询台。年鉴式的存货清单:等大卡片(卡型)+ 发丝线,卡内动作,无全局 CTA。
 * 2026-08-16 改版:从「全网自动轮询的目录」改为「按地区手动查询」——用户要求平时零请求,
 * 只有盯单会按各自间隔自动查。因此撤掉了类目带(一次只查一个区)和走势线(没有持续采样了)。
 * Catalogue knobs: cards=auto-fill 11rem, 查询=手动触发, 样本位=无, 行分隔=hairline
 * nav: N9 edge-aligned (右侧改为数据源标签 · wordmark=mono) · footer: Ft1 mast-headed
 * enrichment: none(typography only) · motion: hover-tint
 * tone: utilitarian × editorial — 一张印出来的潮汐表
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* 扩展 token:锁定系统里没有的值一律在此命名,不在规则里写裸值 */
:root {
  --color-paper-3: oklch(91% 0.016 85);   /* 卡片 hover / 空货底色 */
  --wrap-max: 64rem;
  --card-min: 11rem;
  --hit-min: 2.75rem;                      /* 44px 触摸目标 */
}

/* hidden 属性必须压得住作者样式:.gate 有 display:grid,
 * 光靠 UA 的 [hidden]{display:none} 会被特异性击穿,闸门就永远关不上。 */
[hidden] { display: none !important; }

/* ── 版心 ───────────────────────────────────────────────── */

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vh, 2.5rem) clamp(1rem, 4vw, 1.5rem) var(--space-xl);
  box-sizing: border-box;
}

.seal {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--color-accent);
  margin-left: 0.22em;
  vertical-align: 0.06em;
}

/* 双细线:Almanac 的落款线 */
.rule-double {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-ink);
  height: 4px;
  background: none;
  margin: 0 0 var(--space-xl);
}

/* ── N9 边缘对齐导航 ─────────────────────────────────────── */

.topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.wordmark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-neutral);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 数据源标签:必须一眼看出现在的数字跟不跟控制台一致 */
.source-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  text-align: right;
  min-width: 0;
}
.source-tag.is-warn {
  color: var(--color-accent);
}

/* 排版式动作:一个词 + 箭头 + 下划线,不做方块按钮。
 * 下划线一律走 text-decoration 而非 border-bottom——按钮要撑到 44px 触摸目标,
 * border 会被推到盒子底边、和文字脱开三十来像素。 */
.link-action {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: none;
  border: 0;
  padding: 0;
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;              /* 可点文字不许折两行 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-short) var(--ease-out),
              text-decoration-thickness var(--dur-short) var(--ease-out);
}
.link-action:hover { color: var(--color-focus); text-decoration-thickness: 2px; }
.link-action[disabled] { color: var(--color-neutral); cursor: default; }

.link-quiet {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  background: none;
  border: 0;
  padding: 0;
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  transition: color var(--dur-short) var(--ease-out);
}
.link-quiet:hover { color: var(--color-ink); text-decoration-style: solid; }

/* ── 报头 ───────────────────────────────────────────────── */

.ledger-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(2.2rem, 5vw + 0.6rem, 3.4rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}
.ledger-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}
.ledger-line .warn { color: var(--color-accent); }

/* ── 区段 ───────────────────────────────────────────────── */

.band { margin-bottom: var(--space-2xl); }
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  border-bottom: var(--rule-hair) solid var(--color-ink);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}
.band-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  margin: 0;
}
.band-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.empty-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-md) 0;
  max-width: 42em;
}

/* ── 取令牌书签 ─────────────────────────────────────────── */

.bookmarklet-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin: var(--space-md) 0 0;
}
.bookmarklet {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-accent);
  padding: 0.55em 1em;
  text-decoration: none;
  cursor: grab;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out);
}
.bookmarklet:hover { background: var(--color-accent-soft); }
.bookmarklet:active { cursor: grabbing; }

/* ── 盯单 ───────────────────────────────────────────────── */

.watch-list { list-style: none; margin: 0; padding: 0; }
.watch-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* 状态既有颜色也有文字,不靠单一通道传达 */
.w-state {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.w-dot { width: 0.5em; height: 0.5em; flex: none; border: var(--rule-hair) solid currentColor; }
.w-state.is-hit { color: var(--color-accent); }
.w-state.is-hit .w-dot { background: currentColor; }
.w-state.is-wait { color: var(--color-neutral); }
/* 暂停靠「整行变淡 + 文字」区分,不靠一个浅到看不见的色块 */
.w-state.is-off { color: var(--color-neutral); }
.watch-row.is-off .w-gpu,
.watch-row.is-off .w-sub b { color: var(--color-neutral); }

.w-body { min-width: 0; }
.w-gpu {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
}
.w-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.w-sub b { color: var(--color-ink); font-weight: 400; }

.w-acts { display: flex; gap: var(--space-sm); align-items: center; }
.w-acts .link-quiet { min-height: var(--hit-min); display: inline-flex; align-items: center; }

/* ── 添加盯单 ───────────────────────────────────────────── */

.add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) dotted var(--color-rule);
}
.add-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.06em;
}
.add-select, .add-num, .filter-input, .gate-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-neutral);
  padding: 0.4em 0.5em;
  min-height: var(--hit-min);
  box-sizing: border-box;
  border-radius: 0;
  min-width: 0;
}
.add-select { max-width: 12rem; }
.add-select.is-tiny { max-width: 9rem; font-size: var(--text-xs); }
.add-num { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ── 筛选 ───────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-lg);
}
.filter-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.06em;
}
.filter-check {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: var(--hit-min);
  cursor: pointer;
  white-space: nowrap;
}
.filter-check input { accent-color: var(--color-accent); width: 0.9em; height: 0.9em; }
.filter-spacer { flex: 1 1 auto; }
.filter-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}


/* ── 存货卡片 ───────────────────────────────────────────── */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-sm);
}
.card {
  min-width: 0;
  border: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  transition: border-color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.card:hover { border-color: var(--color-neutral); background: var(--color-paper-2); }
.card.is-empty { background: var(--color-paper-2); }
.card.is-watched { border-color: var(--color-accent); }

.c-gpu {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
.c-nums {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral);
  margin: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.c-idle { font-size: var(--text-md); color: var(--color-ink); }
.card.is-empty .c-idle { color: var(--color-neutral); }
.card.is-scarce .c-idle { color: var(--color-accent); }
.c-nums.is-changing { opacity: 0; }


.c-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-2xs);
}
.c-rate {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  font-variant-numeric: tabular-nums;
}
.c-act {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: none;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  min-height: var(--hit-min);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-short) var(--ease-out);
}
.c-act:hover, .c-act.is-on { color: var(--color-accent); }
.c-act.is-on { text-decoration-thickness: 2px; }

/* ── Ft1 字标带 ─────────────────────────────────────────── */

.mast-foot {
  border-top: var(--rule-hair) solid var(--color-ink);
  padding-top: var(--space-md);
  margin-top: var(--space-2xl);
}
.foot-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  margin: 0;
}
.foot-tag {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: var(--space-2xs) 0 var(--space-sm);
}
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  margin: 0;
}

/* ── 口令闸 ─────────────────────────────────────────────── */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  box-sizing: border-box;
}
.gate-form { width: min(22rem, 100%); }
.gate-domain {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-neutral);
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
}
.gate-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-lg);
}
.gate-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2xs);
}
.gate-input { width: 100%; margin-bottom: var(--space-md); }
.gate-msg {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin: var(--space-sm) 0 0;
  min-height: 1.2em;
}

/* ── 提示条 ─────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-lg);
  transform: translateX(-50%);
  max-width: min(28rem, calc(100vw - 2rem));
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-xs) var(--space-md);
  margin: 0;
  z-index: 10;
}

/* ── 响应式 ─────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .watch-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .w-state { grid-column: 1 / -1; }
  .ledger-line { line-height: 1.8; }
  .add-select { max-width: 100%; flex: 1 1 8rem; }
  .band-head, .region-head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .c-nums.is-changing { opacity: 1; }
}