/* =========================================================================
   Developer Portal layer: code blocks and tabs, endpoint headers, field
   tables, HTTP status pills, the request builder and the landing code panel.
   Loaded after styles.css; uses its --vx-* and --dk-* tokens so light and
   dark mode follow the user guide and fyscaltech.com.
   ========================================================================= */
:root {
    --code-bg: #12131c;
    --code-bar: #1b1d29;
    --code-line: #2a2d3f;
    --code-ink: #e4e6f2;
    --code-muted: #8d91ad;
    --tk-key: #9db4ff;
    --tk-str: #a5e3b6;
    --tk-num: #ffc387;
    --tk-kw: #ff9cff;
    --tk-com: #7d819e;
    --tk-flag: #8fd4ff;
    --m-post: #1e7a52;  --m-post-bg: #e7f5ee;
    --m-get: #2357c9;   --m-get-bg: #e8effc;
    --m-put: #a85a07;   --m-put-bg: #fff3e3;
    --m-delete: #b4232c; --m-delete-bg: #fdecec;
    --s2: #1e7a52; --s2-bg: #e7f5ee;
    --s4: #a85a07; --s4-bg: #fff3e3;
    --s5: #b4232c; --s5-bg: #fdecec;
}
@media screen { :root[data-theme="dark"] {
    --code-bg: #0e0e12;
    --code-bar: #17171d;
    --code-line: #2c2c36;
    --m-post: #6fd3a0;  --m-post-bg: #15301f;
    --m-get: #9ab6ff;   --m-get-bg: #18213d;
    --m-put: #ffc387;   --m-put-bg: #33240f;
    --m-delete: #ff9a9a; --m-delete-bg: #3a1618;
    --s2: #6fd3a0; --s2-bg: #15301f;
    --s4: #ffc387; --s4-bg: #33240f;
    --s5: #ff9a9a; --s5-bg: #3a1618;
} }

/* ---- Code blocks ---- */
.doc-section pre.code, .hero-code pre.code, .rb pre.code {
    position: relative; margin: 14px 0 22px; padding: 16px 18px; overflow-x: auto;
    background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-line);
    border-radius: 10px; font: 13px/1.65 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    tab-size: 4; max-width: 100%;
}
.doc-section pre.code code, .hero-code pre.code code, .rb pre.code code {
    background: none; color: inherit; padding: 0; border: 0; font: inherit; white-space: pre;
}
.tk-key { color: var(--tk-key); } .tk-str { color: var(--tk-str); } .tk-num { color: var(--tk-num); }
.tk-kw { color: var(--tk-kw); } .tk-com { color: var(--tk-com); font-style: italic; } .tk-flag { color: var(--tk-flag); }

.code-copy {
    position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 6px; border: 1px solid var(--code-line); background: var(--code-bar);
    color: var(--code-muted); font: 600 11.5px/1 'FT Sans', system-ui, sans-serif; cursor: pointer;
    opacity: 0; transition: opacity .15s ease, color .15s ease;
}
pre.code:hover .code-copy, .code-copy:focus-visible, .code-copy.done { opacity: 1; }
.code-copy:hover { color: #fff; }
.code-copy.done { color: var(--tk-str); }
@media (hover: none) { .code-copy { opacity: 1; } }

/* ---- Code tabs ---- */
.code-tabs { margin: 14px 0 24px; border: 1px solid var(--code-line); border-radius: 10px; overflow: hidden; background: var(--code-bg); }
.code-tabs > pre.code { margin: 0; border: 0; border-radius: 0; }
.code-tabbar {
    display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--code-bar);
    border-bottom: 1px solid var(--code-line); overflow-x: auto; scrollbar-width: none;
}
.code-tabs-title { color: var(--code-muted); font: 600 11px/1 'FT Sans', system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; margin-right: 10px; white-space: nowrap; }
.code-tab {
    padding: 10px 11px 9px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    color: var(--code-muted); font: 600 12.5px/1 'FT Sans', system-ui, sans-serif; white-space: nowrap;
}
.code-tab:hover { color: #fff; }
.code-tab.is-active { color: #fff; border-bottom-color: #ff5cff; }
:root:not([data-theme="dark"]) .code-tab.is-active { border-bottom-color: #7c9dff; }

/* ---- Endpoint header ---- */
.endpoint {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 18px; padding: 14px 16px;
    border: 1px solid var(--vx-node-line); border-radius: 12px; background: var(--vx-panel);
}
.endpoint .ep-path { font: 600 14.5px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--vx-ink); word-break: break-all; flex: 1 1 260px; }
.endpoint .ep-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.endpoint .ep-chip { font: 600 11.5px/1 'FT Sans', system-ui, sans-serif; padding: 5px 8px; border-radius: 999px; background: var(--vx-node); border: 1px solid var(--vx-node-line); color: var(--vx-muted); }
.endpoint .btn-build {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 8px;
    border: 1px solid var(--vx-accent-line); background: var(--vx-accent-soft); color: var(--vx-accent);
    font: 650 13px/1 'FT Sans', system-ui, sans-serif; cursor: pointer;
}
.endpoint .btn-build:hover { background: var(--vx-accent); color: #fff; }
.ep-method {
    display: inline-block; min-width: 52px; text-align: center; padding: 5px 8px; border-radius: 6px;
    font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .03em;
}
.ep-method.m-post { color: var(--m-post); background: var(--m-post-bg); }
.ep-method.m-get { color: var(--m-get); background: var(--m-get-bg); }
.ep-method.m-put, .ep-method.m-patch { color: var(--m-put); background: var(--m-put-bg); }
.ep-method.m-delete { color: var(--m-delete); background: var(--m-delete-bg); }

/* ---- HTTP status pills ---- */
.http { display: inline-block; padding: 2px 7px; border-radius: 6px; font: 700 12px/1.5 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; }
.http.s2 { color: var(--s2); background: var(--s2-bg); }
.http.s4 { color: var(--s4); background: var(--s4-bg); }
.http.s5 { color: var(--s5); background: var(--s5-bg); }

/* ---- Field tables ---- */
.doc-section table.fields td:first-child { white-space: nowrap; }
.doc-section table.fields td:first-child code { font-weight: 650; }
.doc-section table.fields .type { font: 500 12px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--vx-muted); }
.doc-section table.fields .req, .rb .req {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
    font: 700 10.5px/1.5 'FT Sans', system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase;
    color: var(--s5); background: var(--s5-bg);
}
.doc-section table.fields tr.group td {
    background: var(--vx-lane-a); color: var(--vx-muted); font: 700 11.5px/1.4 'FT Sans', system-ui, sans-serif;
    letter-spacing: .06em; text-transform: uppercase; padding-top: 9px; padding-bottom: 9px;
}

/* ---- Two-column "request | response" layout on wide screens ---- */
.rr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rr-grid > * { min-width: 0; }
.rr-grid h4 { margin-top: 6px !important; }
@media (max-width: 1100px) { .rr-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---- Request builder ---- */
.rb-overlay {
    position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-start; justify-content: center;
    padding: 5vh 16px; background: rgba(10, 10, 20, .55); backdrop-filter: blur(3px); overflow-y: auto;
}
.rb-overlay.open { display: flex; }
body.rb-open { overflow: hidden; }
.rb {
    width: min(1080px, 100%); background: var(--vx-node); color: var(--vx-body); border: 1px solid var(--vx-node-line);
    border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); padding: 20px 22px 22px;
}
.rb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rb-head h2 { margin: 8px 0 0; font-size: 20px; color: var(--vx-ink); }
.rb-path { font: 600 14px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--vx-ink); background: none; }
.rb-close { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--vx-muted); cursor: pointer; padding: 0 4px; }
.rb-note { margin: 12px 0 16px; font-size: 13.5px; color: var(--vx-muted); line-height: 1.55; }
.rb-note code { font-size: 12px; }
.rb-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; }
.rb-form { display: grid; gap: 10px; align-content: start; max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.rb-field label { display: block; font-size: 12.5px; margin-bottom: 4px; color: var(--vx-ink); }
.rb-field input, .rb-field select {
    width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--vx-node-line);
    background: var(--vx-panel); color: var(--vx-ink); font: 13px/1.3 'JetBrains Mono', ui-monospace, monospace;
}
.rb-field input:focus, .rb-field select:focus { outline: 2px solid var(--vx-accent-line); outline-offset: 1px; }
.rb-field small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--vx-muted); }
.rb-out .code-tabs { margin: 0; }
.rb-out pre.code { max-height: 58vh; }
@media (max-width: 820px) { .rb-body { grid-template-columns: minmax(0, 1fr); } .rb-form { max-height: none; } }

/* ---- Landing: code panel next to the hero ---- */
.hero-code { align-self: center; min-width: 0; }
.hero-code .code-tabs { margin: 0; box-shadow: 0 30px 70px -30px rgba(20, 20, 70, .55); }
.hero-code pre.code { font-size: 12.5px; max-height: 360px; }
.hero-code figcaption { margin-top: 10px; font-size: 13px; color: var(--vx-muted); }

/* ---- "Placeholder" values in code and text: {BASE_URL}, {API_KEY} ---- */
.doc-section code.ph { color: var(--vx-accent); background: var(--vx-accent-soft); }

/* ---- Print: code stays readable on paper ---- */
@media print {
    .doc-section pre.code { background: #f6f6fa !important; color: #111 !important; border-color: #ccc !important; white-space: pre-wrap; }
    .code-copy, .code-tabbar, .btn-build { display: none !important; }
    .code-tabs > pre.code[hidden] { display: block !important; }
    .tk-key, .tk-str, .tk-num, .tk-kw, .tk-com, .tk-flag { color: inherit !important; }
}

/* ---- Signature checker (callback chapter) ---- */
.sig-tool {
    margin: 22px 0 26px; padding: 18px 20px; border: 1px solid var(--vx-node-line); border-radius: 12px;
    background: var(--vx-panel); display: grid; gap: 6px; max-width: 860px;
}
.sig-tool-title { margin: 0 !important; font-weight: 750; color: var(--vx-ink) !important; }
.sig-tool-sub { margin: 0 0 8px !important; font-size: 13.5px !important; color: var(--vx-muted) !important; }
.sig-tool label { font-size: 12.5px; font-weight: 650; color: var(--vx-ink); margin-top: 6px; }
.sig-tool input, .sig-tool textarea {
    width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--vx-node-line);
    background: var(--vx-node); color: var(--vx-ink); font: 12.5px/1.5 'JetBrains Mono', ui-monospace, monospace; resize: vertical;
}
.sig-tool-out { margin: 10px 0 0 !important; display: grid; gap: 4px; }
.sig-tool-out span { font-size: 12.5px; font-weight: 650; color: var(--vx-ink); }
.sig-tool-out code { word-break: break-all; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; }
.sig-tool-verdict { margin: 4px 0 0 !important; font-weight: 650; font-size: 13.5px !important; }
.sig-tool-verdict.ok { color: var(--s2) !important; }
.sig-tool-verdict.bad { color: var(--s5) !important; }

/* Code examples inside Ask AI answers */
.ai-msg pre.ai-code {
    margin: 8px 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--code-bg); color: var(--code-ink);
    font: 12px/1.55 'JetBrains Mono', ui-monospace, monospace;
}
.ai-msg pre.ai-code code { background: none; color: inherit; padding: 0; white-space: pre; }