/* Archive bar injected at the top of every archived page (scripts/legacy/build_archive.py).
   Self-contained: it must read well on the old site's dark and light themes. */
.dx-archive-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px;
  padding: 10px max(16px, env(safe-area-inset-left)); margin: 0;
  background: #1a1630; color: #d9d4ff; border-top: 1px solid rgba(154, 140, 255, 0.35);
  font: 400 13px/1.5 "PingFang SC", "PingFang TC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Bottom of the viewport: the old site's header is position:fixed at top:0. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}
body:has(> .dx-archive-bar) { padding-bottom: 48px; }
@media (max-width: 720px) {
  .dx-archive-bar { gap: 4px 14px; padding-top: 8px; font-size: 12px; }
  .dx-archive-bar p span { display: none; } /* keep phones to one or two lines */
  body:has(> .dx-archive-bar) { padding-bottom: 76px; }
}
.dx-archive-bar p { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dx-archive-bar strong { color: #fff; font-weight: 600; }
.dx-archive-bar nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dx-archive-bar a { color: #d9d4ff; text-decoration: underline; text-underline-offset: 3px; }
.dx-archive-bar a.dx-archive-cta { color: #fff; font-weight: 600; text-decoration: none; }
.dx-archive-bar a:hover { color: #fff; }
:root[data-theme="light"] .dx-archive-bar { background: #efedff; color: #3b2fa0; border-top-color: rgba(90, 69, 224, 0.25); box-shadow: 0 -8px 30px rgba(20, 22, 28, 0.08); }
:root[data-theme="light"] .dx-archive-bar strong { color: #1f1760; }
:root[data-theme="light"] .dx-archive-bar a { color: #3b2fa0; }
:root[data-theme="light"] .dx-archive-bar a.dx-archive-cta { color: #1f1760; }