/* HumbenCompare: response vs ground truth for one benchmark run.
 *
 * Colours come from the host page's NDR Core variables where they exist, with
 * fallbacks so the standalone demo renders correctly too. The widget is embedded in a
 * page, so it styles nothing outside .hbc: no body rules, unlike the dashboard.
 *
 * Difference marks never rely on colour alone: removed text is struck through and
 * added text underlined, so they survive colour-vision deficiency, greyscale print and
 * forced-colors mode.
 */

.hbc {
    --hbc-ink:     var(--text-color, #212529);
    --hbc-surface: var(--container-bg-color, #ffffff);
    --hbc-rule:    rgba(128, 128, 128, .28);
    --hbc-soft:    rgba(128, 128, 128, .10);
    --hbc-accent:  var(--button-color, #00b0b9);

    --hbc-add:     #1f6f3c;
    --hbc-add-bg:  #eaf6ed;
    --hbc-del:     #a83a3a;
    --hbc-del-bg:  #fbecec;

    color: var(--hbc-ink);
    font-size: 14px;
    line-height: 1.5;
}

[data-theme="dark"] .hbc {
    --hbc-surface: var(--container-bg-color, #1e1e1e);
    --hbc-add:    #6fcf8e;
    --hbc-add-bg: #16281c;
    --hbc-del:    #e58a8a;
    --hbc-del-bg: #2b1a1a;
}

/* ── head ─────────────────────────────────────────────────────────────────── */

.hbc-head { margin-bottom: 1rem; }

.hbc-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 .2rem; }

.hbc-meta,
.hbc-note { font-size: .8rem; opacity: .7; margin: 0; }

.hbc-loading { font-size: .85rem; opacity: .7; padding: 1rem 0; }

.hbc-error {
    font-size: .82rem;
    color: var(--hbc-del);
    background: var(--hbc-del-bg);
    border: 1px solid var(--hbc-rule);
    border-radius: 4px;
    padding: .5rem .7rem;
    margin: .5rem 0;
}

/* ── prompt ────────────────────────────────────────────────────────── */

.hbc-prompt { margin-top: .6rem; }

.hbc-prompt-summary {
    font-size: .78rem;
    cursor: pointer;
    opacity: .8;
    display: inline-block;
    padding: .1rem 0;
}
.hbc-prompt-summary:hover { opacity: 1; }

.hbc-prompt[open] .hbc-prompt-summary { margin-bottom: .4rem; font-weight: 600; }

/* "click to expand" / "click to collapse": both are in the DOM as real text, and the
   disclosure state picks which one shows, so a screen reader gets the right one. */
.hbc-prompt-hint {
    font-size: .7rem;
    font-weight: 400;
    opacity: .85;
    margin-left: .4rem;
}
.hbc-prompt .hbc-prompt-hint.is-open,
.hbc-prompt[open] .hbc-prompt-hint.is-closed { display: none; }
.hbc-prompt[open] .hbc-prompt-hint.is-open { display: inline; }

.hbc-prompt .hbc-code { max-height: 14rem; }

.hbc-prompt .hbc-note { margin-top: .35rem; font-size: .72rem; }

/* ── embedded in a result card ────────────────────────────────────────────── */

/* Collapsed by default: a result list shows many cards, and an open comparison in each
   would bury the card it belongs to. Nothing is fetched until one is opened. */
.hbc-card { margin-top: .6rem; }

.hbc-card-summary {
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem 0;
}
.hbc-card-summary:hover { opacity: .85; }

.hbc-card-hint {
    font-size: .72rem;
    font-weight: 400;
    opacity: .85;
    margin-left: .4rem;
}
.hbc-card .hbc-card-hint.is-open,
.hbc-card[open] .hbc-card-hint.is-closed { display: none; }
.hbc-card[open] .hbc-card-hint.is-open { display: inline; }

.hbc-card-mount { margin-top: .6rem; }

/* ── run chooser ──────────────────────────────────────────────────────────── */

.hbc-runlist { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.hbc-runpick {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--hbc-surface);
    border: 1px solid var(--hbc-rule);
    border-radius: 4px;
    padding: .5rem .7rem;
    cursor: pointer;
}
.hbc-runpick:hover { border-color: var(--hbc-accent); }
.hbc-runpick-date { font-weight: 600; }
.hbc-runpick-model { font-size: .76rem; opacity: .7; }

/* ── layout ───────────────────────────────────────────────────────────────── */

.hbc-body { display: flex; flex-direction: column; gap: .9rem; }

/* ── navigation ───────────────────────────────────────────────────────────── */

.hbc-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem 1.2rem;
    border-bottom: 1px solid var(--hbc-rule);
}
.hbc-step { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-bottom: .6rem; }
.hbc-pos { font-size: .9rem; font-variant-numeric: tabular-nums; }
.hbc-stepbtn, .hbc-listbtn {
    font: inherit;
    color: inherit;
    background: var(--hbc-surface);
    border: 1px solid var(--hbc-rule);
    border-radius: 5px;
    min-width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}
.hbc-stepbtn { font-size: 1.3rem; line-height: 1; }
.hbc-listbtn { font-size: .85rem; font-weight: 600; padding: 0 .9rem; }
.hbc-stepbtn:hover:not([disabled]), .hbc-listbtn:hover { border-color: var(--hbc-accent); }
.hbc-stepbtn[disabled] { opacity: .35; cursor: default; }
.hbc-listbtn[aria-expanded="true"] { border-color: var(--hbc-accent); }
.hbc-tabs { display: flex; gap: 1.4rem; }
.hbc-tab {
    font: inherit;
    font-size: .9rem;
    color: inherit;
    opacity: .7;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: .5rem 0;
    cursor: pointer;
}
.hbc-tab[aria-pressed="true"] { opacity: 1; font-weight: 600; border-bottom-color: var(--hbc-accent); }
.hbc-tab[disabled] { opacity: .35; cursor: default; }

/* ── input list ───────────────────────────────────────────────────────────── */

.hbc-listpanel { border: 1px solid var(--hbc-rule); border-radius: 6px; padding: .6rem; }
.hbc-listpanel[hidden] { display: none; }
.hbc-listtools { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.hbc-listsearch, .hbc-listsort {
    font: inherit;
    font-size: .85rem;
    color: inherit;
    background: var(--hbc-surface);
    border: 1px solid var(--hbc-rule);
    border-radius: 5px;
    min-height: 2.2rem;
    padding: 0 .5rem;
}
.hbc-listsearch { flex: 1 1 12rem; }

.hbc-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 2px 6px;
    max-height: 18rem;
    overflow-y: auto;
}
.hbc-item[hidden] { display: none; }

.hbc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font: inherit;
    font-size: .78rem;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 3px;
    padding: .3rem .45rem;
    cursor: pointer;
}
.hbc-item:hover { background: var(--hbc-soft); }
.hbc-item.is-selected { background: var(--hbc-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--hbc-accent); }

.hbc-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hbc-item-badge { font-size: .7rem; flex-shrink: 0; font-variant-numeric: tabular-nums; border-radius: 3px; padding: 0 .3rem; }
.hbc-item-badge.is-missing { opacity: .75; }
.hbc-item-badge.is-exact { color: var(--hbc-add); }
.hbc-item-badge.is-zero, .hbc-item-badge.is-partial { color: var(--hbc-del); background: var(--hbc-del-bg); }

/* ── pane ─────────────────────────────────────────────────────────────────── */

.hbc-pane { min-width: 0; }

.hbc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .75rem;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--hbc-rule);
}
.hbc-bar-name { font-weight: 600; }

.hbc-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.hbc-chip {
    font-size: .7rem;
    border: 1px solid var(--hbc-rule);
    border-radius: 3px;
    padding: .08rem .35rem;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

/* A setting of the benchmark, not something the model scored. Dashed and dimmed so it
   does not read as one more result in the row. */
.hbc-chip.is-parameter {
    border-style: dashed;
    opacity: .8;
}

/* Anything carrying a tooltip gets the cue, so it is discoverable rather than a
   hidden feature. */
.hbc [title] { cursor: help; }
.hbc button[title], .hbc a[title], .hbc summary[title] { cursor: pointer; }

.hbc-pane { display: flex; flex-direction: column; gap: 1rem; }
.hbc-pane .hbc-bar { margin-bottom: 0; }

.hbc-chip.is-main { font-weight: 600; opacity: 1; }
.hbc-chip.is-main.is-exact { color: var(--hbc-add); }
.hbc-chip.is-main.is-partial, .hbc-chip.is-main.is-zero { color: var(--hbc-del); }

/* Differences marked inside a cell: never by colour alone. */
.hbc-del { color: var(--hbc-del); background: var(--hbc-del-bg); text-decoration: line-through; }
.hbc-ins { color: var(--hbc-del); background: var(--hbc-del-bg); text-decoration: underline; text-decoration-thickness: 2px; }
.hbc-diffnote { font-size: .8rem; margin: 0 0 .4rem; }
.hbc-diffnote[hidden] { display: none; }
.hbc-table tbody tr[hidden] { display: none; }

.hbc-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem 1.2rem;
    font-size: .8rem;
    padding-top: .6rem;
    border-top: 1px solid var(--hbc-rule);
}
.hbc-foot-figures { font-variant-numeric: tabular-nums; }
.hbc-foot-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.hbc-foot-links a, .hbc-linkbtn { color: var(--hbc-accent); }
.hbc-linkbtn { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.hbc-colhead {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
    margin-bottom: .4rem;
}

.hbc-source, .hbc-diff { min-width: 0; }

.hbc-imglink { display: block; margin-bottom: .5rem; }
.hbc-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    border: 1px solid var(--hbc-rule);
    border-radius: 4px;
    background: var(--hbc-soft);
}

.hbc-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 26rem;
    overflow: auto;
    background: var(--hbc-soft);
    border: 1px solid var(--hbc-rule);
    border-radius: 4px;
    padding: .5rem .6rem;
    margin: 0;
}

/* ── field comparison ─────────────────────────────────────────────────────── */

.hbc-tablewrap {
    overflow-x: auto;
    max-height: 30rem;
    overflow-y: auto;
    border: 1px solid var(--hbc-rule);
    border-radius: 4px;
}

.hbc-table { border-collapse: collapse; width: 100%; font-size: .76rem; }

.hbc-table th {
    text-align: left;
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: .4rem .55rem;

    /* The header is sticky inside a scrolling box, so it has to be opaque and has to
       paint above the rows. Two things previously let content through it: --hbc-soft is
       translucent by design, and `opacity` fades an element's background along with its
       text. So dim the text colour instead, and lay the tint over the surface colour. */
    color: var(--hbc-ink);
    color: color-mix(in srgb, var(--hbc-ink) 68%, transparent);
    background-color: var(--hbc-surface);
    background-image: linear-gradient(var(--hbc-soft), var(--hbc-soft));
    position: sticky;
    top: 0;
    /* Above rows that carry their own background, such as .is-zero. */
    z-index: 1;
    /* border-collapse drops borders on sticky cells; an inset shadow survives it. */
    box-shadow: inset 0 -1px 0 var(--hbc-rule);
}

.hbc-table td {
    padding: .3rem .55rem;
    border-top: 1px solid var(--hbc-rule);
    vertical-align: top;
    word-break: break-word;
}

/* The sticky header draws its own bottom rule, which would otherwise sit directly on
   the first row's top border and read as a 2px line while the table is at rest. */
.hbc-table tbody tr:first-child td { border-top: 0; }

.hbc-td-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    opacity: .8;
    white-space: nowrap;
}

.hbc-th-mark, .hbc-td-mark {
    text-align: right;
    width: 5.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hbc-td-mark { font-weight: 600; }

/* Counts sit under the field name, in the scorer's own vocabulary (tp/fp/fn). */
.hbc-td-counts {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .66rem;
    opacity: .8;
    margin-top: .15rem;
    white-space: nowrap;
}

/* Bands, not a verdict: the scorer's own threshold is not recorded with the result.
   Zero is called out because "the model produced nothing for this field" is the case a
   reader is usually hunting for; partial is left quiet so it does not read as failure. */
.hbc-table tr.is-zero { background: var(--hbc-del-bg); }
.hbc-table tr.is-zero .hbc-td-mark { color: var(--hbc-del); }
.hbc-table tr.is-partial .hbc-td-mark { color: var(--hbc-del); }
.hbc-table tr.is-exact .hbc-td-mark { color: var(--hbc-add); }
.hbc-table tr.is-unscored .hbc-td-mark { opacity: .75; }

.hbc-absent { opacity: .75; font-style: italic; }

/* Provenance for re-scored detail. Muted by default -- it is a caveat, not a problem --
   and given a warning accent only where the recomputation no longer reproduces the
   run's own score, which means the ground truth moved after the run. */
.hbc-rescored {
    font-size: .72rem;
    line-height: 1.5;
    opacity: .7;
    margin: .4rem 0 0;
}

.hbc-rescored.is-divergent {
    opacity: 1;
    color: var(--hbc-del);
    background: var(--hbc-del-bg);
    border-left: 3px solid var(--hbc-del);
    border-radius: 0 3px 3px 0;
    padding: .4rem .55rem;
}

/* ── text comparison ──────────────────────────────────────────────────────── */

/* Sits under the comparison, not over it: the values come first, and the note is
   for the reader who stops to ask what they are. */
.hbc-legend { font-size: .72rem; opacity: .7; margin-top: .6rem; }

.hbc-sidebyside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .6rem;
}

@media (max-width: 700px) {
    .hbc-sidebyside { grid-template-columns: minmax(0, 1fr); }
}

/* ── focus ────────────────────────────────────────────────────────────────── */

.hbc button:focus-visible,
.hbc a:focus-visible {
    outline: 2px solid var(--hbc-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .hbc * { transition: none !important; animation: none !important; }
}

/* ══ House style ══════════════════════════════════════════════════════════════
   Shared with humben, humben-card, humben-results and humben-runs (see the repo README):
   soft rounded tiles instead of outlined chips, uppercase muted labels, rounded panels with
   a tinted header, and the accent marking the selected input. Later rules here override the
   base rules above; layout and behaviour are unchanged. */

.hbc {
    --hbc-tint:  color-mix(in srgb, var(--hbc-accent) 12%, transparent);
    --hbc-muted: var(--muted, #5B6469);
    font-size: 14px;
}
.hbc .hbc-title { font-size: 1.15rem; font-weight: 600; }
.hbc .hbc-meta, .hbc .hbc-note { opacity: 1; color: var(--hbc-muted); }

/* Input list: rounded panel; the selected input gets the accent bar. */
.hbc .hbc-list { border-radius: 10px; padding: .35rem; gap: 2px; }
.hbc .hbc-item { border-radius: 6px; padding: .35rem .55rem; border-left: 3px solid transparent; }
.hbc .hbc-item:hover { background: var(--hbc-soft); }
.hbc .hbc-item.is-selected { background: var(--hbc-tint); border-left-color: var(--hbc-accent); }
.hbc .hbc-item.is-selected .hbc-item-name { text-decoration: none; }

/* Per-input metrics: tiles, not outlined chips. */
.hbc .hbc-bar-name { font-size: 1rem; }
.hbc .hbc-chip {
    border: 0; border-radius: 6px; background: var(--hbc-soft); opacity: 1;
    font-size: .75rem; padding: .15rem .5rem;
}
.hbc .hbc-chip.is-parameter { background: transparent; border: 1px dashed var(--hbc-rule); color: var(--hbc-muted); }

.hbc .hbc-colhead { font-size: .7rem; font-weight: 600; letter-spacing: .05em; opacity: 1; color: var(--hbc-muted); }
.hbc .hbc-img { border-radius: 8px; }
.hbc .hbc-code { border-radius: 8px; }

/* Field table: rounded panel, tinted header row. */
.hbc .hbc-tablewrap { border-radius: 10px; }
/* The header keeps its opaque background from the base rules: it is sticky over the rows. */
.hbc .hbc-table th { font-size: .7rem; letter-spacing: .05em; }
/* Long field paths wrap, so Ground truth and the mark stay in view without scrolling. */
.hbc .hbc-td-key { white-space: normal; overflow-wrap: normal; min-width: 9rem; }
.hbc .hbc-table tbody tr:hover { background: var(--hbc-tint); }
.hbc .hbc-legend { color: var(--hbc-muted); opacity: 1; }

.hbc .hbc-runpick { border-radius: 8px; }
.hbc .hbc-runpick:hover { background: var(--hbc-tint); }