/* The "Try it" console (OLNZ-1938). One panel for the whole page, opened from the Try it button on any
   operation, docked on the right below the fixed nav. Non-modal: the reference stays scrollable, and
   another operation's button switches the panel to it.

   Colours come from the shared theme tokens (--vp-c-*) so light and dark follow the page; the warning,
   danger and status tones reuse the stylesheet's own .callout-* and .method-* classes, which already
   carry both themes. The one literal colour is the drawer's shadow, which is a shade, not a tone.

   Width decides the shape:
     >= 1500px  docked. The column beside it narrows (padding on .layout-container) and the outline on
                the right hides, since the panel takes its place.
     721-1499   a drawer over the right-hand side; the page does not move.
     <= 720     a full-width sheet below the nav.
   Stacking: above the page, below the search dialog (nav 1000, search 2000). */

:root {
    --tryit-width: clamp(420px, 32vw, 600px);
}

/* ---- the Try it buttons: one in each endpoint header, one beside Copy on its request sample ---- */

/* Filled and bold, so the way in is seen at a glance rather than found (Product Owner, OLNZ-1938).
   The colour pairs are the console's own primary buttons, which meet contrast in both themes: white on
   the dark-theme brand colour does not (2.98:1), the page ground on it does. */
.tryit-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-weight: 700; line-height: 1.2; white-space: nowrap;
    border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    background: var(--vp-c-brand-2); color: var(--vp-c-bg);
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
html.dark .tryit-btn { background: var(--vp-c-brand-1); }
.tryit-btn:hover { box-shadow: 0 0 0 3px var(--vp-c-brand-soft); }
.tryit-btn:focus-visible { outline: 2px solid var(--vp-c-brand-1); outline-offset: 2px; }
/* A play mark, drawn in the text colour. Decorative: the accessible name comes from aria-label. */
.tryit-btn::before {
    content: ""; flex: none; width: 0; height: 0;
    border-style: solid; border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
}
.tryit-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--vp-c-brand-soft); }

.endpoint-header .tryit-btn-head {
    margin-left: auto;
    padding: 7px 16px;
    font-size: 13.5px;
}

/* Beside Copy, matching its height, in one wrapper with it (tryit.js adds .code-tabs-actions). The
   wrapper takes Copy's margin-left: auto, so the two sit together at the right end of the bar and, when
   the bar is too narrow for one row, wrap together to the right - as two separate items Copy wrapped
   alone, flush left and touching the code below (320px, or 400% zoom). The vertical padding keeps a
   wrapped pair off the tab underline above and the code below. */
.code-tabs-bar .code-tabs-actions {
    display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
    margin-left: auto;
    padding: 6px 0;
}
.code-tabs-actions .code-copy-btn { margin-left: 0; }
.code-tabs-bar .tryit-btn-bar {
    padding: 5px 12px;
    font-size: 12px;
}

/* The operation the console is showing. Added at run time only, so the static page never carries it. */
.endpoint-box.tryit-active {
    border-color: var(--vp-c-brand-1);
    box-shadow: 0 0 0 3px var(--vp-c-brand-soft);
}

/* ---- the panel ------------------------------------------------------------------------------ */

.tryit-panel {
    position: fixed;
    top: var(--vp-nav-height);
    right: 0;
    width: min(560px, calc(100vw - 32px));
    height: calc(100vh - var(--vp-nav-height));
    height: calc(100dvh - var(--vp-nav-height));
    z-index: 1100;
    display: flex;
    flex-direction: column;
    background: var(--vp-c-bg);
    color: var(--vp-c-text-1);
    border-left: 1px solid var(--vp-c-border);
    box-shadow: -18px 0 36px -18px rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 1.5;
    /* The page declares no colour scheme, so native parts - placeholders, the file button, a select's
       list - were drawn for a light page on the dark ground (a 3.7:1 placeholder). */
    color-scheme: light;
}
html.dark .tryit-panel { color-scheme: dark; }
.tryit-panel[hidden],
.tryit-panel [hidden] { display: none !important; }

.tryit-head {
    flex: none;
    padding: 14px 16px 12px;
    background: var(--vp-c-bg-soft);
    border-bottom: 1px solid var(--vp-c-border);
    outline: none;
}
.tryit-head:focus-visible { box-shadow: inset 0 0 0 2px var(--vp-c-brand-1); }

.tryit-title { display: flex; align-items: flex-start; gap: 8px; }
.tryit-title .method-tag { flex: none; margin: 2px 0 0; }
.tryit-path {
    flex: 1;
    min-width: 0;
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-c-text-1);
    /* break-word, not anywhere: the script marks each "/" with <wbr>, so a path wraps between segments
       and only a segment wider than the whole line is ever split (OLNZ-1938). */
    overflow-wrap: break-word;
}
.tryit-close {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--vp-c-border);
    border-radius: 8px;
    background: var(--vp-c-bg);
    color: var(--vp-c-text-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.tryit-close:hover,
.tryit-close:focus-visible { color: var(--vp-c-brand-1); border-color: var(--vp-c-brand-1); }

.tryit-panel p { margin: 0 0 8px; font-size: 13px; color: var(--vp-c-text-2); }
.tryit-panel .tryit-summary { margin: 6px 0 0; color: var(--vp-c-text-2); }

.tryit-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 32px;
}

.tryit-panel .tryit-env { margin: 0; color: var(--vp-c-text-2); }
.tryit-panel .callout { margin: 12px 0 0; padding: 10px 14px; }
.tryit-panel .callout p { margin: 0; color: var(--vp-c-text-1); }

.tryit-section { margin: 18px 0 0; }
.tryit-panel .tryit-section-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vp-c-text-1);
}

/* ---- inputs --------------------------------------------------------------------------------- */

.tryit-field { margin: 0 0 10px; }
.tryit-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-c-text-1);
}
.tryit-label code { font-size: 12.5px; }
/* Brand-coloured text in the console: in light --vp-c-brand-1 is 4.47:1 on white and 4.1:1 on the code
   ground, both under the 4.5:1 small text needs, so light uses the deeper --vp-c-brand-2 (6.3:1); dark
   keeps brand-1 (5.8:1), since brand-2 there is 3.9:1. */
.tryit-panel code:not(.tryit-url) { color: var(--vp-c-brand-2); }
html.dark .tryit-panel code:not(.tryit-url) { color: var(--vp-c-brand-1); }
/* --vp-c-text-2, not -3: -3 is 2.6:1 on white and about 3.2:1 on the dark ground, under the 4.5:1 that
   11-12px text needs (WCAG 1.4.3) - and hints carry the safety text (OLNZ-1938 review). */
.tryit-req { font-size: 11px; font-weight: 600; color: var(--vp-c-text-2); }

/* A field is found by its edge alone, so the edge needs 3:1 against the panel (WCAG 1.4.11).
   --vp-c-border is 1.2:1 in both themes; --vp-c-text-2 is 7.6:1 on white and --vp-c-text-3 3.2:1 on
   the dark ground (-3 is too faint on white: 2.6:1). */
.tryit-input,
.tryit-textarea {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--vp-c-text-2);
    border-radius: 6px;
    background: var(--vp-c-bg);
    color: var(--vp-c-text-1);
    font: inherit;
    font-size: 13px;
}
html.dark .tryit-input,
html.dark .tryit-textarea { border-color: var(--vp-c-text-3); }
.tryit-panel ::placeholder { color: var(--vp-c-text-2); opacity: 1; }
.tryit-input:focus,
.tryit-textarea:focus {
    outline: 2px solid var(--vp-c-brand-1);
    outline-offset: -1px;
    border-color: var(--vp-c-brand-1);
}
.tryit-input[type="file"] { padding: 5px 8px; }
.tryit-mono,
.tryit-input.tryit-mono,
.tryit-textarea.tryit-mono {
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.tryit-textarea {
    min-height: 200px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
    tab-size: 2;
}
.tryit-fallback { min-height: 120px; margin: 8px 0 0; }

.tryit-row { display: flex; align-items: center; gap: 8px; }
.tryit-row > .tryit-input,
.tryit-row > .tryit-url { flex: 1; min-width: 0; }

.tryit-url {
    display: block;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--vp-c-text-1);
    overflow-wrap: break-word;
}

.tryit-panel .tryit-hint { margin: 4px 0 0; font-size: 12px; color: var(--vp-c-text-2); }

/* Read by screen readers, not shown: the status region tryit.js writes a send's outcome into. */
.tryit-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.tryit-panel .tryit-error { color: var(--vp-c-text-1); font-weight: 600; }
.tryit-panel .tryit-error:empty { display: none; }

.tryit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.tryit-panel .ai-btn { padding: 6px 12px; font-size: 12.5px; }
/* White on --vp-c-brand-1 is 4.47:1 in light and 2.98:1 in dark (Send, Get token, Copy as cURL when a
   request is blocked). Light: white on brand-2, 6.3:1. Dark: the dark ground on brand-1, 5.8:1. */
.tryit-panel .ai-btn-primary { background: var(--vp-c-brand-2); color: var(--vp-c-bg); }
html.dark .tryit-panel .ai-btn-primary { background: var(--vp-c-brand-1); }
.tryit-panel .ai-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 0 0 3px var(--vp-c-brand-soft); }
/* Send and Get token are marked unavailable with aria-disabled, which keeps focus on them (tryit.js,
   setUnavailable); :disabled stays for anything still disabled natively. */
.tryit-panel .ai-btn:disabled,
.tryit-panel .ai-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.tryit-panel .ai-btn:focus-visible { outline: 2px solid var(--vp-c-brand-1); outline-offset: 2px; }

.tryit-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--vp-c-text-1);
    cursor: pointer;
}
.tryit-check input { flex: none; margin-top: 3px; accent-color: var(--vp-c-brand-1); }

.tryit-details { margin: 4px 0 8px; }
.tryit-details summary {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vp-c-brand-2);
    cursor: pointer;
}
html.dark .tryit-details summary { color: var(--vp-c-brand-1); }

/* ---- the response --------------------------------------------------------------------------- */

.tryit-response {
    margin: 20px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--vp-c-border);
}
.tryit-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--vp-c-text-2);
}
.tryit-status strong { color: var(--vp-c-text-1); }
.tryit-status .tryit-code { margin: 0; }

.tryit-tabs { display: flex; margin: 12px 0 0; border-bottom: 1px solid var(--vp-c-border); }
.tryit-tab {
    margin-bottom: -1px;
    padding: 6px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--vp-c-text-2);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.tryit-tab:hover { color: var(--vp-c-text-1); }
.tryit-tab[aria-selected="true"] { color: var(--vp-c-brand-2); border-bottom-color: var(--vp-c-brand-1); }
html.dark .tryit-tab[aria-selected="true"] { color: var(--vp-c-brand-1); }
/* The response box is the Tab stop after the tabs (tryit.js, renderResponse), not the pane around it. */
.tryit-tab:focus-visible,
.tryit-panel .tryit-pre:focus-visible { outline: 2px solid var(--vp-c-brand-1); outline-offset: 2px; }

.tryit-panel .tryit-pre {
    margin: 8px 0 0;
    max-height: 55vh;
    padding: 12px 14px;
    overflow: auto;
    white-space: pre;
    font-size: 12.5px;
}

/* ---- width decides the shape ---------------------------------------------------------------- */

@media (max-width: 720px) {
    .tryit-panel {
        left: 0;
        width: auto;
        border-left: 0;
        box-shadow: none;
    }
}

@media (min-width: 1500px) {
    .tryit-panel { width: var(--tryit-width); box-shadow: none; }
    body.tryit-open .layout-container { padding-right: var(--tryit-width); }
    body.tryit-open .vp-aside { display: none; }
    body.tryit-open .vp-content { max-width: none; }
}

/* ---- forced colours (Windows High Contrast) --------------------------------------------------- */

/* Forced colours repaint every colour from the system palette and drop box-shadow, so a state drawn
   only with a colour or a shadow vanishes: both response tabs looked selected, the active box lost its
   ring, the head lost its focus ring, and Send - no border of its own - read as plain text. System
   colour keywords are kept as written. */
@media (forced-colors: active) {
    .endpoint-box.tryit-active { outline: 3px solid Highlight; outline-offset: 2px; }
    .tryit-head:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
    .tryit-tab { border-bottom-color: Canvas; }
    .tryit-tab[aria-selected="true"] { border-bottom-color: Highlight; font-weight: 700; }
    .tryit-panel .ai-btn-primary { border: 1px solid ButtonText; }
    .tryit-btn { border-color: ButtonText; }
    /* The play mark is a triangle cut from borders, three of them transparent. Forced colours paint
       those in the text colour too, which made it a solid square - a stop sign - on every Try it. */
    .tryit-btn::before { forced-color-adjust: none; border-color: transparent transparent transparent ButtonText; }
    .tryit-panel .method-tag { border: 1px solid CanvasText; }
}