/* CA-463 §8.2: these are the Dash public shell's tokens, not a third
         palette of the docs site's own. The previous set was a green/near-black
         family (--bg #f7f8f5, --ink var(--ink), --green var(--green) as the accent)
         that shared nothing with dash.chinaapi.ai, so a reader crossing from
         /models into /docs landed in what looked like a different product.
         Keep them in step with docs/prototypes/global-conversion-v1/styles.css.
         --code-bg stays dark on purpose: body prose follows the shell, code
         blocks stay comfortable to read (§8.2 allows exactly this exception). */
      :root {
        color-scheme: light;
        --bg: #f6f8fb;
        --surface: #ffffff;
        --surface-soft: #f6f8fb;
        --ink: #16233c;
        --muted: #667085;
        --subtle: #98a2b3;
        --line: #e4e9f2;
        --blue: #146bff;
        --blue-deep: #0f56d0;
        --green: #067647;
        --green-bg: #ecfdf3;
        --amber: #b54708;
        --code-bg: #0b1426;
        --code-text: #d8e2f2;
        --shadow: 0 18px 50px rgba(15, 35, 68, 0.1);
      }

      /* CA-868: the public page shell. The same three values as the app's tokens in
         web/classic/src/index.css; a static page cannot read the app's variables, so
         this is a copy, and gen-docs-pages.test.mjs keeps the two equal. At 1280 the
         shell is x=16/width=1248 and at 390 x=8/width=374, the CA-868 acceptance
         values. 767px is the app's mobile breakpoint (useIsMobile: 768). */
      :root {
        --public-shell-max: 1440px;
        --public-shell-gutter: 16px;
        --public-shell-inset: 28px;
      }

      @media (max-width: 767px) {
        :root {
          --public-shell-gutter: 8px;
          --public-shell-inset: 8px;
        }
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family:
          Inter,
          ui-sans-serif,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        letter-spacing: 0;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      code,
      pre {
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px);
      }

      /* CA-868: the header's content box is the page shell's box (.layout below, and
         .public-header-inner in the app), so the logo sits exactly where it sits on
         /models. 63px plus the topbar's 1px border is the app's 64px header. */
      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(var(--public-shell-max), calc(100% - 2 * var(--public-shell-gutter)));
        height: 63px;
        margin: 0 auto;
        padding: 0 var(--public-shell-inset);
        gap: 24px;
      }

      .brand {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 12px;
        font-weight: 760;
        font-size: 18px;
      }

      /* The real wordmark. It is vendored into docs-site/ rather than borrowed
         from the Dash app's /full-logo.png: deploy-production.sh publishes this
         tree file by file into a directory Caddy serves on its own, so anything
         the docs reference from outside it is a dependency that can 404 without
         the docs changing. §12 requires a real brand asset here, not a letter
         tile or an emoji. */
      .brand-logo {
        display: block;
        height: 26px;
        width: auto;
      }

      .brand-suffix {
        color: var(--muted);
        font-weight: 600;
        font-size: 15px;
      }

      /* The top bar does not fit beside the logo on narrower screens: with the
         seven page links production shows, English needed about 1060px and
         Russian about 1360px (measured 2026-10-06). Before this rule the labels
         wrapped inside their own boxes — "Plans & Pricing" over three lines,
         Japanese labels spilling above and below the 64px bar — and the key
         button was pushed past the right edge, so the whole page scrolled
         sideways (41px at 1024 in English on production). Now the labels never
         wrap: the page links sit in .nav-strip, which shrinks and scrolls
         sideways the way the app's header nav does, while the language menu and
         the key button keep their full width. public-shell-geometry.spec.mjs
         holds /docs/ru/ and /docs/ja/ to it.

         .nav-links is the containing block of the Tools menu, which lives inside
         the strip: a scrolling box clips whatever is positioned against it or
         against anything inside it, so the menu has to be positioned against
         something outside the strip to be visible at all. */
      .nav-links {
        position: relative;
        display: flex;
        flex: 1;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        color: var(--muted);
        font-size: 14px;
      }

      .nav-strip {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
      }

      .nav-strip::-webkit-scrollbar {
        display: none;
      }

      /* Set by the docs shell script on the side that has links scrolled out of
         view. A mask also confines everything painted inside the strip to the
         strip's box, the open Tools menu included, so the fade is off while that
         menu is open; without :has() there is no fade at all, never a hidden
         menu. */
      .nav-strip[data-overflow="start"]:not(:has(.nav-tools[open])) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px);
        mask-image: linear-gradient(to right, transparent, #000 32px);
      }

      .nav-strip[data-overflow="end"]:not(:has(.nav-tools[open])) {
        -webkit-mask-image: linear-gradient(to left, transparent, #000 32px);
        mask-image: linear-gradient(to left, transparent, #000 32px);
      }

      .nav-strip[data-overflow="start end"]:not(:has(.nav-tools[open])) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
      }

      .nav-strip .nav-tools {
        position: static;
      }

      .nav-strip .nav-tools .language-menu-list {
        top: 100%;
        right: auto;
      }

      .nav-links > .language-menu,
      .nav-links > .button {
        flex: none;
        white-space: nowrap;
      }

      .nav-links a {
        padding: 9px 12px;
        border-radius: 8px;
      }

      .nav-links a:hover {
        background: var(--surface-soft);
        color: var(--ink);
      }

      /* Active page marker: an underline plus aria-current, so the state is not
         carried by colour alone (§12). */
      .nav-links a.nav-current {
        color: var(--ink);
        font-weight: 700;
        box-shadow: inset 0 -2px 0 var(--blue);
        border-radius: 0;
      }

      /* The language switcher is a disclosure of real links rather than a
         select element. A crawler that does not run JavaScript has to be able
         to follow its way to every language, and an option is not a link — with
         the select, the eight translated pages had nothing pointing at them. */
      /* --- CA-463 first screen ------------------------------------------ */

      .page-head {
        padding: 30px 0 6px;
      }

      .page-head-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
      }

      .page-head h1 {
        margin: 6px 0 8px;
        font-size: clamp(28px, 3.4vw, 40px);
        line-height: 1.12;
        letter-spacing: -0.02em;
      }

      .page-head-copy {
        max-width: 62ch;
        color: var(--muted);
      }

      .page-head-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }

      .docs-search {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        height: 46px;
      }

      .docs-search:focus-within {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(20, 107, 255, 0.14);
      }

      .docs-search-label {
        color: var(--subtle);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .docs-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        background: transparent;
        color: var(--ink);
        font: inherit;
        outline: none;
      }

      .docs-search-key {
        padding: 2px 7px;
        border: 1px solid var(--line);
        border-radius: 6px;
        color: var(--subtle);
        font-size: 12px;
      }

      .docs-search-empty {
        margin: 10px 2px 0;
        color: var(--amber);
        font-size: 14px;
      }

      .connect-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .connect-card {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
      }

      /* Endpoint paths are single unbreakable tokens; without this the widest
         one (/v1beta/models/{model}:generateContent) pushes its grid track past
         the viewport. Measured on origin/main before this change: 90px of body
         overflow at 1024. */
      .card h3,
      .card code,
      .connect-card code {
        overflow-wrap: anywhere;
      }

      .connect-note {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }

      .code-tabs {
        margin-top: 18px;
      }

      .code-tablist {
        display: flex;
        gap: 6px;
        margin-bottom: 10px;
      }

      .code-tablist button {
        padding: 7px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--muted);
        font: inherit;
        font-size: 14px;
        cursor: pointer;
      }

      /* Selection is weight + border + background, never colour alone (§12). */
      .code-tablist button[aria-selected="true"] {
        border-color: var(--blue);
        background: rgba(20, 107, 255, 0.08);
        color: var(--ink);
        font-weight: 700;
      }

      .code-tablist button:focus-visible,
      .docs-search input:focus-visible,
      .next-card:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
      }

      .next-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 22px;
      }

      .next-card {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--surface);
        color: var(--ink);
      }

      .next-card:hover {
        border-color: var(--blue);
      }

      .next-card span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .sidebar a[hidden],
      .sidebar .sidebar-group[hidden] {
        display: none;
      }

      .language-menu,
      .nav-tools {
        position: relative;
      }

      .language-menu > summary,
      .nav-tools > summary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font: inherit;
        cursor: pointer;
        list-style: none;
      }

      .nav-tools > summary {
        border: 0;
        background: transparent;
      }

      .language-menu > summary::after,
      .nav-tools > summary::after {
        content: '▾';
        color: var(--muted);
      }

      .language-menu > summary::-webkit-details-marker,
      .nav-tools > summary::-webkit-details-marker {
        display: none;
      }

      .language-menu-list {
        position: absolute;
        right: 0;
        z-index: 20;
        display: grid;
        min-width: 180px;
        margin-top: 6px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .language-menu-list a[aria-current='true'] {
        color: var(--green);
        font-weight: 600;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 16px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font-size: 14px;
        font-weight: 660;
        cursor: pointer;
      }

      .button.primary {
        border-color: var(--blue);
        background: var(--blue);
        color: #fff;
      }

      .button.primary:hover {
        border-color: var(--blue-deep);
        background: var(--blue-deep);
      }

      .button:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
      }

      .layout {
        display: grid;
        grid-template-columns: 244px minmax(0, 1fr);
        width: min(var(--public-shell-max), calc(100% - 2 * var(--public-shell-gutter)));
        margin: 0 auto;
        padding: 0 var(--public-shell-inset);
        gap: 42px;
        min-width: 0;
      }

      .sidebar {
        position: sticky;
        top: 92px;
        align-self: start;
        padding: 22px 0;
        color: var(--muted);
        font-size: 14px;
      }

      .sidebar-title {
        margin: 0 0 12px;
        color: var(--ink);
        font-size: 13px;
        font-weight: 740;
        text-transform: uppercase;
      }

      .sidebar-group {
        margin: 20px 0 5px;
        color: var(--ink);
        font-size: 11px;
        font-weight: 740;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .sidebar-title + .sidebar-group {
        margin-top: 0;
      }

      .sidebar a {
        display: block;
        padding: 9px 0;
      }

      .sidebar a:hover {
        color: var(--green);
      }

      main {
        min-width: 0;
        padding-bottom: 80px;
      }


      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
        padding: 6px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--muted);
        font-size: 13px;
        font-weight: 620;
      }

      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
      }

      h1 {
        margin: 0;
        max-width: 760px;
        font-size: clamp(36px, 5.8vw, 64px);
        line-height: 1.02;
        font-weight: 780;
        letter-spacing: 0;
      }



      .panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
      }

      .endpoint-panel {
        display: grid;
        align-content: start;
        gap: 16px;
        padding: 22px;
      }

      .panel-label {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        font-weight: 680;
        text-transform: uppercase;
      }

      .endpoint {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface-soft);
      }

      .endpoint code {
        min-width: 0;
        overflow-wrap: anywhere;
        color: var(--ink);
        font-size: 14px;
      }

      .copy {
        flex: none;
        min-width: 62px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--muted);
        font-weight: 680;
        cursor: pointer;
      }

      .stat-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .stat {
        padding: 14px;
        border-radius: 8px;
        background: #f9faf6;
      }

      .stat strong {
        display: block;
        margin-bottom: 5px;
        color: var(--ink);
        font-size: 18px;
      }

      .stat span {
        color: var(--muted);
        font-size: 12px;
      }

      section {
        padding: 34px 0;
        border-top: 1px solid var(--line);
      }

      h2 {
        margin: 0 0 12px;
        font-size: clamp(26px, 4vw, 40px);
        line-height: 1.12;
        font-weight: 760;
      }

      /* CA-487 H-E：能力表。宽表在窄视口里自己横向滚动，绝不推着 body 走
         ——这一页的正文列是 grid 的一格，body 一横滚整页排版就散了。 */
      .capability-model {
        margin: 28px 0 0;
      }

      .capability-facts {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 4px 16px;
        margin: 8px 0 16px;
        font-size: 14px;
      }

      .capability-facts dt {
        color: var(--muted);
      }

      /* 值是协议名、端点路径这类不带空格的长串。标签列按 max-content 不让，所以值列
         必须能收、能断：320 宽下 fr 与 vi 的模型参数页曾溢出 17-27px（2026-10-07 实测）。
         社媒页早先为同一结构单独加过这一条，现在它是默认值。 */
      .capability-facts dd {
        min-width: 0;
        margin: 0;
        overflow-wrap: anywhere;
      }

      .capability-scroll {
        overflow-x: auto;
        margin: 8px 0 16px;
      }

      .capability-table {
        border-collapse: collapse;
        width: 100%;
        font-size: 13px;
        line-height: 1.6;
      }

      .capability-table th,
      .capability-table td {
        border-bottom: 1px solid var(--border);
        padding: 8px 12px 8px 0;
        text-align: left;
        vertical-align: top;
      }

      .capability-table th {
        color: var(--muted);
        font-weight: 600;
        white-space: nowrap;
      }

      /* CA-1183：社媒数据页。价格表的每个价格都跳到下方端点，落点要让开
         sticky 顶栏；参数示例常是一整串 ID 或链接，不断行会把参数表撑出正文列。
         只让示例列断行：参数名、类型、必填、默认值都是短词，断开就读错了，
         示例列留出最小宽度，免得被说明列挤成一字一行。 */
      .social-platform,
      .social-platform .capability-model {
        scroll-margin-top: 80px;
      }

      .social-platform .capability-table td:nth-child(-n + 4) {
        white-space: nowrap;
      }

      .social-platform .capability-table td:nth-child(5) {
        min-width: 10em;
      }

      .social-platform .capability-table td:nth-child(5) code {
        overflow-wrap: anywhere;
      }

      /* 颜色只分组不分级：unknown 与 unsupported 必须不同色，「没核过」不是
         「不支持」，画成一样读者会把前者读成后者。 */
      .support {
        white-space: nowrap;
        font-weight: 600;
      }

      .support-native {
        color: #15803d;
      }

      .support-translated {
        color: #1d4ed8;
      }

      .support-normalized {
        color: #b45309;
      }

      .support-unsupported {
        color: #b91c1c;
      }

      .support-ignored_legacy,
      .support-unknown {
        color: var(--muted);
      }

      .capability-stamp {
        color: var(--muted);
        font-size: 13px;
      }

      .section-copy {
        max-width: 760px;
        margin: 0 0 24px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.75;
      }

      .cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
      }

      .card {
        min-height: 164px;
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
      }

      .card .tag {
        display: inline-flex;
        margin-bottom: 14px;
        padding: 5px 8px;
        border-radius: 999px;
        background: var(--surface-soft);
        color: var(--muted);
        font-size: 12px;
        font-weight: 700;
      }

      .card h3 {
        margin: 0 0 8px;
        font-size: 18px;
      }

      .card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
        font-size: 14px;
      }

      .code-block {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
        background: var(--code-bg);
        color: var(--code-text);
        box-shadow: var(--shadow);
      }

      .code-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #94a3b8;
        font-size: 13px;
      }

      pre {
        margin: 0;
        overflow-x: auto;
        padding: 18px;
        font-size: 13px;
        line-height: 1.75;
      }

      .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .api-examples {
        display: grid;
        gap: 28px;
      }

      .api-example {
        display: grid;
        gap: 12px;
      }

      .api-example + .api-example {
        padding-top: 28px;
        border-top: 1px solid var(--line);
      }

      .api-example h3 {
        margin: 0;
        font-size: 21px;
      }

      .api-example p {
        max-width: 820px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.7;
      }

      .api-path {
        display: inline-flex;
        width: fit-content;
        padding: 6px 9px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--ink);
        font-size: 13px;
      }

      /* CA-521 C3 修 CA-528 的回归：那一票给本页加了 Gemini callout，里面是
         POST /v1beta/models/{model}:generateContent 这条不可断 token，却没有把
         CA-520 在 docs-site/api/index.html 上加过的同一条换行规则带过来。
         线上实测 390 溢出 179px。callout 不是滚动容器，所以只能让它换行。 */
      .callout code {
        overflow-wrap: anywhere;
      }

      /* 正文段落和列表里的行内代码一律允许任意处断开。此前是逐个容器补的
         （CA-520 的 /docs/api/、上面 CA-521 的 callout；CA-1183 给社媒页加的那条
         已并入这里），这一条是默认值：新加的长 URL 不必等溢出了再补。
         2026-10-07 实测，/docs/api/video/
         的 https://api.chinaapi.ai/v1/videos/{task_id}/content 让十一种语言在
         360 宽下全部溢出约 180px。表格不受影响：单元格里没有 p 或 li，表格按
         设计在 .capability-scroll 里横向滚动。 */
      p code,
      li code {
        overflow-wrap: anywhere;
      }

      .parameter-note {
        margin: 0;
        padding: 12px 14px;
        border-left: 3px solid var(--green);
        background: var(--surface-soft);
        color: var(--muted);
        font-size: 14px;
        line-height: 1.7;
      }

      .parameter-note strong {
        color: var(--ink);
      }

      .pill-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 16px;
      }

      .pill {
        padding: 9px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--muted);
        font-size: 14px;
        font-weight: 620;
      }

      .callout {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 18px;
        border: 1px solid #f0d9ad;
        border-radius: 8px;
        background: #fff8eb;
        color: #60410d;
        line-height: 1.65;
      }

      .callout strong {
        /* The label is a column, not prose: without this it shrinks and a
           three-word label such as "Gemini models only" stacks one word per
           line. Measured at 1440 before the rule: 3 lines, 70px wide. */
        flex: none;
        color: var(--amber);
      }

      @media (max-width: 920px) {
        .layout {
          grid-template-columns: 1fr;
        }

        .sidebar {
          position: static;
          display: flex;
          gap: 12px;
          overflow-x: auto;
          padding: 18px 0 0;
          border-bottom: 1px solid var(--line);
          /* A grid track sizes to its content by default, so overflow-x here
             was scrolling nothing and the strip pushed the body sideways
             instead. Measured on origin/main: 23px at 390. */
          min-width: 0;
        }

        .sidebar-title {
          display: none;
        }

        /* The sidebar becomes a horizontal strip here. The group labels used to
           be hidden, which was tolerable with eight links; with the six-group IA
           (CA-463 §8.1) fifteen links in a row with no separators is a wall, so
           they stay as inline markers instead. */
        .sidebar-group {
          flex: none;
          align-self: center;
          margin: 0;
          padding: 0 4px;
          color: var(--subtle);
          white-space: nowrap;
        }

        .sidebar a {
          flex: none;
          padding: 10px 0;
          white-space: nowrap;
        }

        .page-head-row {
          flex-direction: column;
        }

        .connect-grid,
        .next-grid {
          grid-template-columns: 1fr;
        }

        .cards,
        .two-col {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 620px) {
        .nav {
          gap: 8px;
        }

        .brand-logo {
          height: 22px;
        }

        .brand-suffix {
          display: none;
        }

        .nav-links,
        .nav-strip {
          gap: 4px;
        }

        /* On a phone the page links are hidden and the strip holds only the
           Tools menu. .nav-links sizes to its content from the start — aligned
           to the end, whatever did not fit spilled leftwards over the logo —
           and the strip does not clip, because the label below ellipsizes on
           its own and keeps its arrow.

           Beside the logo there are 244px at 360, while Tools and the language
           menu (80px each at most), the key button (104px) and the gaps need
           272px in pt-BR, so the button was pushed 2-12px off the screen in vi,
           es, ru and pt-BR (measured 2026-10-07). The two menu labels are the
           part that can give: they shrink and ellipsize, the button keeps its
           width. */
        .nav-links {
          flex: 0 1 auto;
          justify-content: flex-start;
          font-size: 12px;
        }

        .nav-strip,
        .nav-strip .nav-tools,
        .nav-links > .language-menu {
          flex: 0 1 auto;
          min-width: 0;
        }

        .nav-strip {
          overflow: visible;
        }

        /* A block, not inline-flex: text-overflow only applies to the text of a
           block container, and in a flex container the clipped label took the
           arrow with it ("Ferramen", no ▾). The arrow sits in the right padding
           instead, so it stays visible however short the label gets; the
           padding keeps the inline-flex widths (6px text-arrow gap). */
        .nav-tools > summary,
        .language-menu > summary {
          display: block;
          position: relative;
          max-width: 80px;
          padding: 0 20px 0 6px;
          line-height: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .language-menu > summary {
          line-height: 34px;
        }

        .nav-tools > summary::after,
        .language-menu > summary::after {
          position: absolute;
          top: 0;
          right: 6px;
        }

        /* The one place a label may still wrap: on a phone the key button keeps
           a fixed width and takes more lines instead. The size and line height
           are set here, not inherited, because how many lines it takes depends
           on the font: with DejaVu Sans on the Linux CI runner the pt-BR and fr
           labels take three lines, and at 14px with the font's own line height
           that was 66px, taller than the 64px header (2026-10-07). At 12/15
           three lines are 55px. */
        .nav-links > .button {
          max-width: 104px;
          padding: 4px 8px;
          font-size: 12px;
          line-height: 1.25;
          text-align: center;
          white-space: normal;
        }

        .nav-links a:not(.button) {
          display: none;
        }

        .nav-tools .language-menu-list {
          left: 0;
          right: auto;
        }

        .nav-tools .language-menu-list a,
        .language-menu-list a {
          display: block;
        }

        .layout {
          gap: 22px;
        }

        /* The label goes above the text. Side by side, a label that does not
           shrink (see .callout strong) leaves the text too narrow for its
           longest word: 7-115px of overflow at 360 in fr, es, ru and id
           (measured 2026-10-07). */
        .callout {
          flex-direction: column;
          align-items: stretch;
          gap: 6px;
        }

        .page-head-actions {
          width: 100%;
        }

        .page-head-actions .button {
          flex: 1;
          text-align: center;
        }

        .code-tablist {
          overflow-x: auto;
        }

        .stat-grid {
          grid-template-columns: 1fr;
        }
      }

      /* 以下来自原 /docs/api/：首页样式里没有的选择器 */
    .section-stack {
      display: grid;
      gap: 16px;
    }

    /* CA-869 Model makers：厂商目录的卡片与厂商页的表。卡片网格按宽度自适应列数、
       窄屏一列；表沿用 .capability-scroll 在自己的容器里横向滚动，不推着 body 走
       （原型 design-qa 的 P2：密表曾在 1024 与 390 撑宽整页）。 */
    .maker-stats {
      margin: 0 0 18px;
    }

    .maker-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 14px;
      align-items: start;
    }

    .maker-card {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }

    .maker-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .maker-facts {
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: 4px 14px;
      margin: 0 0 12px;
      font-size: 14px;
      line-height: 1.6;
    }

    .maker-facts dt {
      color: var(--muted);
    }

    .maker-facts dd {
      min-width: 0;
      margin: 0;
      overflow-wrap: anywhere;
    }

    /* .support keeps a table cell's label on one line; in this value column it
       must be able to wrap, or the column cannot shrink below it. At 320 on the
       Linux CI runner "Без аудита" ran 14px past the shell edge beside the long
       Russian label (2026-10-07). */
    .maker-facts .support {
      white-space: normal;
    }

    .maker-summary {
      max-width: 760px;
      margin: 0 0 8px;
    }

    .maker-list summary {
      color: var(--blue);
      font-size: 14px;
      font-weight: 620;
      cursor: pointer;
    }

    .maker-families {
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.7;
    }

    .maker-families dt {
      margin-top: 6px;
      color: var(--muted);
      font-weight: 620;
    }

    .maker-families dd {
      margin: 0;
      overflow-wrap: anywhere;
    }

    .maker-families code,
    .maker-profile-models code {
      margin-right: 4px;
    }

    .maker-links {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 16px;
      margin: 12px 0 0;
      font-size: 14px;
    }

    .maker-links a,
    .maker-table a,
    .maker-families a,
    .maker-profile-models a {
      color: var(--blue);
    }

    .maker-profile-models {
      margin: 0 0 8px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
      overflow-wrap: anywhere;
    }

    /* 两个聚合态与「未审计」只分组不分级，与上面 CA-487 的 .support-* 同一规则：
       Model-specific、Partial 说的是「这一族里各模型不一致」，不是「不支持」，
       不能借用 unsupported 的红色。 */
    .support-model_specific {
      color: #6d28d9;
    }

    .support-partial {
      color: #0e7490;
    }

    .support-not_audited {
      color: var(--muted);
      font-style: italic;
    }