/*
 * Stylesheet for xohtml's wrapped libxo HTML output.
 *
 * Scoped to what libxo's HTML renderer actually emits (see
 * xo_buf_append_div, xo_class_name, xo_colors_handle_html in
 * libxo.c) plus the page chrome xohtml.sh adds around it
 * (#xohtml-header, #xohtml-content) and the inline tooltip
 * (xohtml.js).
 */

:root {
    --xo-bg: #ffffff;
    --xo-fg: #1a1a1a;
    --xo-muted: #6b7280;
    --xo-border: #d8dee6;
    --xo-accent: #2b5fb0;
    --xo-accent-bg: #eef3fb;
    --xo-key: #b3261e;
    --xo-warning-bg: #fff6e5;
    --xo-warning-fg: #92400e;
    --xo-header-bg: #1f2937;
    --xo-header-fg: #f3f4f6;
    --xo-header-muted: #9ca3af;
    --xo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --xo-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
        Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--xo-bg);
    color: var(--xo-fg);
}

body {
    font-family: var(--xo-sans);
}

/*
 * Header bar: the command that was run and when.
 */
#xohtml-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5em;
    background: var(--xo-header-bg);
    color: var(--xo-header-fg);
    padding: 10px 24px;
}

#xohtml-header .xohtml-cmd {
    font-family: var(--xo-mono);
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

#xohtml-header .xohtml-time {
    color: var(--xo-header-muted);
    font-size: 0.85em;
    white-space: nowrap;
}

/*
 * Content card: where the actual libxo output lives.
 */
#xohtml-content {
    max-width: 960px;
    margin: 24px auto;
    padding: 20px 28px;
    border: 1px solid var(--xo-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-family: var(--xo-mono);
    font-size: 13.5px;
    line-height: 1.5;
    overflow-x: auto;
}

/*
 * Line/field structure (libxo.c: xo_line_ensure_open, xo_buf_append_div)
 */
div.line {
    display: block;
}

div.blank-line {
    display: block;
    height: 1em;
}

div.text, div.decoration, div.data, div.label, div.note,
div.padding, div.units, div.error, div.warning {
    display: inline;
    white-space: pre-wrap;
}

div.decoration {
    color: var(--xo-muted);
}

div.label, div.note {
    color: var(--xo-fg);
}

div.error {
    color: #b91c1c;
    font-weight: 600;
}

div.warning {
    background: var(--xo-warning-bg);
    color: var(--xo-warning-fg);
    padding: 0 3px;
    border-radius: 3px;
}

div.title {
    display: inline-block;
    background: var(--xo-accent-bg);
    color: var(--xo-accent);
    border-bottom: 2px solid var(--xo-accent);
    white-space: pre-wrap;
    padding: 1px 0;
    margin-top: 6px;
    font-weight: 600;
}

div[data-key] {
    color: var(--xo-key);
    font-weight: 600;
}

/* Fields carrying tooltip data get a hover cue. */
div.data[data-help], div.data[data-type], div.data[data-units],
div.data[data-xpath] {
    cursor: help;
    border-bottom: 1px dotted var(--xo-border);
}

div.data[data-help]:hover, div.data[data-type]:hover,
div.data[data-units]:hover, div.data[data-xpath]:hover {
    border-bottom-color: var(--xo-accent);
}

/*
 * Colors and effects (libxo.c: xo_colors_handle_html)
 */
div.color-fg-black   { color: #111827; }
div.color-fg-red     { color: #dc2626; }
div.color-fg-green   { color: #16a34a; }
div.color-fg-yellow  { color: #ca8a04; }
div.color-fg-blue    { color: #2563eb; }
div.color-fg-magenta { color: #c026d3; }
div.color-fg-cyan    { color: #0891b2; }
div.color-fg-white   { color: #f9fafb; }
div.color-fg-inverse { color: #ffffff; }

div.color-bg-black   { background-color: #111827; }
div.color-bg-red     { background-color: #dc2626; }
div.color-bg-green   { background-color: #16a34a; }
div.color-bg-yellow  { background-color: #ca8a04; }
div.color-bg-blue    { background-color: #2563eb; }
div.color-bg-magenta { background-color: #c026d3; }
div.color-bg-cyan    { background-color: #0891b2; }
div.color-bg-white   { background-color: #f9fafb; }
div.color-bg-inverse { background-color: #111827; }

div.effect-bold      { font-weight: bold; }
div.effect-underline { text-decoration: underline; }
div.effect-reset, div.effect-normal {
    font-weight: normal;
    text-decoration: none;
}

/*
 * Inline tooltip (xohtml.js)
 */
.xohtml-tip {
    position: absolute;
    z-index: 1000;
    max-width: 360px;
    background: var(--xo-header-bg);
    color: var(--xo-header-fg);
    font-family: var(--xo-sans);
    font-size: 12.5px;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.xohtml-tip b {
    color: #93c5fd;
}

.xohtml-tip .xpath-wrapper {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.xohtml-tip a.xpath-link {
    color: #93c5fd;
    text-decoration: none;
    cursor: pointer;
}

.xohtml-tip a.xpath-link:hover {
    text-decoration: underline;
}

.xohtml-tip .xpath {
    margin-top: 6px;
    font-family: var(--xo-mono);
    word-break: break-all;
}

/*
 * Sortable table view (xohtml.js)
 */
#xohtml-content table.xohtml-table {
    display: none;
    border-collapse: collapse;
    margin: 6px 0;
    font-family: var(--xo-mono);
    font-size: inherit;
}

#xohtml-content table.xohtml-table th,
#xohtml-content table.xohtml-table td {
    border: 1px solid var(--xo-border);
    padding: 4px 10px;
    text-align: left;
    white-space: pre;
}

#xohtml-content table.xohtml-table th {
    background: var(--xo-accent-bg);
    color: var(--xo-accent);
    cursor: pointer;
    user-select: none;
}

#xohtml-content table.xohtml-table th:hover {
    background: #dfe9f8;
}

#xohtml-content table.xohtml-table th .xohtml-sort-arrow {
    color: var(--xo-muted);
    margin-left: 4px;
}

div.xohtml-ident-toggle {
    margin-top: 6px;
}

div.xohtml-ident-toggle .xohtml-view-toggle {
    margin-left: 0;
}

.xohtml-view-toggle {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 0 0 10px;
    padding: 1px 8px;
    font-family: var(--xo-sans);
    font-size: 11px;
    border: 1px solid var(--xo-border);
    border-radius: 4px;
    background: var(--xo-accent-bg);
    color: var(--xo-accent);
    cursor: pointer;
}

.xohtml-view-toggle:hover {
    background: #dfe9f8;
}