/* ApiTry widget — interactive try-it-out for documented endpoints.
 * Vanilla CSS, no framework. Matches mdBook's "coal" palette and
 * mirrors katforge.com's ApiTry Vue component 1:1 within the limits
 * of mdBook (no Tailwind, no Iconify). */

api-try {
   display: block;
   margin: 1.5rem 0;
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.40);
   overflow: hidden;
   font-family: var(--sans-font, system-ui, sans-serif);
   font-size: 14px;
   color: var(--fg, #f5f5f5);
}

/* When the custom element renders its own UI in place, hide the original
 * empty wrapper so the JS can append a sibling root without leaving a
 * blank shell behind. */
api-try[data-upgraded] {
   display: none;
}

.api-try-root {
   margin: 1.5rem 0;
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.40);
   overflow: hidden;
   font-family: var(--sans-font, system-ui, sans-serif);
   font-size: 14px;
   color: var(--fg, #f5f5f5);
}

/* ── Header row ───────────────────────────────────────────────────── */

.api-try-header {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.02);
   flex-wrap: nowrap;
}

.api-try-method {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--mono-font, ui-monospace, "JetBrains Mono", monospace);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
   line-height: 1.2;
   padding: 4px 8px;
   border-radius: 4px;
   text-transform: uppercase;
   flex-shrink: 0;
}

/* HTTP verb tints — emerald GET, orange POST, blue PUT, purple PATCH,
 * red DELETE — matching katforge HttpVerb component. */
.api-try-method.method-get     { background: rgba( 16, 185, 129, 0.15); color: #6ee7b7; }
.api-try-method.method-post    { background: rgba(249, 115,  22, 0.15); color: #fdba74; }
.api-try-method.method-put     { background: rgba( 59, 130, 246, 0.15); color: #93c5fd; }
.api-try-method.method-patch   { background: rgba(168,  85, 247, 0.15); color: #c4b5fd; }
.api-try-method.method-delete  { background: rgba(239,  68,  68, 0.15); color: #fca5a5; }
.api-try-method.method-head    { background: rgba(100, 116, 139, 0.15); color: #cbd5e1; }
.api-try-method.method-options { background: rgba(100, 116, 139, 0.15); color: #cbd5e1; }

/* Path link, with a CSS-only full-URL overlay on hover. Replaces the
 * browser's native title tooltip so the panel doesn't land at the cursor
 * and overlap the verb pill on the left. */
.api-try-path {
   position: relative;
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 13px;
   color: rgba(255, 255, 255, 0.90);
   text-decoration: none;
   flex: 1 1 0;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   transition: color 120ms ease;
}

.api-try-path:hover {
   color: var(--links, #fdba74);
}

.api-try-path .ext-icon {
   width: 12px;
   height: 12px;
   opacity: 0.50;
   flex-shrink: 0;
}

.api-try-path::after {
   content: attr(data-full);
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   z-index: 20;
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 13px;
   white-space: nowrap;
   width: max-content;
   max-width: min(calc(100vw - 2rem), 56rem);
   padding: 0.5rem 0.75rem;
   color: rgba(255, 255, 255, 0.95);
   background: rgba(15, 17, 22, 0.97);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
   opacity: 0;
   pointer-events: none;
   transition: opacity 120ms ease;
}

.api-try-path:hover::after,
.api-try-path:focus-visible::after {
   opacity: 1;
}

/* Status pill — four tones by HTTP status family. */
.api-try-status {
   display: inline-flex;
   align-items: center;
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 11px;
   padding: 6px 8px;
   border-radius: 4px;
   border: 1px solid currentColor;
   flex-shrink: 0;
   white-space: nowrap;
}

.api-try-status.tone-ok   { color: #6ee7b7; border-color: rgba( 16, 185, 129, 0.30); background: rgba( 16, 185, 129, 0.10); }
.api-try-status.tone-info { color: #93c5fd; border-color: rgba( 59, 130, 246, 0.30); background: rgba( 59, 130, 246, 0.10); }
.api-try-status.tone-warn { color: #fcd34d; border-color: rgba(245, 158,  11, 0.30); background: rgba(245, 158,  11, 0.10); }
.api-try-status.tone-bad  { color: #fca5a5; border-color: rgba(239,  68,  68, 0.30); background: rgba(239,  68,  68, 0.10); }

.api-try-status .elapsed {
   margin-left: 8px;
   color: rgba(255, 255, 255, 0.40);
}

/* Run button — orange, with spinner + lucide-style inline SVG icons. */
.api-try-run {
   font-family: var(--sans-font, system-ui, sans-serif);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 12px;
   border-radius: 6px;
   border: 1px solid rgba(249, 115, 22, 0.40);
   background: rgba(249, 115, 22, 0.10);
   color: #fdba74;
   cursor: pointer;
   transition: background-color 120ms ease, border-color 120ms ease;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
}

.api-try-run:hover  { background: rgba(249, 115, 22, 0.20); border-color: rgba(249, 115, 22, 0.60); }
.api-try-run:active { background: rgba(249, 115, 22, 0.30); }
.api-try-run[disabled] {
   opacity: 0.55;
   cursor: progress;
}

.api-try-run .icon {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
}

.api-try-run .spinner {
   width: 12px;
   height: 12px;
   border: 1.5px solid rgba(253, 186, 116, 0.30);
   border-top-color: #fdba74;
   border-radius: 50%;
   animation: api-try-spin 700ms linear infinite;
   flex-shrink: 0;
}

@keyframes api-try-spin {
   to { transform: rotate(360deg); }
}

/* ── Param/query fields ──────────────────────────────────────────── */

.api-try-fields {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 12px;
   padding: 12px 14px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.10);
   background: rgba(255, 255, 255, 0.01);
}

.api-try-fields label {
   display: block;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.60);
   margin-bottom: 4px;
}

.api-try-fields label .kind {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.30);
   margin-left: 4px;
}

.api-try-fields input,
.api-try-fields select,
.api-try-fields textarea {
   width: 100%;
   box-sizing: border-box;
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 13px;
   padding: 6px 8px;
   background: rgba(0, 0, 0, 0.30);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 4px;
   color: rgba(255, 255, 255, 0.90);
}

.api-try-fields input:focus,
.api-try-fields select:focus,
.api-try-fields textarea:focus {
   outline: none;
   border-color: rgba(249, 115, 22, 0.50);
}

/* Checkbox lives inline rather than full-width like text inputs. */
.api-try-fields .field-bool {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.api-try-fields .field-bool .bool-row {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 0;
}

.api-try-fields .field-bool input[type="checkbox"] {
   width: 14px;
   height: 14px;
   margin: 0;
}

.api-try-fields .field-bool .bool-row span {
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 13px;
   color: rgba(255, 255, 255, 0.90);
}

/* Body textarea spans the full row. */
.api-try-fields .field-body {
   grid-column: 1 / -1;
}

.api-try-fields textarea {
   font-size: 12px;
   line-height: 1.5;
   resize: vertical;
   min-height: 80px;
}

/* ── Error panel ─────────────────────────────────────────────────── */

.api-try-error {
   padding: 10px 14px;
   border-top: 1px solid rgba(239, 68, 68, 0.20);
   background: rgba(239, 68, 68, 0.05);
   color: #fca5a5;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.api-try-error .icon {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
}

/* ── Result grid ─────────────────────────────────────────────────── */

.api-try-result {
   display: grid;
   grid-template-columns: minmax(220px, 320px) 1fr;
   gap: 0;
}

@media (max-width: 720px) {
   .api-try-result { grid-template-columns: 1fr; }
}

.api-try-result > .result-left,
.api-try-result > .result-right {
   border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.api-try-result > .result-left {
   background: rgba(255, 255, 255, 0.02);
}

@media (min-width: 721px) {
   .api-try-result > .result-left {
      border-right: 1px solid rgba(255, 255, 255, 0.10);
   }
}

.api-try-result .result-block {
   padding: 12px 14px;
}

.api-try-result .result-left .result-block + .result-block {
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.api-try-result h4 {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: rgba(255, 255, 255, 0.40);
   margin: 0 0 8px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.api-try-result pre {
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 12px;
   line-height: 1.55;
   color: rgba(255, 255, 255, 0.80);
   margin: 0;
   overflow-x: auto;
   background: transparent;
   padding: 0;
}

/* Request preview: word-wrapped so long URLs/headers don't blow out the
 * left column; response body preserved as-is. */
.api-try-result .req {
   white-space: pre-wrap;
   word-break: break-word;
}

.api-try-result .body {
   white-space: pre;
   word-break: normal;
   /* Generous default room so 1-line responses don't make the pane jump
    * around between requests, while tall responses scroll inside the
    * pane rather than pushing the whole article. */
   min-height: 720px;
   max-height: 1000px;
   overflow: auto;
}

/* Inline method badge inside the request preview. */
.api-try-result .req-method {
   display: inline-block;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 3px;
   margin-right: 6px;
}

.api-try-result .req-method.method-get     { background: rgba( 16, 185, 129, 0.15); color: #6ee7b7; }
.api-try-result .req-method.method-post    { background: rgba(249, 115,  22, 0.15); color: #fdba74; }
.api-try-result .req-method.method-put     { background: rgba( 59, 130, 246, 0.15); color: #93c5fd; }
.api-try-result .req-method.method-patch   { background: rgba(168,  85, 247, 0.15); color: #c4b5fd; }
.api-try-result .req-method.method-delete  { background: rgba(239,  68,  68, 0.15); color: #fca5a5; }

.api-try-result .req-path { color: rgba(255, 255, 255, 0.90); }
.api-try-result .req-version { color: rgba(255, 255, 255, 0.40); }
.api-try-result .req-key { color: #fdba74; font-weight: 600; }
.api-try-result .req-sep { color: rgba(255, 255, 255, 0.35); }
.api-try-result .req-val { color: rgba(255, 255, 255, 0.80); }

/* Response-header dl pairs key on its own line, value indented underneath. */
.api-try-result .hdr-list {
   font-family: var(--mono-font, ui-monospace, monospace);
   font-size: 12px;
   margin: 0;
   display: grid;
   gap: 6px;
}

.api-try-result .hdr-list dt {
   color: #fdba74;
   font-weight: 600;
}

.api-try-result .hdr-list dd {
   color: rgba(255, 255, 255, 0.85);
   margin: 0;
   word-break: break-all;
}

/* JSON syntax tones — match katforge's palette. */
.api-try-result .json-key  { color: #fdba74; }
.api-try-result .json-str  { color: #6ee7b7; }
.api-try-result .json-num  { color: #fcd34d; }
.api-try-result .json-bool { color: #c4b5fd; }
.api-try-result .json-null { color: rgba(255, 255, 255, 0.40); }

/* Copy button — square, icon-only, lives inside the body header. */
.api-try-copy {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   padding: 0;
   border-radius: 4px;
   border: none;
   background: transparent;
   color: rgba(255, 255, 255, 0.40);
   cursor: pointer;
   transition: background-color 120ms ease, color 120ms ease;
}

.api-try-copy:hover {
   background: rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, 0.85);
}

.api-try-copy .icon {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ── Reveal animation envelope ───────────────────────────────────── */

/* JS toggles inline height/opacity for the height transition; the
 * .api-try-reveal class is the resting state once animation completes. */
.api-try-reveal {
   overflow: hidden;
}