/* ============================================================
   update-history.css — 各アプリの更新履歴ページ（<app>/update-history.html）
   アプリ個別の CSS（--primary など）と subsite.css の後に読み込む。
   本文色は、ページ側の <style> で --uh-text / --uh-sub を指定する。
   ============================================================ */
.uh-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
  color: var(--uh-text, #e2e8f0);
}
.uh-header { margin-bottom: 3rem; text-align: center; }
.uh-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: var(--primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.uh-title {
  font-family: 'Syne', 'Noto Sans JP', sans-serif;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
}
.uh-sub { color: var(--uh-sub, #94a3b8); font-size: 0.9rem; }

.uh-timeline { position: relative; padding-left: 2rem; }
.uh-timeline::before {
  content: '';
  position: absolute;
  left: 0.4rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 10%, transparent));
}
.uh-item {
  position: relative;
  margin-bottom: 1.75rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.uh-item:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}
.uh-item::before {
  content: '';
  position: absolute;
  left: -1.65rem; top: 1.4rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--glow);
}
.uh-item.latest::before {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  box-shadow: 0 0 12px var(--glow);
}
.uh-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', 'Noto Sans JP', monospace;
  font-size: 0.78rem;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.6rem;
}
.uh-item.latest .uh-badge { border-color: color-mix(in srgb, var(--primary) 55%, transparent); }
.uh-summary {
  color: var(--uh-text, #e2e8f0);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.6rem;
}
.uh-list { list-style: none; padding: 0; margin: 0; }
.uh-list li {
  color: var(--uh-sub, #94a3b8);
  font-size: 0.92rem;
  line-height: 1.7;
  padding: 0.2rem 0;
}
.uh-kind {
  display: inline-block;
  min-width: 2.6em;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 4px;
  padding: 0 0.4em;
  margin-right: 0.6em;
  vertical-align: 0.1em;
  color: var(--uh-text, #e2e8f0);
  background: color-mix(in srgb, var(--uh-sub, #94a3b8) 20%, transparent);
}
.uh-kind-add { background: color-mix(in srgb, #22c55e 22%, transparent); }
.uh-kind-fix { background: color-mix(in srgb, #f97316 22%, transparent); }
.uh-kind-chg { background: color-mix(in srgb, #3b82f6 22%, transparent); }
.uh-note, .uh-feedback {
  color: var(--uh-sub, #94a3b8);
  font-size: 0.85rem;
  line-height: 1.7;
  text-align: center;
  margin-top: 1.5rem;
}
.uh-feedback a { color: var(--primary); text-decoration: underline; }

@media (max-width: 560px) {
  .uh-wrap { padding: 2.5rem 1rem 4rem; }
  .uh-item { padding: 1rem 1.1rem; }
}