/* 二级页面样式：笔记列表、站史、工具、实验室。
   复用 style.css 的设计令牌与 blog.css 的页头/页脚骨架。 */

/* ---------- 笔记列表 ---------- */
.note-list { margin-top: var(--space-12); border-top: 1px solid var(--line); }
.note {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.note__meta {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.note__hash { color: var(--text-secondary); transition: color var(--duration-fast) var(--ease); }
.note__hash:hover { color: var(--accent); }
.note__body { max-width: 40em; }
.note__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
.note__title a { transition: color var(--duration-fast) var(--ease); }
.note__title a:hover { color: var(--accent); }
.note__text { margin-top: var(--space-3); color: var(--text-secondary); }
.note__text > * + * { margin-top: var(--space-3); }
.note__text code {
  padding: 0.12em 0.36em; border-radius: 5px;
  background: rgb(245 242 236 / 8%); font-family: var(--font-mono); font-size: 0.9em;
}
.note__text pre {
  padding: var(--space-4); border: 1px solid var(--line); border-radius: 10px;
  overflow-x: auto; background: rgb(245 242 236 / 3%); font-size: 0.8125rem;
}
.note__text pre code { padding: 0; background: none; }
html[data-theme="light"] .note__text code { background: rgb(23 23 28 / 6%); }
html[data-theme="light"] .note__text pre { background: rgb(23 23 28 / 3%); }

/* 单条笔记页：比文章更窄 */
.note-post { max-width: 38em; }
.note-post .post__body { font-size: 1.0625rem; }

@media (max-width: 767px) {
  .note { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-6); }
}

/* ---------- 站史 ---------- */
.page-lead {
  max-width: 40em; margin-top: var(--space-6);
  color: var(--text-secondary);
}
.log { margin-top: var(--space-12); border-left: 1px solid var(--line); padding-left: var(--space-6); }
.log__item { position: relative; padding-bottom: var(--space-12); }
.log__item::before {
  content: ""; position: absolute; left: calc(var(--space-6) * -1 - 4px); top: 0.7em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong);
}
.log__item--now::before { background: var(--accent); box-shadow: 0 0 0 4px rgb(255 111 181 / 14%); }
.log__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.log__ver { font-family: var(--font-mono); font-size: 0.875rem; color: var(--accent); letter-spacing: 0.04em; }
.log__date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.log__title { margin-top: var(--space-2); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; }
.log__body { max-width: 44em; margin-top: var(--space-3); color: var(--text-secondary); }
.log__body > * + * { margin-top: var(--space-2); }
.log__body ul { padding-left: 1.2em; list-style: revert; }
.log__body code { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- 工具清单 ---------- */
.uses { margin-top: var(--space-12); display: grid; gap: var(--space-12); }
.uses__group h2 {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.uses__list { border-top: 1px solid var(--line); }
.uses__row {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-6);
  padding-block: var(--space-4); border-bottom: 1px solid var(--line);
}
.uses__name { font-family: var(--font-mono); font-size: 0.9375rem; }
.uses__desc { color: var(--text-secondary); }
.uses__desc code { font-family: var(--font-mono); font-size: 0.875em; }

@media (max-width: 767px) {
  .uses__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding-block: var(--space-4); }
}

/* ---------- 实验室 ---------- */
.lab { margin-top: var(--space-8); display: grid; gap: var(--space-5); max-width: 54rem; }
.lab__title { font-size: 1.125rem; font-weight: 700; margin-bottom: var(--space-5); }
.lab__panel {
  padding: var(--space-6); border: 1px solid var(--line); border-radius: 16px;
  background: rgb(247 244 239 / 3%);
}
html[data-theme="light"] .lab__panel { background: #ffffff; }

.lab__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.lab__field { display: grid; gap: var(--space-2); }
.lab__field label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-secondary);
}
.lab__field input[type="color"] {
  width: 100%; height: 46px; padding: 3px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: transparent;
}
html[data-theme="light"] .lab__field input[type="color"] { background: #ffffff; }
.lab__field input[type="text"] {
  width: 100%; min-height: var(--target); padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 10px;
  background: rgb(247 244 239 / 4%); color: var(--text);
  font-family: var(--font-mono); font-size: 0.9375rem;
}
.lab__field input[type="text"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.lab__result {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.lab__ratio {
  font-family: var(--font-mono); font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.lab__ratio small { font-size: 0.9rem; font-weight: 400; color: var(--text-secondary); margin-left: 0.2em; }
.lab__verdicts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lab__badge {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text-secondary);
}
.lab__badge--pass { border-color: rgb(109 223 161 / 46%); color: #8fe0b4; background: rgb(109 223 161 / 8%); }
.lab__badge--fail { border-color: rgb(255 111 181 / 46%); color: #ffa8cd; background: rgb(255 111 181 / 8%); }
html[data-theme="light"] .lab__badge--pass { color: #16724a; border-color: rgb(22 114 74 / 40%); background: rgb(22 114 74 / 8%); }
html[data-theme="light"] .lab__badge--fail { color: #a3205c; border-color: rgb(163 32 92 / 40%); background: rgb(163 32 92 / 8%); }

.lab__sample {
  margin-top: var(--space-5); padding: var(--space-6); border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 1rem; line-height: 1.7;
}
.lab__sample strong { display: block; font-size: 1.25rem; margin-bottom: var(--space-2); }
.lab__sample span { display: block; font-size: 0.875rem; color: inherit; opacity: 0.86; }

.lab__presets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.lab__preset {
  min-height: var(--target); padding: 0 var(--space-4);
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent;   /* 不写就会露出浏览器自己的灰色按钮底 */
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.lab__preset:hover { border-color: var(--line-strong); color: var(--text); }
.lab__preset[aria-pressed="true"] { border-color: var(--a2); color: var(--text); }

.lab__note { max-width: 44em; color: var(--text-secondary); font-size: var(--size-small); }
.lab__note code { font-family: var(--font-mono); font-size: 0.9em; }

/* ---------- 404 ---------- */
.lost { margin-top: var(--space-12); }
.lost__title {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-6);
}
.lost__code {
  width: fit-content; margin: 0 0 var(--space-6) auto;
  font-family: var(--font-mono); font-size: clamp(4rem, 18vw, 9rem); font-weight: 700;
  line-height: 0.85; color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}
.lost__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.lost__link {
  display: grid; gap: var(--space-2); align-content: start;
  min-height: var(--target); padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line); border-radius: 14px;
  background: rgb(245 242 236 / 2%);
  transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.lost__link:hover { border-color: var(--a2); background: rgb(245 242 236 / 5%); transform: translateY(-3px); }
.lost__name { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; }
.lost__desc { font-size: var(--size-small); color: var(--text-secondary); }
.lost__note { margin-top: var(--space-8); color: var(--text-secondary); font-size: var(--size-small); }
html[data-theme="light"] .lost__link { background: #ffffff; }
html[data-theme="light"] .lost__link:hover { background: rgb(23 23 28 / 4%); }

/* ========== v29 贴纸墙（学 yucihent.me 的飘浮贴纸桌） ==========
   贴纸是 /uses 里真实在用的工具，注释用等宽小字；
   飘不飘由访客手里那枚开关决定，选择记在本地。 */
.stickers {
  position: relative; height: 430px;
  margin: var(--space-8) 0 var(--space-9);
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.sticker {
  position: absolute; left: min(var(--x), calc(100% - 132px)); top: var(--y);
  display: grid; gap: 3px; padding: 10px 14px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px 16px 12px 18px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 28%);
  transform: rotate(var(--r, 0deg));
}
.sticker::before {
  content: ""; position: absolute; left: 50%; top: -9px;
  width: 44px; height: 14px; transform: translateX(-50%) rotate(-2deg);
  background: rgb(247 244 239 / 14%);
  border: 1px solid rgb(247 244 239 / 10%);
}
.sticker i { font-style: normal; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.sticker em {
  font-style: normal; font-family: var(--font-mono);
  font-size: 0.625rem; letter-spacing: 0.14em; color: var(--a2); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: sticker-float 6.5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
}
.stickers.is-calm .sticker { animation: none; }
@keyframes sticker-float { 50% { translate: 0 -9px; } }
.stickers__switch {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  color: var(--text-secondary);
}
.stickers__switch input { accent-color: var(--a2); width: 15px; height: 15px; cursor: pointer; }
html[data-theme="light"] .sticker { background: #ffffff; box-shadow: 0 10px 24px rgb(30 28 50 / 12%); }
html[data-theme="light"] .sticker::before { background: rgb(30 28 50 / 8%); border-color: rgb(30 28 50 / 6%); }
@media (max-width: 639px) {
  /* 窄屏上九张贴纸散开必叠字：改成自然换行的一桌，歪斜、胶带和飘动都留着。 */
  .stickers {
    height: auto; display: flex; flex-wrap: wrap;
    gap: 16px 12px; padding: 20px 14px 64px;
  }
  .sticker { position: static; padding: 8px 11px 7px; }
  .sticker i { font-size: 0.8125rem; }
}

/* 飘动开关只有脚本在才管用：没脚本时不摆一个点了没反应的复选框。 */
html:not([data-js]) .stickers__switch { display: none; }

/* ---------- v38 笔记列表：页内索引 + 渲染跳过 ----------
   12 条全文排下来是全站最长的页：正文前的索引卡直达某条；
   content-visibility 让视口外的条目跳过渲染（滚动进场的瞬间才画）。 */
.notes-index {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-8); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line); border-radius: 14px;
  background: rgb(245 242 236 / 2%);
}
html[data-theme="light"] .notes-index { background: rgb(30 28 50 / 3%); }
.notes-index__title {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary);
}
.notes-index a {
  color: var(--text); font-size: var(--size-small); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.notes-index a:hover { color: var(--accent); border-bottom-color: currentColor; }

.note {
  content-visibility: auto;
  /* 估个占位高度：滚动条不至于来回抖；进场后按真实高度渲染 */
  contain-intrinsic-size: auto 360px;
}

/* ---------- v44 实验室：缓动曲线 ---------- */
.lab__ease-lead { color: var(--text-secondary); margin-bottom: var(--space-5); }
.lab__ease-lead code { font-family: var(--font-mono); font-size: 0.8125rem; }
.lab__curve-wrap {
  display: flex; align-items: center; gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.lab__curve {
  flex: 0 0 auto; width: 300px; height: 180px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgb(245 242 236 / 3%);
  overflow: visible;  /* 过冲（y>1）时点会画出上边界——让它可见 */
}
html[data-theme="light"] .lab__curve { background: rgb(30 28 50 / 3%); }
.lab__grid { stroke: var(--line); stroke-width: 1; }
.lab__line {
  fill: none; stroke: var(--a2); stroke-width: 2.5; stroke-linecap: round;
}
.lab__line--linear { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 4; }
.lab__dot { fill: var(--a3); }
.lab__dot--linear { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; }
.lab__ease-read { font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary); }
.lab__ease-read output { color: var(--text); font-size: 1.25rem; }
.lab__fields--four { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 639px) {
  .lab__curve-wrap { flex-direction: column; align-items: flex-start; }
  .lab__curve { width: 100%; height: auto; }
  .lab__fields--four { grid-template-columns: repeat(2, 1fr); }
}