/* Shared styles for the SEO satellite pages (/offline-document-editor,
   /no-signup-document-editor, /open/*, /convert/*, and their /zh-CN/
   mirrors). Utilitarian document layout, but on the same design system as the
   homepage: every value comes from the ranui token layer (/ran-tokens.css,
   loaded before this file), the chrome is real ranui components registered by
   the /ranui-iife/<name>.iife.js bundles (<r-button>, <r-card>), and the
   visual language mirrors
   home.css — hairline rules, mono type for machine facts, blue spent only on
   the primary action. Dark mode comes from the token layer for free. */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--ran-color-bg);
  color: var(--ran-color-text);
  font-family: var(--ran-font-family);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--ran-color-link);
}
a:focus-visible {
  outline: 2px solid var(--ran-color-link);
  outline-offset: 2px;
}

/* ---------- top bar (mirrors the homepage bar) ---------- */
header.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ran-space-4);
  padding: var(--ran-space-4) clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--ran-color-border);
}
header.bar .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ran-color-text);
  text-decoration: none;
}
header.bar .logo {
  width: 24px;
  height: 24px;
  border-radius: var(--ran-radius-sm);
  /* monochrome mark (Geist): ink on page bg, inverts with the theme */
  background: var(--ran-color-text);
  display: inline-grid;
  place-items: center;
  color: var(--ran-color-bg);
  font-size: 13px;
  font-weight: 700;
}
header.bar nav {
  display: flex;
  align-items: center;
  gap: var(--ran-space-1);
}
header.bar nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-2);
  padding: var(--ran-space-2) var(--ran-space-3);
  border-radius: var(--ran-radius-sm);
  font-size: 14px;
  color: var(--ran-color-text-secondary);
  text-decoration: none;
  transition: 0.15s ease;
}
header.bar nav a:hover {
  color: var(--ran-color-text);
  background: var(--ran-color-bg-hover);
}
.ghmark {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}
/* language switch: same ranui <r-select> as the homepages, wired by the shared
   /lang-switch.js (targets declared as data-href on the options) */
.lang-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--ran-space-1);
  padding-left: var(--ran-space-1);
}
.langmark {
  width: 15px;
  height: 15px;
  color: var(--ran-color-text-secondary);
  flex: none;
}
r-select.lang-select {
  display: inline-block;
  min-width: 84px;
  font-size: 14px;
  height: 44px;
}
/* hide the raw option list pre-upgrade; the reserved width avoids layout shift */
r-select.lang-select:not(:defined) {
  visibility: hidden;
}

/* ---------- article column ---------- */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--ran-space-6) clamp(20px, 5vw, 56px) var(--ran-space-10);
}
.eyebrow {
  margin: var(--ran-space-8) 0 0;
  font: 600 12px/1 var(--ran-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* gray mono label — blue is reserved for links */
  color: var(--ran-color-text-secondary);
}
h1 {
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: var(--ran-space-3) 0 var(--ran-space-3);
  text-wrap: balance;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: var(--ran-space-10) 0 var(--ran-space-4);
  padding-bottom: var(--ran-space-3);
  border-bottom: 1px solid var(--ran-color-border);
}
p {
  margin: var(--ran-space-3) 0;
}
.lead {
  font-size: 18px;
  color: var(--ran-color-text-secondary);
  margin: 0 0 var(--ran-space-4);
}

/* CTA: a real <r-button> wrapped in a link (static pages navigate, not script) */
.cta {
  display: inline-block;
  margin: var(--ran-space-4) 0 var(--ran-space-5, 20px);
  text-decoration: none;
}
/* r-button exports parts "button" (container) and "content" (padding/border/
   typography). The :not(:defined) fallback below must stay pixel-identical to
   these values or the custom-element upgrade flashes on load. */
/* The raised shadow ranui paints sits on the HOST element, while the radius
   below only reaches the exported parts inside the shadow DOM. The host keeps
   its own radius (ranui does not set one), so a pill ends up wrapped in a
   rectangular shadow: a straight line under the button, poking out past both
   rounded ends. Barely visible at ranui's 6px default, obvious at --ran-radius-full.
   Give the host the same radius as the thing it wraps. */
.cta r-button,
.cta r-button::part(button) {
  border-radius: var(--ran-radius-full);
}
.cta r-button::part(content) {
  border-radius: var(--ran-radius-full);
  padding: var(--ran-space-3) var(--ran-space-6);
  font-size: 15.5px;
  font-weight: 600;
}
/* pre-upgrade fallback so the CTA is a styled, clickable button even before
   (or without) the /ranui-iife/*.iife.js bundles — same progressive-enhancement
   idea as the static-page fallbacks on the homepage. Mirrors type="primary". */
.cta r-button:not(:defined) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ran-space-3) var(--ran-space-6);
  border-radius: var(--ran-radius-full);
  border: 1px solid var(--ran-color-primary);
  background: var(--ran-color-primary);
  color: var(--ran-color-primary-text);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 22px; /* matches .ran-btn-content's default line-height */
}

ul {
  padding-left: 20px;
  margin: var(--ran-space-4) 0;
}
li {
  margin: var(--ran-space-2) 0;
}
li::marker {
  color: var(--ran-color-border-hover);
}

/* open-source note: a real <r-card>, with a pre-upgrade border fallback */
r-card.oss {
  display: block;
  margin: var(--ran-space-8) 0;
}
/* pre-upgrade fallback: mirrors the upgraded .ran-card chrome exactly
   (border, radius-md, page background, its built-in 16px padding) */
r-card.oss:not(:defined) {
  border: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-md);
  background: var(--ran-color-bg);
  padding: var(--ran-space-4);
}
r-card.oss .card-body {
  padding: var(--ran-space-4) var(--ran-space-6);
  font-size: 15px;
}
r-card.oss a {
  font-weight: 600;
}

/* ---------- faq: hairline per question (mirrors homepage FAQ) ---------- */
.faq h3 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
  margin: 0;
  padding: var(--ran-space-4) 0 0;
  border-top: 1px solid var(--ran-color-border);
}
.faq h3:first-child {
  border-top: none;
  padding-top: 0;
}
.faq p {
  margin: var(--ran-space-1) 0 var(--ran-space-4);
  color: var(--ran-color-text-secondary);
  font-size: 15px;
}
h2.faq {
  border-bottom: 1px solid var(--ran-color-border);
}

/* ---------- footer ---------- */
footer {
  margin-top: var(--ran-space-16);
  padding-top: var(--ran-space-4);
  border-top: 1px solid var(--ran-color-border);
  color: var(--ran-color-text-secondary);
  font-size: 13.5px;
}
footer a {
  color: var(--ran-color-text-secondary);
  text-decoration: none;
  margin-right: var(--ran-space-4);
}
footer a:hover {
  color: var(--ran-color-text);
}

/* ---------- theme switch (footer) ----------
   Real ranui <r-theme-switch>. The pre-upgrade fallback reserves the pill's
   exact footprint (3×28px buttons + gaps + padding + border) — no shift. */
r-theme-switch.theme-switch {
  vertical-align: middle;
}
r-theme-switch.theme-switch:not(:defined) {
  display: inline-block;
  width: 94px;
  height: 34px;
  border: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-full);
}
/* footer rows on the satellites are plain text; give the pill its own line spacing */
footer .theme-switch {
  margin-top: var(--ran-space-4);
}

/* ---------- generated markdown pages (/help, /changelog; bin/build-pages.mjs) ----------
   Same column and type as the satellites; these rules only add what markdown
   emits that the hand-written pages never did: h3 sections, code, tables,
   quotes, a small table of contents. All values from the token layer. */
.doc article h3 {
  font-size: 16.5px;
  letter-spacing: -0.01em;
  margin: var(--ran-space-6) 0 var(--ran-space-2);
}
.doc article h4 {
  font-size: 15px;
  margin: var(--ran-space-4) 0 var(--ran-space-2);
}
.doc article :is(h2, h3, h4) a {
  color: inherit;
  text-decoration: none;
}
.doc code {
  font-family: var(--ran-font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: var(--ran-radius-sm);
  background: var(--ran-color-bg-subtle);
  border: 1px solid var(--ran-color-border);
}
.doc pre {
  margin: var(--ran-space-4) 0;
  padding: var(--ran-space-4);
  overflow-x: auto;
  border-radius: var(--ran-radius-md);
  background: var(--ran-color-bg-subtle);
  border: 1px solid var(--ran-color-border);
  font-size: 13px;
  line-height: 1.55;
}
.doc pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ran-space-4) 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.doc th,
.doc td {
  text-align: start;
  vertical-align: top;
  padding: var(--ran-space-2) var(--ran-space-3);
  border-bottom: 1px solid var(--ran-color-border);
}
.doc th {
  font-weight: 600;
  color: var(--ran-color-text-secondary);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.doc blockquote {
  margin: var(--ran-space-4) 0;
  padding: var(--ran-space-2) var(--ran-space-4);
  border-inline-start: 3px solid var(--ran-color-border-hover);
  color: var(--ran-color-text-secondary);
}
.doc ol {
  padding-inline-start: 22px;
  margin: var(--ran-space-4) 0;
}
.doc hr {
  border: 0;
  border-top: 1px solid var(--ran-color-border);
  margin: var(--ran-space-8) 0;
}
.doc img {
  max-width: 100%;
  height: auto;
}
.doc .toc {
  margin: var(--ran-space-4) 0 var(--ran-space-6);
  padding: var(--ran-space-3) var(--ran-space-4);
  border: 1px solid var(--ran-color-border);
  border-radius: var(--ran-radius-md);
  font-size: 14px;
}
.doc .toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ran-space-1) var(--ran-space-4);
}
.doc .toc li {
  margin: 0;
}
.doc .toc a {
  color: var(--ran-color-text-secondary);
  text-decoration: none;
}
.doc .toc a:hover {
  color: var(--ran-color-link);
}
.doc .notice {
  padding: var(--ran-space-2) var(--ran-space-3);
  border-radius: var(--ran-radius-sm);
  background: var(--ran-color-bg-subtle);
  border: 1px solid var(--ran-color-border);
  color: var(--ran-color-text-secondary);
  font-size: 14px;
}
.doc .source {
  margin-top: var(--ran-space-8);
  font-family: var(--ran-font-mono);
  font-size: 12px;
  color: var(--ran-color-text-secondary);
}