/* 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);
      }

      * {
        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);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(1180px, calc(100% - 40px));
        height: 68px;
        margin: 0 auto;
        gap: 24px;
      }

      .brand {
        display: inline-flex;
        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;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--muted);
        font-size: 14px;
      }

      .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 {
        position: relative;
      }

      .language-menu > 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;
      }

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

      .language-menu > 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(1180px, calc(100% - 40px));
        margin: 0 auto;
        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);
      }

      .capability-facts dd {
        margin: 0;
      }

      .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;
      }

      /* 颜色只分组不分级：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;
      }

      .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 {
          width: min(100% - 28px, 1180px);
        }

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

        .layout {
          width: min(100% - 28px, 1180px);
          gap: 22px;
        }

        .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;
    }