/* qnap-skill.html and its nine language versions (tools/node/site-skill-page.mjs, docs/site/skill.md): the QNAP
   guidelines skill. The page body is the bucketvs session's section (.qsk, its own scoped <style> in the page); this
   sheet hands it the site's palette and type through its own tokens, written under "main" because the section's style
   comes later in the page, and adds the language nav and what the translated pages need. site.css stays shared. */
main .qsk {
  --qsk-bg: transparent;
  --qsk-panel: var(--panel);
  --qsk-line: var(--rule);
  --qsk-fg: var(--ink);
  --qsk-muted: #9aa7ae;
  --qsk-accent: var(--led);
  --qsk-accent-ink: #1a1206;
  font-family: var(--sans);
}
/* the page's width is the site's column, as on every other page (the owner, 2026-09-28 08:20): the section's own
   1040 px cap goes, the site's gutters come in, and running text keeps a readable measure */
main .qsk {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gut);
}
main .qsk > * {
  max-width: none;
}
main .qsk .qsk-lead,
main .qsk .qsk-meta,
main .qsk .qsk-licence p {
  max-width: 78ch;
}
main .qsk h2,
main .qsk h3 {
  font-family: var(--cond);
}
main .qsk code,
main .qsk pre,
main .qsk .qsk-eyebrow {
  font-family: var(--mono);
}
/* the download button keeps its label readable at rest, on hover and on focus wherever it sits */
main .qsk .qsk-btn,
main .qsk .qsk-btn:hover,
main .qsk .qsk-btn:focus-visible {
  color: var(--qsk-accent-ink);
}
main .qsk .qsk-sum {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--dim);
  overflow-wrap: anywhere;
}
main .qsk .qsk-sum code {
  font-size: 12px;
}

/* ── the page in every language: one quiet line above the section, the current language marked ── */
.qs-langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.qs-langs a,
.qs-langs span {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.qs-langs a:hover,
.qs-langs a:focus-visible {
  color: var(--led);
}
.qs-langs [aria-current] {
  color: var(--ink);
  border-bottom-color: var(--led);
}
.qs-langs [lang='ja'] {
  font-family:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP',
    'Noto Sans CJK JP', sans-serif;
}
.qs-langs [lang='zh-TW'] {
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}

/* ── Japanese and Traditional Chinese: the Plex faces have no CJK glyphs, so each page names its fallbacks (the
   Latin words keep Plex), and the wide letter-spacing of the uppercase labels goes, since CJK has no case ── */
:root:lang(ja) {
  --cjk:
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans JP',
    'Noto Sans CJK JP';
}
:root:lang(zh-TW) {
  --cjk: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', 'Noto Sans CJK TC';
}
:root:lang(ja),
:root:lang(zh-TW) {
  --sans: 'IBM Plex Sans', var(--cjk), ui-sans-serif, system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', var(--cjk), ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, var(--cjk), monospace;
}
:lang(ja) :is(.chip, .qsk-eyebrow, footer .un),
:lang(zh-TW) :is(.chip, .qsk-eyebrow, footer .un) {
  letter-spacing: 0.04em;
}