/*
 * The Core API docs pages, on Fluent UI web components and the Agent Panel's theme (theme.js applies the tokens).
 * As in the panel, every colour, radius, shadow, size and spacing is a Fluent token; the one literal is the logo's
 * cyan-to-blue gradient, kept for the brand marks.
 */

:root {
    /* Until theme.js sets it from the system, so the page waits on the system's own canvas, not on white. */
    color-scheme: light dark;

    /* The roles the panel names for its surfaces (tokens.css there). */
    --app-surface-canvas: var(--colorNeutralBackground2);
    --app-surface-raised: var(--colorNeutralBackground1);
    --app-surface-sunken: var(--colorNeutralBackground3);
    --app-brand-gradient: linear-gradient(135deg, #1BB3F3, #186CE6);
}

/* Dark mode, as the panel: the brand ramp's text shades are too dark on the neutral surfaces, so brand text takes the
   lighter ones. theme.js sets data-theme. */
body[data-theme="dark"] {
    --colorBrandForeground1: var(--colorBrandForeground2Hover);
    --colorBrandForeground2: var(--colorBrandForeground2Hover);
    --colorBrandForegroundLink: var(--colorBrandForeground2Hover);
    --colorBrandForegroundLinkHover: var(--colorBrandForeground2Pressed);
    --colorBrandForegroundLinkPressed: var(--colorBrandForeground2Pressed);
    --colorCompoundBrandForeground1: var(--colorBrandForeground2Hover);
}

/* No reset on *: a page rule outranks a component's own :host rules, and would strip the Fluent elements' padding. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* The scrollbar's room is kept on every page, scrolling or not, so the container has the same width and place on all
   of them — a short page would otherwise be a scrollbar wider than a long one. */
html {
    scrollbar-gutter: stable;
}

/* Nothing shows until theme.js has themed the page: every colour and size here is a token it sets, and a Fluent
   element is bare text until the bundle defines it. Transitions stay off meanwhile, or the components would animate
   from their unthemed colours as the theme lands. Should the script never run, the page shows after 3 seconds anyway
   (at once with scripts off: see each page's noscript). */
html.docs-loading body {
    visibility: hidden;
    animation: docs-show 0s 3s forwards;
}

html.docs-loading * {
    transition: none;
}

@keyframes docs-show {
    to {
        visibility: visible;
    }
}

body, h1, h2, h3, p, pre {
    margin: 0;
}

body {
    font-family: var(--fontFamilyBase, system-ui, sans-serif);
    font-size: var(--fontSizeBase300);
    line-height: var(--lineHeightBase300);
    color: var(--colorNeutralForeground1, CanvasText);
    background-color: var(--app-surface-canvas, Canvas);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* A dialog renders its form in place until the components are defined. */
fluent-dialog:not(:defined) {
    display: none;
}

a {
    color: var(--colorBrandForegroundLink);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* The system's monospace first: Fluent's stack starts at Consolas, which only Windows has, and ends at Courier. */
code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
}

:not(pre) > code {
    background: var(--app-surface-sunken);
    border-radius: var(--borderRadiusMedium);
    padding: 0 var(--spacingHorizontalXS);
}

p + p {
    margin-top: var(--spacingVerticalM);
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--spacingHorizontalXXL);
}

main {
    flex: 1;
    padding: var(--spacingVerticalXXXL) 0;
}

.hint {
    font-size: var(--fontSizeBase200);
    line-height: var(--lineHeightBase200);
    color: var(--colorNeutralForeground3);
}

.card > .hint {
    margin-top: var(--spacingVerticalS);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalL);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

/* hidden wins over the layout classes (.actions, .stack) and the components' own display. */
[hidden] {
    display: none !important;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--app-surface-raised);
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    box-shadow: var(--shadow2);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalXL);
    min-height: 56px;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.brand:hover {
    text-decoration: none;
}

.brand img {
    display: block;
    height: 24px;
    width: auto;
}

.site-nav {
    display: flex;
    gap: var(--spacingHorizontalXS);
    flex: 1;
}

.site-nav fluent-anchor-button {
    flex-shrink: 0;
    white-space: nowrap;
}

.site-nav [aria-current="page"] {
    color: var(--colorBrandForeground1);
    background: var(--colorBrandBackground2);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
}

.token-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--borderRadiusCircular);
    background: var(--colorNeutralForeground3);
}

#token-open[data-saved="true"] .token-dot {
    background: var(--colorStatusSuccessBackground3);
}

.languages {
    display: flex;
    gap: var(--spacingHorizontalXXS);
}

/* Token dialog */

.token-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
}

.token-form fluent-text-input {
    width: 100%;
}

/* Page heading */

.page-head {
    margin-bottom: var(--spacingVerticalXXL);
}

/* Not upper-cased: it often names something from the code (SignalR), and under lang="tr" an i would become İ. */
.eyebrow {
    display: inline-block;
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightSemibold);
    color: var(--colorBrandForeground1);
    margin-bottom: var(--spacingVerticalXS);
}

h1 {
    font-size: var(--fontSizeHero800);
    line-height: var(--lineHeightHero800);
    font-weight: var(--fontWeightSemibold);
}

h2 {
    font-size: var(--fontSizeBase500);
    line-height: var(--lineHeightBase500);
    font-weight: var(--fontWeightSemibold);
}

h3 {
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    font-weight: var(--fontWeightSemibold);
    margin: var(--spacingVerticalXL) 0 var(--spacingVerticalS);
}

.lead {
    font-size: var(--fontSizeBase400);
    line-height: var(--lineHeightBase400);
    color: var(--colorNeutralForeground2);
    max-width: 760px;
    margin-top: var(--spacingVerticalM);
}

/* Hero (overview) */

.hero {
    padding: var(--spacingVerticalXXL) 0 var(--spacingVerticalXXXL);
}

.hero h1 {
    font-size: var(--fontSizeHero900);
    line-height: var(--lineHeightHero900);
}

.gradient-text {
    background: var(--app-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero .actions {
    margin-top: var(--spacingVerticalXL);
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    margin-top: var(--spacingVerticalL);
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}

/* Surfaces */

.card {
    background: var(--app-surface-raised);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusXLarge);
    box-shadow: var(--shadow4);
    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
}

.section {
    margin-top: var(--spacingVerticalXXL);
}

.grid {
    display: grid;
    gap: var(--spacingHorizontalL);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacingVerticalM);
    color: var(--colorNeutralForeground1);
    transition: box-shadow var(--durationNormal) var(--curveEasyEase), border-color var(--durationNormal) var(--curveEasyEase);
}

.entry:hover {
    text-decoration: none;
    border-color: var(--colorBrandStroke1);
    box-shadow: var(--shadow16);
}

.entry p {
    color: var(--colorNeutralForeground2);
    flex: 1;
}

.entry .more {
    color: var(--colorBrandForeground1);
    font-weight: var(--fontWeightSemibold);
}

.icon {
    width: 40px;
    height: 40px;
    border-radius: var(--borderRadiusLarge);
    display: grid;
    place-items: center;
    color: var(--colorNeutralForegroundOnBrand);
    background: var(--app-brand-gradient);
}

.icon svg {
    width: 20px;
    height: 20px;
}

.steps {
    display: grid;
    gap: var(--spacingHorizontalL);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    counter-reset: step;
    margin-top: var(--spacingVerticalL);
}

.step {
    position: relative;
    padding: var(--spacingVerticalL) var(--spacingHorizontalL) var(--spacingVerticalL) 52px;
    border-radius: var(--borderRadiusLarge);
    background: var(--app-surface-sunken);
    color: var(--colorNeutralForeground2);
}

.step strong {
    display: block;
    color: var(--colorNeutralForeground1);
    margin-bottom: var(--spacingVerticalXXS);
}

.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: var(--spacingHorizontalL);
    top: var(--spacingVerticalL);
    width: 24px;
    height: 24px;
    border-radius: var(--borderRadiusCircular);
    display: grid;
    place-items: center;
    font-size: var(--fontSizeBase200);
    font-weight: var(--fontWeightBold);
    color: var(--colorNeutralForegroundOnBrand);
    background: var(--colorBrandBackground);
}

.links {
    display: grid;
    gap: var(--spacingHorizontalM);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.link-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    border-radius: var(--borderRadiusLarge);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    background: var(--app-surface-raised);
    color: var(--colorNeutralForeground1);
}

.link-card:hover {
    border-color: var(--colorBrandStroke1);
    text-decoration: none;
}

.link-card span {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
}

/* Reference rows: documents, hub members */

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacingHorizontalL);
    flex-wrap: wrap;
    padding: var(--spacingVerticalL) 0;
}

.row + .row {
    border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

.row-title {
    font-weight: var(--fontWeightSemibold);
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    flex-wrap: wrap;
}

.row-detail {
    font-size: var(--fontSizeBase200);
    color: var(--colorNeutralForeground3);
    margin-top: var(--spacingVerticalXXS);
}

.row fluent-message-bar {
    flex-basis: 100%;
}

/* Code */

.code {
    position: relative;
    margin-top: var(--spacingVerticalM);
}

pre {
    background: var(--app-surface-sunken);
    color: var(--colorNeutralForeground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusLarge);
    padding: var(--spacingVerticalM) var(--spacingHorizontalL);
    overflow-x: auto;
    white-space: pre;
    line-height: var(--lineHeightBase300);
}

.code .copy {
    position: absolute;
    top: var(--spacingVerticalS);
    right: var(--spacingHorizontalS);
}

.endpoint {
    display: flex;
    align-items: center;
    gap: var(--spacingHorizontalS);
    flex-wrap: wrap;
    margin-top: var(--spacingVerticalM);
    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
    border-radius: var(--borderRadiusLarge);
    background: var(--app-surface-sunken);
    font-family: ui-monospace, SFMono-Regular, Menlo, var(--fontFamilyMonospace);
    font-size: var(--fontSizeBase200);
    overflow-wrap: anywhere;
}

fluent-accordion-item pre {
    max-height: 420px;
}

/* Footer */

.site-footer {
    background: var(--app-surface-raised);
    color: var(--colorNeutralForeground3);
    font-size: var(--fontSizeBase200);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacingHorizontalL);
    flex-wrap: wrap;
    padding-top: var(--spacingVerticalL);
    padding-bottom: var(--spacingVerticalL);
}

.footer-meta, .footer-links {
    display: flex;
    gap: var(--spacingHorizontalL);
    flex-wrap: wrap;
    align-items: center;
}

.footer-meta > span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacingHorizontalXS);
}

/* A phone (768px and under, as the panel): the navigation takes a row of its own and scrolls sideways if it must;
   the page never does. */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacingHorizontalL);
    }

    .header-inner {
        flex-wrap: wrap;
        gap: var(--spacingVerticalS) var(--spacingHorizontalM);
        padding-top: var(--spacingVerticalS);
        padding-bottom: var(--spacingVerticalXS);
    }

    .header-actions {
        margin-left: auto;
    }

    .site-nav {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

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

    /* Too narrow to lay the copy button over the code: it goes above it. */
    .code {
        display: flex;
        flex-direction: column;
    }

    .code .copy {
        position: static;
        order: -1;
        align-self: flex-end;
        margin-bottom: var(--spacingVerticalXS);
    }

    main {
        padding-top: var(--spacingVerticalXXL);
    }

    .hero h1 {
        font-size: var(--fontSizeHero800);
        line-height: var(--lineHeightHero800);
    }

    .card {
        padding: var(--spacingVerticalL) var(--spacingHorizontalL);
    }
}