/* Tokens: light is the default, dark via [data-theme="dark"] or the OS setting. */
:root {
    color-scheme: light;
    --bg: #f6f7f8;
    --surface: #ffffff;
    --surface-2: #f0f2f4;
    --text: #1d2226;
    --muted: #5f6b75;
    --border: #dde1e5;
    --header: #323639;
    --header-text: #ffffff;
    --accent: #117777;
    --accent-soft: #e2f5f5;
    --accent-text: #ffffff;
    --code-bg: #f3f5f7;
    --danger: #d23c3c;
    --dev: #7d5cc6;
    --test: #d2691e;
    --get: #2f7fd0;
    --post: #2e9e5b;
    --put: #c97a1c;
    --patch: #1a9a9a;
    --delete: #d23c3c;
    --method-other: #6b7680;
    --highlight: #fff3a0;
    --highlight-target: #c9cff5;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #16191c;
    --surface: #1e2226;
    --surface-2: #262b30;
    --text: #e6e9ec;
    --muted: #9aa5ae;
    --border: #323840;
    --header: #0f1113;
    --header-text: #e6e9ec;
    --accent: #3bc4c4;
    --accent-soft: #183334;
    --accent-text: #0f1113;
    --code-bg: #14171a;
    --danger: #ef6b6b;
    --dev: #9b7de0;
    --test: #e08a4a;
    --get: #6cb0f5;
    --post: #5fcb8a;
    --put: #e6a04f;
    --patch: #4fd0d0;
    --delete: #ef6b6b;
    --method-other: #9aa5ae;
    --highlight: #5a4b00;
    --highlight-target: #3a4170;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #16191c;
        --surface: #1e2226;
        --surface-2: #262b30;
        --text: #e6e9ec;
        --muted: #9aa5ae;
        --border: #323840;
        --header: #0f1113;
        --header-text: #e6e9ec;
        --accent: #3bc4c4;
        --accent-soft: #183334;
        --accent-text: #0f1113;
        --code-bg: #14171a;
        --danger: #ef6b6b;
        --dev: #9b7de0;
        --test: #e08a4a;
        --get: #6cb0f5;
        --post: #5fcb8a;
        --put: #e6a04f;
        --patch: #4fd0d0;
        --delete: #ef6b6b;
        --method-other: #9aa5ae;
        --highlight: #5a4b00;
        --highlight-target: #3a4170;
    }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

code, pre, .mono { font-family: var(--mono); }

[hidden] { display: none !important; }

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    background: var(--header);
    color: var(--header-text);
    border-bottom: 3px solid transparent;
}

.header.env-dev { border-bottom-color: var(--dev); }
.header.env-test { border-bottom-color: var(--test); }

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--header-text);
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .04em;
}

.logo-mark {
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml,%3csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath id='a' d='M30 0H0v29.8h30V.1z'/%3e%3c/defs%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath d='M21.9 12c-1.3 0-1.9.6-2 2.2h3.8c0-1.5-.6-2.2-1.8-2.2' fill='white'/%3e%3cg transform='translate(0 .1)'%3e%3cmask id='b' fill='white'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cpath d='M24 15.5h-4c0 1.7.3 2.1 2.4 2.1l1.6-.1h.4c.3 0 .5.1.5.5v.3c0 .4-.2.5-.4.6a7 7 0 0 1-2.4.3c-2.9 0-4-1.1-4-4.2 0-3 1.2-4.5 3.8-4.5 3 0 3.4 2.3 3.4 4 0 .5-.3 1-1.3 1zm-7.9 2.8c0 .4-.1.8-.7.8H15c-.5 0-.6-.3-.6-.8V8.2H14c-.8 0-1-.4-1-.6V7c0-.5.7-.5.9-.5h1.2c.8 0 1 .6 1 1.3v10.5zm-4-6L9.9 21c-.3 1.1-1.2 1.8-2.5 1.8s-1.8 0-2.1-.2c-.2 0-.4-.2-.4-.6v-.3c0-.4.2-.6.5-.6h.4l1.3.1c.7 0 1-.1 1.4-1l.2-1.2h-.6c-1 0-1.5-.4-1.7-1.4l-1.5-5.1-.2-1.1c0-.4.3-.6.7-.6h.5c.4 0 .5.3.6.7L8 16.8c.2.7.4.8.8.8H9l1.4-6c.2-.5.3-.7.8-.7h.4c.4 0 .6.2.6.6l-.1 1zM28.6.2H1.4C.6 0 0 .7 0 1.5v27c0 .7.6 1.3 1.4 1.3h27.2c.7 0 1.3-.6 1.3-1.4v-27c0-.7-.6-1.3-1.3-1.3z' fill='white' mask='url(%23b)'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center / 30px 30px no-repeat;
}

.env-badge {
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #ffffff;
}

.env-dev .env-badge { background: var(--dev); }
.env-test .env-badge { background: var(--test); }
.env-production .env-badge { border: 1px solid rgba(255, 255, 255, .4); color: var(--header-text); }

.spacer { flex: 1; }

.icon-btn {
    background: transparent;
    color: var(--header-text);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 17px;
    cursor: pointer;
}

#menu-toggle { display: none; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--accent);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar.guest { box-shadow: none; border: 1.5px dashed rgba(255, 255, 255, .55); background: transparent; }

.guest, .user-menu > summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-name { font-size: 15px; opacity: .85; }

.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    padding: 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

.user-email { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; word-break: break-all; }

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-text);
    border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }

/* Layout */
.layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    min-height: calc(100vh - 55px);
}

.layout.no-sidebar { grid-template-columns: minmax(0, 1fr); }

.sidebar {
    position: sticky;
    top: 55px;
    height: calc(100vh - 55px);
    overflow-y: auto;
    padding: 12px 10px;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.content {
    min-width: 0;
    max-width: 1100px;
    padding: 20px 28px 48px;
}

/* Sidebar */
.input, .sidebar select, .content input, .content select, .content textarea {
    width: 100%;
    padding: 6px 8px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}

/* Own chevron: the native arrow ignores padding and sits against the edge. Gradients follow the theme colors. */
.sidebar select, .content select {
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.sidebar-section { margin-bottom: 10px; }

.sidebar h4 {
    margin: 14px 8px 4px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar h5 { margin: 8px 8px 2px; font-size: 14px; color: var(--muted); font-weight: 600; }

.nav-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.4;
    /* Very long paths wrap instead of being cut. */
    overflow-wrap: anywhere;
}

.nav-link:hover { background: var(--surface-2); }
.nav-link.current { background: var(--accent-soft); font-weight: 600; }

.guest-hint {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 14.5px;
}

.guest-hint p { margin: 0 0 4px; }
.guest-hint a { font-weight: 600; }

/* Method badges */
.m {
    display: inline-block;
    flex-shrink: 0;
    min-width: 46px;
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--method-other);
    color: #ffffff;
    font: 700 13px/1 var(--mono);
    text-align: center;
    text-transform: uppercase;
}

.sidebar .m { min-width: 36px; font-size: 11.5px; padding: 3px 4px; }

:root[data-theme="dark"] .m { color: #0f1113; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m { color: #0f1113; } }

.m-get { background: var(--get); }
.m-post { background: var(--post); }
.m-put { background: var(--put); }
.m-patch { background: var(--patch); }
.m-delete { background: var(--delete); }

/* Content */
.content h1 { font-size: 24px; margin: 6px 0; }
.content h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 24px 0 8px; }

.muted { color: var(--muted); }
.crumb { color: var(--muted); font-size: 14.5px; }

.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.title-row .path { font: 600 19px var(--mono); word-break: break-all; }

.full-url { color: var(--muted); font: 14.5px var(--mono); word-break: break-all; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}

.card + .card { margin-top: 14px; }

.pill {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13.5px;
}

/* Markdown from the specs. `.content .markdown` beats the page's own `.content h2` section-label style. */
.markdown { line-height: 1.6; max-width: 90ch; }
.markdown > :first-child { margin-top: 0; }
.markdown p { margin: 0 0 10px; }
.content .markdown h1,
.content .markdown h2,
.content .markdown h3,
.content .markdown h4,
.content .markdown h5,
.content .markdown h6 {
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    font-weight: 700;
}
.content .markdown h1 { font-size: 22px; margin: 22px 0 10px; }
.content .markdown h2 { font-size: 19px; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.content .markdown h3 { font-size: 17px; margin: 20px 0 8px; }
.content .markdown h4,
.content .markdown h5,
.content .markdown h6 { font-size: 16px; margin: 16px 0 6px; }
.markdown ul, .markdown ol { margin: 0 0 12px; padding-left: 22px; }
.markdown li { margin: 4px 0; }
.markdown a { text-decoration: underline; text-underline-offset: 2px; }
.markdown table { border-collapse: collapse; margin: 0 0 12px; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 4px 8px; }

/* Inline code as a chip */
.markdown code {
    padding: 1px 5px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .9em;
    overflow-wrap: anywhere;
}

/* A paragraph of only code is an example (views/markdown.clj) */
.markdown pre.example {
    margin: 2px 0 10px;
    padding: 8px 12px;
    overflow-x: auto;
    background: var(--code-bg);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
.markdown pre.example code { padding: 0; background: none; border: 0; font-size: .95em; overflow-wrap: normal; }

/* A paragraph of only *emphasis* is a term label, e.g. "equals", "range" */
.markdown p.term { margin: 16px 0 4px; font-weight: 600; }
.markdown p.term em { font-style: normal; }

/* Long endpoint descriptions fold away so Parameters stay near the top */
details.doc {
    margin: 12px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
details.doc > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
details.doc > summary::-webkit-details-marker { display: none; }
details.doc > summary::before { content: "▸"; color: var(--muted); }
details.doc[open] > summary::before { content: "▾"; }
details.doc > summary::after { content: "Show"; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 14px; }
details.doc[open] > summary::after { content: "Hide"; }
details.doc[open] > summary { border-bottom: 1px solid var(--border); }
details.doc > .markdown { padding: 14px 16px 6px; }

.code {
    display: block;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    background: var(--code-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font: 14.5px/1.5 var(--mono);
    white-space: pre;
}

textarea.code { width: 100%; resize: vertical; }

.error { color: var(--danger); }

/* Parameters */
/* Fixed layout: column widths come from the header, so switching Model/Example never moves the form. */
table.params { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.params th:first-child { width: 220px; }
table.params td { overflow-wrap: anywhere; }
table.params td, table.params th {
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
table.params th { color: var(--muted); font-size: 14px; font-weight: 600; }
.param-name { font: 600 15px var(--mono); }
.param-meta { color: var(--muted); font-size: 14px; }
.req { color: var(--danger); margin-left: 2px; }

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Schema tree */
.tree { font: 14.5px/1.7 var(--mono); }
.tree .children { margin-left: 16px; }
.tree summary { cursor: pointer; list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: "▸ "; color: var(--muted); }
.tree details[open] > summary::before { content: "▾ "; }
.tree .leaf { padding-left: 14px; }
.tree .k { margin-right: 6px; }
.tree .ty { color: var(--accent); margin-right: 6px; }
.tree .c { color: var(--muted); }

.model-example .tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.model-example .pane { overflow-x: auto; }
.model-example .pane[data-pane="model"] {
    padding: 10px 12px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Response blocks: status line, then Model/Example with room between them. */
.response > .actions { margin-top: 0; margin-bottom: 14px; }
.response > .actions strong { font-size: 17px; }
.tab {
    padding: 4px 12px;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.tab.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }

/* Narrow screens */
@media (max-width: 800px) {
    #menu-toggle { display: inline-block; }
    .user-name { display: none; }
    table.params th:first-child { width: 40%; }
    .layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        display: none;
        position: fixed;
        inset: 55px 0 0 0;
        z-index: 9;
        height: auto;
    }
    .sidebar.open { display: block; }
    .content { padding: 16px; }
}

/* Send request result */
#request-result:not(:empty) { margin-top: 14px; }
.result-section h3 { margin: 10px 0 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.result-section .code { max-height: 480px; }

/* Page loading indicator (app.js sets .navigating on <html> when a slow page load is under way) */
.navigating { cursor: progress; }
.navigating .content { opacity: .55; transition: opacity .2s; }
.navigating body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
    background-size: 40% 100%;
    animation: navigating 1s linear infinite;
}

@keyframes navigating {
    from { background-position: -60% 0; }
    to { background-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .navigating body::before { animation: none; background: var(--accent); }
}