/* Styles for the 腾讯公益推理平台 user documentation, written against Furo.
 *
 * Colours come from Furo's own variables so every rule follows the light/dark
 * toggle; the brand accent is set in conf.py. What is left here is the type
 * stack, spacing and table readability.
 */

/* Furo declares its font stack on body; the Chinese faces the landing page
 * uses (frontend/site-ui/landing/inference.css) go ahead of the fallbacks. */
body {
    --font-stack: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
        "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- Sidebar brand (_templates/sidebar/brand.html) ---------------------- */

/* Wordmark above, product name below: the landing header's two parts,
 * stacked because the sidebar is narrower than the header. */
.sidebar-brand.ssv-brand {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem var(--sidebar-item-spacing-horizontal) 1.25rem;
}

.ssv-brand-logo {
    display: block;
    width: 112px;
    height: auto;
}

.ssv-brand-product {
    color: var(--color-foreground-primary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* The wordmark's lettering is dark grey; on the dark theme invert its
 * lightness while keeping the mark's hues roughly where they were. */
body[data-theme="dark"] .ssv-brand-logo {
    filter: invert(1) hue-rotate(180deg);
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .ssv-brand-logo {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* The preview banner (conf.py) is one sentence; wrap it on narrow screens
 * instead of Furo's single scrolling line. */
.announcement {
    height: auto;
    min-height: var(--header-height);
}

.announcement-content {
    white-space: normal;
}

/* --- Tables ------------------------------------------------------------- */

/* The model catalogue is the widest content on the site. Let the columns size
 * themselves and let Furo's .table-wrapper scroll if they overflow. */
.content table.docutils {
    table-layout: auto;
    width: 100%;
}

.content table.docutils td,
.content table.docutils th {
    padding: 0.5rem 0.75rem;
}

/* Column headings are two to five characters; breaking one per line (what a
 * narrow column does to CJK) makes the table unreadable. */
.content table.docutils th {
    white-space: nowrap;
}

/* A model ID or a header name reads as one token; wrapping it mid-identifier
 * is worse than the horizontal scrollbar the wrapper provides. */
.content table.docutils td code {
    white-space: nowrap;
}

/* The generated model table (ssv_identity.render_models): only the display
 * name may wrap; numbers and capability labels read badly split. */
.content table.ssv-models td:not(:nth-child(2)) {
    white-space: nowrap;
}

.content table.docutils tbody tr:nth-child(2n) {
    background-color: var(--color-background-secondary);
}

/* --- Lists -------------------------------------------------------------- */

/* The quickstart and the integration guides are mostly numbered steps; a
 * little air between them keeps the sequence scannable. */
.content article ol > li,
.content article ul > li {
    margin-bottom: 0.4rem;
}

/* Reader shortcuts and the compact getting-started overview. */
.ssv-console-link { padding: 0 1.5rem 1.25rem; font-size: .875rem; }
.ssv-console-link a { text-decoration: none; font-weight: 600; }
.ssv-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
/* Match Furo's [role="main"] .container specificity so its horizontal
 * padding reset cannot erase the card inset. */
[role="main"] .ssv-start-card {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    border: 1px solid var(--color-background-border);
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--color-background-secondary);
}
.ssv-start-card > p { margin: 0; }
.ssv-start-card > p:first-child { font-size: 1.1rem; }
.ssv-start-card > p:last-child { margin-top: auto; padding-top: .25rem; }
.ssv-start-card a,
.ssv-start-card a:visited {
    color: var(--color-brand-content);
    font-weight: 600;
    text-decoration: none;
}
.ssv-start-card a:hover { text-decoration: underline; text-underline-offset: .2em; }
.ssv-start-card a:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; border-radius: 2px; }
div.highlight { position: relative; }
div.highlight pre { padding-top: 2.5rem; }
.ssv-copy-code { position: absolute; top: .45rem; right: .5rem; border: 1px solid var(--color-background-border); border-radius: 5px; background: var(--color-background-primary); color: var(--color-foreground-primary); padding: .2rem .55rem; cursor: pointer; font: inherit; font-size: .75rem; }
.ssv-copy-code:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }
@media (max-width: 600px) { .ssv-start-grid { grid-template-columns: 1fr; } }