/* Article typography for the usage document (说明文档).
 *
 * The documentation is not a page of its own any more: the user console renders
 * one article at a time with these styles, and the admin console's Markdown
 * preview reuses them so what an administrator previews is what readers get.
 * The article HTML itself is produced by packages/shared/src/markdown.ts.
 *
 * The console maps the public material tokens onto the workspace ones (see the
 * `.user-workspace #docs-article` block in styles.css); the fallbacks here keep
 * the same rules working in the admin console, which has no public palette. */

/* ---------------------------------------------------------- article body */


/* `overflow-wrap` keeps a pasted URL from pushing the article — and the page
   around it — wider than the viewport at any size. */
.docs-article { min-width: 0; max-width: var(--docs-measure, 760px); margin: 0 auto; color: var(--ink, var(--text)); font-size: 15.5px; line-height: 1.85; overflow-wrap: anywhere; }
/* The article owns its rhythm and measure, so a host page that resets paragraph
   and heading margins cannot change how a document reads. `platform.css` does
   exactly that for the public pages, and `/news/<slug>` loads this sheet to render
   its Markdown body. These selectors stay just above the host reset and below
   every block rule in this file (the callout and quote rhythm their own children),
   and the values are the browser defaults the console renders with — so the
   console, the admin preview and the public article all agree. */
.docs-article :where(p) { max-width: none; margin-bottom: 1em; }
.docs-article :where(blockquote p, .docs-callout-body p) { margin-top: 1em; }
.docs-article h2 { margin-bottom: .83em; }
.docs-article h3 { margin-bottom: 1em; }
.docs-article h4 { margin-bottom: 1.33em; }
.docs-article > * + * { margin-top: var(--docs-gap, 18px); }
.docs-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted, var(--text-muted)); font-size: 12.5px; }
.docs-breadcrumb a { color: var(--muted, var(--text-muted)); transition: color 140ms ease; }
.docs-breadcrumb a:hover { color: var(--accent); }
.docs-breadcrumb span[aria-hidden] { color: var(--line-strong, var(--line)); }
.docs-breadcrumb strong { color: var(--ink-soft, var(--text-muted)); font-weight: 650; }
.docs-article h1 { margin: 0 0 6px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 760; line-height: 1.18; letter-spacing: -.04em; text-align: left; text-wrap: balance; }
.docs-article h2 { margin-top: 54px; padding-top: 16px; border-top: 1px solid var(--line, #e0e7f1); font-size: clamp(21px, 2.1vw, 25px); font-weight: 730; line-height: 1.34; letter-spacing: -.03em; text-align: left; }
.docs-article h3 { margin-top: 32px; font-size: 17px; font-weight: 700; line-height: 1.45; letter-spacing: -.015em; text-align: left; }
.docs-article h4 { margin-top: 24px; font-size: 15.5px; font-weight: 700; line-height: 1.5; text-align: left; }
.docs-article h2 + *, .docs-article h3 + *, .docs-article h4 + * { margin-top: 12px; }
.docs-article h2, .docs-article h3, .docs-article h4 { scroll-margin-top: 96px; }
.docs-article p { color: var(--ink-soft, var(--text-muted)); }
.docs-article strong { color: var(--ink, var(--text)); font-weight: 650; }
.docs-article a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line, var(--line-strong)); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 140ms ease, text-decoration-color 140ms ease; }
.docs-article a:hover { color: var(--accent-dark, var(--text)); text-decoration-color: var(--accent); }
.docs-article hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line, #e0e7f1); }
.docs-article img { max-width: 100%; height: auto; border: 1px solid var(--public-glass-edge, var(--line)); border-radius: 12px; }
.docs-article ul, .docs-article ol { display: grid; gap: 9px; margin: 0; padding-left: 22px; color: var(--ink-soft, var(--text-muted)); }
.docs-article li > ul, .docs-article li > ol { margin-top: 9px; }
.docs-article li::marker { color: var(--accent); }
.docs-article code { padding: 2px 6px; border: 1px solid var(--line, #e0e7f1); border-radius: 6px; background: var(--surface-soft, var(--surface-muted, #f4f6fa)); color: #0b4a8f; font-family: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; word-break: break-word; }

/* ------------------------------------------- frosted-glass article cards */

/* One material, shared by every card an article can contain: the raised glass
   for surfaces that carry dense text (tables, code, index and pager cards), and
   the lighter glass for callouts, whose tone tint is layered on top below. */
.docs-article .docs-table-wrap,
.docs-article figure.docs-code,
.docs-article .docs-callout,
.docs-article blockquote {
  border: 1px solid var(--public-glass-edge, rgb(255 255 255 / .82));
  background: var(--public-glass-raised, rgb(255 255 255 / .82));
  box-shadow: var(--public-glass-shadow, inset 0 1px 0 rgb(255 255 255 / .88), 0 8px 28px rgb(38 78 132 / .07));
  -webkit-backdrop-filter: var(--public-glass-filter, blur(24px) saturate(135%));
  backdrop-filter: var(--public-glass-filter, blur(24px) saturate(135%));
}
.docs-article .docs-callout,
.docs-article blockquote { background: var(--public-glass, rgb(255 255 255 / .58)); }

/* callouts: tinted glass with a pill label — no side bar */
.docs-callout { margin: var(--docs-gap, 18px) 0 calc(var(--docs-gap, 18px) + 8px); padding: 17px 20px 19px; border-radius: 14px; background: linear-gradient(rgb(234 242 255 / .62), rgb(234 242 255 / .62)), var(--public-glass, rgb(255 255 255 / .58)); }
.docs-callout-label { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 9px; padding: 3px 11px 3px 9px; border: 1px solid var(--public-glass-edge, rgb(255 255 255 / .82)); border-radius: 999px; background: rgb(255 255 255 / .62); color: var(--accent-dark, var(--text)); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.docs-callout-label::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; content: ""; }
.docs-callout-body > * + * { margin-top: 10px; }
.docs-callout > *:first-child { margin-top: 0; }
.docs-callout > *:last-child { margin-bottom: 0; }
.docs-callout-body p { color: var(--ink-soft, var(--text-muted)); font-size: 14.5px; }
.docs-callout.is-tip { background: linear-gradient(rgb(226 246 237 / .72), rgb(226 246 237 / .72)), var(--public-glass, rgb(255 255 255 / .58)); }
.docs-callout.is-tip .docs-callout-label { color: #0d7a51; }
.docs-callout.is-important { background: linear-gradient(rgb(255 244 224 / .72), rgb(255 244 224 / .72)), var(--public-glass, rgb(255 255 255 / .58)); }
.docs-callout.is-important .docs-callout-label { color: #a56200; }
.docs-callout.is-warning { background: linear-gradient(rgb(255 238 222 / .72), rgb(255 238 222 / .72)), var(--public-glass, rgb(255 255 255 / .58)); }
.docs-callout.is-warning .docs-callout-label { color: #a84a05; }
.docs-callout.is-caution { background: linear-gradient(rgb(255 232 231 / .74), rgb(255 232 231 / .74)), var(--public-glass, rgb(255 255 255 / .58)); }
.docs-callout.is-caution .docs-callout-label { color: #a01c14; }

/* blockquote: plain frosted card */
.docs-article blockquote { margin: var(--docs-gap, 18px) 0 calc(var(--docs-gap, 18px) + 8px); padding: 16px 20px 18px; border-radius: 14px; }
.docs-article blockquote p { color: var(--ink-soft, var(--text-muted)); }

/* tables */
.docs-table-wrap { margin: 0; overflow-x: auto; border-radius: 14px; }
.docs-article table { width: 100%; min-width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7; }
.docs-article th, .docs-article td { padding: 11px 15px; border-bottom: 1px solid var(--public-glass-line, var(--line, #e0e7f1)); text-align: left; vertical-align: top; }
.docs-article th { background: rgb(255 255 255 / .5); color: var(--ink, var(--text)); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.docs-article td { color: var(--ink-soft, var(--text-muted)); }
.docs-article tbody tr:nth-child(even) td { background: rgb(255 255 255 / .32); }
.docs-article tbody tr:last-child td { border-bottom: 0; }
.docs-article tbody tr:hover td { background: rgb(255 255 255 / .7); }
.docs-article th.is-center, .docs-article td.is-center { text-align: center; }
.docs-article th.is-right, .docs-article td.is-right { text-align: right; font-variant-numeric: tabular-nums; }

/* code blocks */
.docs-article figure.docs-code { margin: 0; overflow: hidden; border-radius: 14px; }
.docs-article figure.docs-code figcaption { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--public-glass-line, var(--line, #e0e7f1)); background: rgb(255 255 255 / .45); color: var(--muted, var(--text-muted)); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.docs-article figure.docs-code figcaption::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); content: ""; }
.docs-article figure.docs-code pre { margin: 0; padding: 14px 16px; overflow: auto; }
.docs-article figure.docs-code code { padding: 0; border: 0; background: transparent; color: var(--ink, var(--text)); font-size: 12.5px; line-height: 1.75; }

/* ------------------------------------------------- article pager (console) */

/* Previous / next article links at the end of every article. They carry the
   article column's own measure so they line up with the text above them. */
.docs-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; max-width: var(--docs-measure, 760px); margin: 44px auto 0; }
.docs-pager:empty { display: none; }
.docs-pager-link { display: grid; gap: 5px; min-width: 0; padding: 13px 16px; border: 1px solid var(--public-glass-edge, var(--line, #e0e7f1)); border-radius: 14px; background: var(--public-glass, rgb(255 255 255 / .58)); box-shadow: var(--public-glass-shadow, inset 0 1px 0 rgb(255 255 255 / .88), 0 8px 28px rgb(38 78 132 / .07)); -webkit-backdrop-filter: var(--public-glass-filter, blur(24px) saturate(135%)); backdrop-filter: var(--public-glass-filter, blur(24px) saturate(135%)); text-decoration: none; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.docs-pager-hint { color: var(--muted, var(--text-muted)); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.docs-pager-title { overflow: hidden; color: var(--ink, var(--text)); font-size: 14px; font-weight: 620; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.docs-pager-link.is-next { justify-items: end; text-align: right; }
.docs-pager-link.is-next .docs-pager-title { width: 100%; }
.docs-pager-link.is-previous .docs-pager-title { width: 100%; }
.docs-pager-link:hover { border-color: var(--accent-line, var(--line-strong, var(--line))); box-shadow: var(--public-glass-shadow-hover, var(--public-glass-shadow)); }
.docs-pager-link.is-previous:hover { transform: translateX(-2px); }
.docs-pager-link.is-next:hover { transform: translateX(2px); }
.docs-pager-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* task lists and heading anchors (added by docs.js) */
.docs-task { display: inline-block; width: 15px; height: 15px; margin-right: 8px; border: 1.5px solid var(--line-strong, var(--line)); border-radius: 4px; vertical-align: -2px; }
.docs-task.is-done { border-color: var(--accent); background: var(--accent); }
.docs-task.is-done::after { content: ""; display: block; width: 4px; height: 8px; margin: 1px auto 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.docs-anchor { margin-left: 10px; color: var(--line-strong, var(--line)) !important; font-size: .72em; text-decoration: none !important; opacity: 0; transition: opacity 140ms ease, color 140ms ease; }
.docs-article h2:hover .docs-anchor, .docs-article h3:hover .docs-anchor, .docs-anchor:focus-visible { opacity: 1; }
.docs-anchor:hover { color: var(--accent) !important; }
@media (hover: none) { .docs-anchor { opacity: .45; } }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  /* Narrow screens keep one link: the next article, or the only link there is. */
  .docs-pager { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .docs-pager-link.is-previous:not(:only-child) { display: none; }
  .docs-pager > :only-child { grid-column: 1 / -1; }
  .docs-article { font-size: 15px; line-height: 1.82; }
  .docs-article h1 { font-size: 29px; }
  .docs-article h2 { margin-top: 38px; font-size: 21px; }
  .docs-article h3 { font-size: 16.5px; }
  .docs-article th, .docs-article td { padding: 10px 12px; }
  .docs-article table { min-width: 460px; font-size: 13px; }
}