.process-flow {
    border:1px solid var(--retype-border-color);
    border-radius:12px;
    padding:1.5rem;
    margin:1.5rem 0;
    box-shadow:0 1px 4px rgba(15,23,42,0.08);
}
.process-flow__title {
    font-weight:600;
    font-size:1rem;
    margin-bottom:1rem;
}
.flow-explanation summary {
    cursor:pointer;
    font-weight:600;
}
.flow-explanation ul {
    margin-top:0.75rem;
    margin-left:1.25rem;
}
/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Import Fira Code font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');

:root { 
    --accent: #0EA5E9; 
    --muted: #6b7280; 
    --line: #e5e7eb;
    
    /* Badge variables */
    --chip-hmac-fg:    #1d4ed8;
    --chip-hmac-bg:    #eff6ff;
    --chip-hmac-line:  #bfdbfe;
    --chip-pii-fg:     #0f766e;
    --chip-pii-bg:     #ecfeff;
    --chip-pii-line:   #99f6e4;
    --chip-async-fg:   #6d28d9;
    --chip-async-bg:   #f5f3ff;
    --chip-async-line: #ddd6fe;
    
    /* Response variables */
    --resp-surface: #ffffff;
    --resp-surface-2: #f8fafc;
    --resp-code-bg: #fafafa;
    --resp-copy-bg: rgba(255,255,255,.95);
    --resp-copy-border: #d1d5db;
    --resp-copy-text: #374151;
    --resp-copy-hover: #f8fafc;
}
@media (prefers-color-scheme: dark) {
    :root { 
        --accent: #38BDF8; 
        --muted: #9ca3af; 
        --line: #1f2937;
        
        /* Badge variables */
        --chip-hmac-fg:   #93c5fd;
        --chip-hmac-bg:   #0c1a2e;
        --chip-hmac-line: #1e3a5f;
        --chip-pii-fg:    #2dd4bf;
        --chip-pii-bg:    #042225;
        --chip-pii-line:  #155e75;
        --chip-async-fg:  #c4b5fd;
        --chip-async-bg:  #1e1b4b;
        --chip-async-line: #4338ca;
        
        /* Response variables */
        --resp-surface: transparent;
        --resp-surface-2: transparent;
        --resp-code-bg: #1f2937;
        --resp-copy-bg: rgba(55, 65, 81, 0.95);
        --resp-copy-border: #6b7280;
        --resp-copy-text: #e5e7eb;
        --resp-copy-hover: #4b5563;
    }
}

/* Global Typography */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

p, li, td, th {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
}

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
    align-items: center;
    margin: 8px 0 24px;
}
.hero-lead { color: var(--muted); font-size: 1.05rem; line-height: 1.55;}
.hero-points {
    background: red;
}
.hero img { width: 40%; height: auto; border-radius: 12px; }
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .hero img { order: -1; margin-bottom: 8px; }
}

/* Featured API tiles */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 12px 0 24px;
}
.feature-card {
    display: block;
    background: var(--card-bg, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.feature-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    border-color: var(--accent);
}
.feature-icon { font-size: 28px; margin-bottom: 8px; }
.feature-title { 
    font-weight: 600; 
    margin-bottom: 4px; 
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.feature-desc { 
    color: var(--muted); 
    font-size: .95rem; 
    line-height: 1.35; 
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .feature-card { background: #0f172a; }
}

/* HTTP Method Styling (Swagger-style) */
code {
    font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-weight: 500;
}

/* HTTP Verbs - Swagger-style colors */
/* Using attribute selectors for better compatibility */
code:is([class*="http-get"], [class*="method-get"]),
code:is([data-method="GET"]),
code:is([data-http="GET"]) {
    background-color: #61affe !important;
    color: #fff !important;
}

code:is([class*="http-post"], [class*="method-post"]),
code:is([data-method="POST"]),
code:is([data-http="POST"]) {
    background-color: #49cc90 !important;
    color: #fff !important;
}

code:is([class*="http-put"], [class*="method-put"]),
code:is([data-method="PUT"]),
code:is([data-http="PUT"]) {
    background-color: #fca130 !important;
    color: #fff !important;
}

code:is([class*="http-delete"], [class*="method-delete"]),
code:is([data-method="DELETE"]),
code:is([data-http="DELETE"]) {
    background-color: #f93e3e !important;
    color: #fff !important;
}

code:is([class*="http-patch"], [class*="method-patch"]),
code:is([data-method="PATCH"]),
code:is([data-http="PATCH"]) {
    background-color: #50e3c2 !important;
    color: #fff !important;
}

code:is([class*="http-head"], [class*="method-head"]),
code:is([data-method="HEAD"]),
code:is([data-http="HEAD"]) {
    background-color: #9012fe !important;
    color: #fff !important;
}

code:is([class*="http-options"], [class*="method-options"]),
code:is([data-method="OPTIONS"]),
code:is([data-http="OPTIONS"]) {
    background-color: #0d5aa7 !important;
    color: #fff !important;
}

/* Additional HTTP method styling classes */
.http-method {
    font-weight: 600 !important;
    padding: 0.2em 0.4em !important;
    border-radius: 3px !important;
    font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace !important;
    font-size: 0.875em !important;
}

/* Specific method classes for additional customization */
.http-get { background-color: #61affe !important; color: #fff !important; }
.http-post { background-color: #49cc90 !important; color: #fff !important; }
.http-put { background-color: #fca130 !important; color: #fff !important; }
.http-delete { background-color: #f93e3e !important; color: #fff !important; }
.http-patch { background-color: #50e3c2 !important; color: #fff !important; }
.http-head { background-color: #9012fe !important; color: #fff !important; }
.http-options { background-color: #0d5aa7 !important; color: #fff !important; }

/* HTTP code badge (reuses your earlier colors) */
.http-badge {
    display: inline-block;
    min-width: 2.1rem;
    text-align: center;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: 999px;
    color: #fff;
}
/*.http-1xx { background: #64748b; } !* slate *!*/
/*.http-2xx { background: #16a34a; } !* green *!*/
/*.http-3xx { background: #2563eb; } !* blue *!*/
/*.http-4xx { background: #ea580c; } !* orange *!*/
/*.http-5xx { background: #dc2626; } !* red *!*/

/* ===== Pill badges (HMAC / PII) ========================================= */

/* Additional chip styling variables */
:root {
    --chip-font: 700 13px/1 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --chip-radius: 999px;
    --chip-pad-y: 8px;
    --chip-pad-x: 16px;
    --chip-gap: 8px;
}

/* Base chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--chip-gap);
    padding: var(--chip-pad-y) var(--chip-pad-x);
    border-radius: var(--chip-radius);
    font: var(--chip-font);
    letter-spacing: .2px;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: middle;
}

/* Glyph before text (default behavior) */
.chip::before {
    font-size: 16px;
    line-height: 1;
}

/* HMAC variant */
.chip-hmac {
    color: var(--chip-hmac-fg);
    background: var(--chip-hmac-bg);
    border-color: var(--chip-hmac-line);
}
.chip-hmac::before { content: "🛡️"; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* PII variant */
.chip-lock {
    color: var(--chip-pii-fg);
    background: var(--chip-pii-bg);
    border-color: var(--chip-pii-line);
}
.chip-lock::before { content: "🔒"; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* ASYNC variant */
.chip-async {
    color: var(--chip-async-fg);
    background: var(--chip-async-bg);
    border-color: var(--chip-async-line);
}
.chip-async::before { content: "⚡"; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* Badge container alignment */
.h-badges {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Ensure all badge icons use emoji fonts (fix for broken icons) */
.chip-hmac::before,
.chip-lock::before,
.chip-async::before,
.chip::before {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: auto !important;
}

/* Center only the header row text for all markdown tables */
main table thead th,
.markdown table thead th,
.content table thead th,
.doc-table thead th {   /* includes our rare HTML tables too */
    text-align: center !important;
    vertical-align: middle;
}

/* Subtitle chips under the H1 */
.desc-chips{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    margin:.5rem 0 1.25rem;
}
.chip-plain{
    border:1px solid var(--retype-border-color);
    background:var(--retype-code-bg);
    padding:.2rem .55rem;
    border-radius:9999px;
    font-size:.85rem;
}

/* ===== Compact Path row ===== */
.api-path{
    display: flex;
    align-items: center;
    gap: 8px;                 /* spacing between host, path, button */
    column-gap: 8px;          /* extra safety */
    row-gap: 6px;

    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    background: #f8fafc;

    border-radius: 10px;      /* smaller radius to match table feel */
    padding: 6px 8px;         /* tighter padding */
    margin: 4px 0 16px;       /* restore space before “Request” */
}

html.dark .api-path{
    border-color: #374151;
    background: #111827;
}

/* Host badge */
.api-path__host{
    background: #eef2f7;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 6px;       /* smaller chip */
    padding: 4px 8px;
    font: 600 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: nowrap;
}
html.dark .api-path__host{
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

/* Path text */
.api-path__text{
    flex: 1 1 auto;
    margin: 0;
    padding: 0;               /* remove extra internal padding */
    color: #111827;
    font: 500 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
html.dark .api-path__text{ color: #f3f4f6; }

/* Copy button */
.api-path__copy{
    margin-left: auto;
    padding: 4px 8px;         /* tighter button */
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    border-radius: 6px;
    font: 500 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    cursor: pointer;
    line-height: 1.2;
}
.api-path__copy:hover{ background: #f3f4f6; }
html.dark .api-path__copy{
    border-color: #374151;
    background: #1f2937;
    color: #e5e7eb;
}
html.dark .api-path__copy:hover{ background: #303846; }

/* Required Headers table column widths - Compact Layout */
.headers-table-wrapper {
    overflow: visible;
}

.headers-table-wrapper table {
    table-layout: fixed;
    width: 100%;
    overflow: visible;
}

.headers-table-wrapper table th:nth-child(1),
.headers-table-wrapper table td:nth-child(1) {
    width: 28%;
    min-width: 180px;
    white-space: nowrap;
}

.headers-table-wrapper table th:nth-child(2),
.headers-table-wrapper table td:nth-child(2) {
    width: 36%;
    max-width: 300px;
    font-size: 0.85em;
    background-color: #f8fafc;
    padding: 0.5em 0.75em;
    overflow: visible;
    position: relative;
}

html.dark .headers-table-wrapper table th:nth-child(2),
html.dark .headers-table-wrapper table td:nth-child(2) {
    background-color: #1f2937;
}

.headers-table-wrapper table td:nth-child(2) .example-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
    max-width: 100%;
    font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.9em;
    color: #6b7280;
    position: relative;
}

/* Custom tooltip container */
.custom-tooltip {
    position: fixed;
    background-color: #1f2937;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    z-index: 99999;
    font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    max-width: 500px;
    min-width: 150px;
    word-break: break-word;
    white-space: normal;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
    display: block;
    line-height: 1.4;
}

html.dark .custom-tooltip {
    background-color: #374151;
    color: #f3f4f6;
}

.headers-table-wrapper table th:nth-child(3),
.headers-table-wrapper table td:nth-child(3) {
    width: 36%;
    overflow: visible;
    position: relative;
}

.headers-table-wrapper table td:nth-child(3) .desc-cell {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
    padding-right: 4px;
    position: relative;
}


html.dark .headers-table-wrapper table td:nth-child(2) .example-cell::after,
html.dark .headers-table-wrapper table td:nth-child(3) .desc-cell::after {
    background-color: #374151;
    color: #f3f4f6;
}

/* Query Parameters table column widths - Optimized Layout */
.query-params-table-wrapper {
    overflow: visible;
}

.query-params-table-wrapper table {
    table-layout: fixed;
    width: 100%;
    overflow: visible;
}

/* Name column - parameter names */
.query-params-table-wrapper table th:nth-child(1),
.query-params-table-wrapper table td:nth-child(1) {
    width: 25%;
    min-width: 120px;
    white-space: nowrap;
}

/* Type column - will include type and default values */
.query-params-table-wrapper table th:nth-child(2),
.query-params-table-wrapper table td:nth-child(2) {
    width: 28%;
    min-width: 100px;
    text-align: center;
}

/* Required column - just emoji, very narrow */
.query-params-table-wrapper table th:nth-child(3),
.query-params-table-wrapper table td:nth-child(3) {
    width: 10%;
    min-width: 50px;
    text-align: center;
}

/* Description column - reduced width to give space to Type column */
.query-params-table-wrapper table th:nth-child(4),
.query-params-table-wrapper table td:nth-child(4) {
    width: 37%;
    overflow: visible;
}