/* Per-article CN/EN/bilingual display. Chinese is the page's real HTML; English
   copies are inserted by article-i18n.js. Loaded only when a post has translations. */
/* The paper panel itself is the positioning context — the switcher rides the
   panel's own top-right corner, the way a window's controls ride the window
   frame, so it must not be anchored to the article block inside the panel. */
.post .wrapper {
  position: relative;
}

/* Window controls: the 中 / EN / 双 row sits ON the paper panel's top-right
   corner — top edge flush with the panel's top edge, right edge flush with its
   right edge — the way an app window's minimise/maximise/close buttons ride the
   window frame. Bare cells, no frame and no rules of any kind: invisible until
   hovered, exactly like window controls. Warm palette, not the OS's dark chrome.
   No breakpoint needed — the corner is the corner at every width. */
.article-lang-switcher {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 6;
  display: flex;
  flex-direction: row;
  gap: 0;
  margin: 0;
}

.article-lang-switcher button {
  cursor: pointer;
  width: 46px;
  height: 30px;
  padding: 0;
  /* Sans, not the body serif: these are chrome, not content. */
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: transparent;
  border: none;
  border-radius: 0;
  transition: color 0.12s ease, background-color 0.12s ease;
}

/* Window controls darken the whole cell on hover — --surface is too close to
   --paper to read here, so tint with ink instead. */
.article-lang-switcher button:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Solid copper, not a wash. A pale tint here read as a hole punched in the
   panel corner, because it landed within a shade of --band just outside it;
   filling the cell makes the active language a positive mark instead. */
.article-lang-switcher button[aria-pressed="true"] {
  color: var(--paper);
  background: var(--accent);
}

.article-lang-switcher button[aria-pressed="true"]:hover {
  background: var(--accent-strong);
}

.article-lang-switcher button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

html[data-article-lang="zh"] .lang-en { display: none; }
html[data-article-lang="en"] .lang-zh { display: none; }
html[data-article-lang="both"] .lang-zh,
html[data-article-lang="both"] .lang-en { display: block; }

html[data-article-lang="both"] .lang-en { margin-top: 0.35rem; color: var(--ink-2); }

/* Soft cross-fade while article-i18n.js swaps languages (no page reload). */
[data-article-i18n] {
  transition: opacity 0.18s ease;
}

[data-article-i18n].lang-switching {
  opacity: 0;
}

/* 双语模式下标题的英文副题（JS 插入在 h1 之后）。 */
.post-title-en {
  margin: 0 0 2rem 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

.post-header--left .post-title-en {
  text-align: left;
}

/* 有英文副题时收紧 h1 与副题的间距（原 h1 下边距 2rem 让给副题）。 */
.post-header:has(.post-title-en:not([hidden])) .post-title {
  margin-bottom: 0.6rem;
}