.bh {
  container-type: inline-size;
  container-name: bh;
  font-family: var(--bh-font-sans);
  font-size: var(--bh-fs-body);
  color: var(--bh-fg);
  font-variant-numeric: tabular-nums;
  --bh-accent: var(--bh-fg);
  --bh-track: var(--bh-chart-grid);
  --bh-soft: color-mix(in srgb, var(--bh-fg) 6%, transparent);
}
.bh *, .bh *::before, .bh *::after { box-sizing: border-box; }
.bh [hidden] { display: none !important; }
.bh button, .bh select, .bh input { font: inherit; color: inherit; }
.bh button { cursor: pointer; }
.bh :focus-visible { outline: 2px solid var(--bh-accent); outline-offset: 2px; }
.bh-loading { padding: var(--bh-pad-xl); color: var(--bh-fg-muted); }

/* header */
.bh-head { display: flex; flex-wrap: wrap; gap: var(--bh-gap-md); align-items: flex-start; justify-content: space-between; margin-bottom: var(--bh-gap-md); }
.bh-titlebox { min-width: min(100%, 22rem); flex: 1 1 22rem; }
.bh-title { margin: 0; font-family: var(--bh-font-serif); font-weight: 400; font-size: var(--bh-fs-title); line-height: 1.2; }
.bh-take { margin: .35rem 0 0; color: var(--bh-fg-muted); line-height: 1.45; max-width: 60rem; }
.bh-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bh-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; border: 1px solid var(--bh-line); border-radius: 99px; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); background: var(--bh-panel); white-space: nowrap; }
.bh-chip::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bh-fg-muted); }
.bh-chip.ok::before { background: var(--bh-ok); }
.bh-chip.warn::before { background: var(--bh-warn); }
.bh-chip.bad::before { background: var(--bh-bad); }
.bh-chip.bad { color: var(--bh-bad); }

/* KPI strip: compact and sticky by default, roomy on wide containers */
.bh-kpis { position: sticky; top: 0; z-index: 6; background: var(--bh-bg); padding: .4rem 0 .45rem; margin-bottom: var(--bh-gap-sm); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.bh-tile { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: .35rem .5rem; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.bh-tile-l { font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); letter-spacing: .01em; line-height: 1.2; }
.bh-tile-v { font-family: var(--bh-font-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.15; white-space: nowrap; }
.bh-tile-v small { font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); font-family: var(--bh-font-sans); margin-left: .25rem; }
.bh-tile-d { font-size: var(--bh-fs-caption); min-height: 1.1em; }
.bh-tile-s { display: none; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); margin-top: auto; }
.bh-tile-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-tile-d .sfx { display: none; }
@container bh (min-width: 640px) {
  .bh-kpis { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--bh-gap-sm); padding: .5rem 0 .6rem; }
  .bh-tile { padding: .6rem .75rem; min-height: 5.6rem; gap: .12rem; }
  .bh-tile-v { font-size: 1.65rem; }
  .bh-tile-s { display: block; }
  .bh-tile-d .sfx { display: inline; }
  .bh-tile-d { white-space: normal; overflow: visible; }
}
.bh-up { color: var(--bh-ok); }
.bh-down { color: var(--bh-bad); }
.bh-flat { color: var(--bh-fg-muted); }
.bh-tile.is-bad { border-color: var(--bh-bad); }

/* comparison bar */
.bh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bh-gap-sm) var(--bh-gap-md); padding: .5rem .75rem; border: 1px solid var(--bh-line); border-radius: var(--bh-radius); background: var(--bh-panel); margin-bottom: var(--bh-gap-md); }
.bh-bar-g { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bh-bar-l { font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); }
.bh-btn { border: 1px solid var(--bh-line); background: var(--bh-bg); border-radius: var(--bh-radius); padding: .3rem .7rem; font-size: var(--bh-fs-caption); }
.bh-btn:hover:not(:disabled) { background: var(--bh-soft); }
.bh-btn:disabled { opacity: .45; cursor: default; }
.bh-btn.primary { background: var(--bh-fg); color: var(--bh-bg); border-color: var(--bh-fg); }
.bh-btn.primary:hover:not(:disabled) { background: var(--bh-fg); opacity: .88; }
.bh-spacer { flex: 1 1 auto; }

/* layout */
.bh-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bh-gap-md); align-items: start; }
@container bh (min-width: 900px) {
  .bh-main { grid-template-columns: 21.5rem minmax(0, 1fr); }
  .bh-controls { position: sticky; top: var(--bh-kpi-h, 7rem); max-height: calc(100vh - var(--bh-kpi-h, 7rem) - .5rem); overflow-y: auto; padding-right: .25rem; scrollbar-width: thin; }
}
.bh-controls { display: flex; flex-direction: column; gap: var(--bh-gap-sm); min-width: 0; }
.bh-results { min-width: 0; }

/* cards */
.bh-card { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: var(--bh-pad-md) var(--bh-pad-lg); min-width: 0; }
.bh-card > h2, .bh-card-h { margin: 0 0 .15rem; font-size: var(--bh-fs-heading); font-weight: var(--bh-fw-medium); }
.bh-note { margin: 0 0 .6rem; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); line-height: 1.4; }
.bh-sub { margin: .8rem 0 .3rem; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.bh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--bh-gap-md); }
.bh-grid + .bh-grid, .bh-card + .bh-card { margin-top: 0; }

/* segmented */
.bh-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bh-line); border-radius: var(--bh-radius); overflow: hidden; background: var(--bh-bg); }
.bh-seg button { border: 0; background: transparent; padding: .3rem .65rem; font-size: var(--bh-fs-caption); border-right: 1px solid var(--bh-line); }
.bh-seg button:last-child { border-right: 0; }
.bh-seg button[aria-checked=true], .bh-seg button[aria-selected=true] { background: var(--bh-fg); color: var(--bh-bg); }
.bh-seg.full { display: flex; }
.bh-seg.full button { flex: 1 1 0; }

/* switch */
.bh-sw { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 99px; border: 1px solid var(--bh-line); background: var(--bh-track); padding: 0; transition: background var(--bh-dur-slow); }
.bh-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 6px); height: calc(1.2rem - 6px); border-radius: 50%; background: var(--bh-bg); box-shadow: 0 0 0 1px var(--bh-line); transition: transform var(--bh-dur-slow) var(--bh-ease-out); }
.bh-sw[aria-checked=true] { background: var(--bh-accent); border-color: var(--bh-accent); }
.bh-sw[aria-checked=true]::after { transform: translateX(.9rem); }
.bh-swrow { display: flex; align-items: flex-start; gap: .6rem; padding: .35rem 0; }
.bh-swrow label { flex: 1 1 auto; cursor: pointer; line-height: 1.3; }
.bh-swrow small { display: block; color: var(--bh-fg-muted); font-size: var(--bh-fs-caption); line-height: 1.35; margin-top: .1rem; }

/* sliders */
.bh-lev { padding: .45rem 0 .35rem; border-top: 1px solid var(--bh-line); }
.bh-lev:first-of-type { border-top: 0; }
.bh-lev-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bh-lev-top label { font-size: var(--bh-fs-body); }
.bh-lev-top output { font-weight: var(--bh-fw-medium); white-space: nowrap; }
.bh-lev-top output.moved { color: var(--bh-accent); }
.bh-lev-sub { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); min-height: 1.1em; }
.bh-reset { border: 0; background: none; padding: 0; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); text-decoration: underline; }
.bh-range { position: relative; height: 1.5rem; }
.bh-range input[type=range] { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; }
.bh-range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--bh-track) var(--lo, 0%), var(--bh-fill, var(--bh-accent)) var(--lo, 0%) var(--hi, 0%), var(--bh-track) var(--hi, 0%)); }
.bh-range input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--bh-track) var(--lo, 0%), var(--bh-fill, var(--bh-accent)) var(--lo, 0%) var(--hi, 0%), var(--bh-track) var(--hi, 0%)); }
.bh-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--bh-bg); border: 2px solid var(--bh-accent); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bh-range input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bh-bg); border: 2px solid var(--bh-accent); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bh-range input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.bh-tick { position: absolute; top: 50%; width: 2px; height: 12px; margin-left: -1px; transform: translateY(-50%); background: var(--bh-fg-muted); opacity: .75; pointer-events: none; border-radius: 1px; }
.bh-tick.preset { background: var(--bh-warn); height: 14px; opacity: 1; }
.bh-range.dual input[type=range] { pointer-events: none; }
.bh-range.dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; }
.bh-range.dual input[type=range]::-moz-range-thumb { pointer-events: auto; }
.bh-range.dual input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.bh-range.dual input[type=range]::-moz-range-track { background: transparent; }
.bh-dualtrack { position: absolute; left: 9px; right: 9px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(to right, var(--bh-track) var(--lo, 0%), var(--bh-accent) var(--lo, 0%) var(--hi, 100%), var(--bh-track) var(--hi, 100%)); pointer-events: none; }
.bh-scale { display: flex; justify-content: space-between; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); padding: 0 2px; margin-top: -.15rem; }

/* items (projects / facilities) */
.bh-item { border: 1px solid var(--bh-line); border-radius: var(--bh-radius); margin-top: .45rem; background: var(--bh-bg); }
.bh-item > summary { list-style: none; display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; cursor: pointer; }
.bh-item > summary::-webkit-details-marker { display: none; }
.bh-item-t { font-weight: var(--bh-fw-medium); white-space: nowrap; }
.bh-item-s { color: var(--bh-fg-muted); font-size: var(--bh-fs-caption); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-item-b { padding: .1rem .75rem .6rem; border-top: 1px solid var(--bh-line); }
.bh-item.off .bh-item-b { opacity: .55; }
.bh-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .7rem; margin-top: .5rem; }
.bh-field { display: flex; flex-direction: column; gap: .15rem; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); min-width: 0; }
.bh-field input { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: .28rem .35rem; font-size: var(--bh-fs-body); color: var(--bh-fg); width: 100%; }
.bh-field select { background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: .28rem .35rem; font-size: var(--bh-fs-body); color: var(--bh-fg); width: 100%; }
.bh-field.wide { grid-column: 1 / -1; }
.bh-add { margin-top: .5rem; width: 100%; border-style: dashed; }

/* tabs */
.bh-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--bh-line); margin-bottom: var(--bh-gap-md); }
.bh-tabs button { border: 0; background: none; padding: .5rem .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--bh-fg-muted); }
.bh-tabs button[aria-selected=true] { color: var(--bh-fg); border-bottom-color: var(--bh-accent); font-weight: var(--bh-fw-medium); }
.bh-panel > .bh-grid, .bh-panel > .bh-card { margin-bottom: var(--bh-gap-md); }

/* charts */
.bh-chart { position: relative; min-height: 14rem; }
.bh-svg { display: block; overflow: visible; }
.bh-svg text { font-family: var(--bh-font-sans); font-size: var(--bh-fs-caption); fill: var(--bh-fg-muted); }
.bh-svg .bh-strong { fill: var(--bh-fg); }
.bh-svg .bh-crit { fill: var(--bh-chart-critical); }
.bh-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .4rem; font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); }
.bh-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.bh-legend i.line { height: 2px; vertical-align: middle; width: .9rem; border-radius: 0; }
.bh-tip { position: absolute; z-index: 4; pointer-events: none; background: var(--bh-popover); border: 1px solid var(--bh-border); border-radius: var(--bh-radius); box-shadow: var(--bh-popover-shadow); padding: var(--bh-pad-xs) var(--bh-pad-sm); font-size: var(--bh-fs-caption); line-height: 1.45; min-width: 9rem; }
.bh-tip b { font-weight: var(--bh-fw-medium); }
.bh-tip .t0 { color: var(--bh-fg-muted); display: block; margin-bottom: .1rem; }
.bh-tip .r { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.bh-tip .r span { display: inline-flex; align-items: center; gap: .35rem; }
.bh-tip .r i { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }

/* tables */
.bh-tablewrap { overflow-x: auto; }
.bh-table { width: 100%; border-collapse: collapse; font-size: var(--bh-fs-caption); }
.bh-table th, .bh-table td { padding: .32rem .5rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--bh-line); }
.bh-table th:first-child, .bh-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--bh-panel); }
.bh-table thead th { color: var(--bh-fg-muted); font-weight: var(--bh-fw-medium); }
.bh-table tr.tot td { font-weight: var(--bh-fw-medium); border-top: 1px solid var(--bh-fg-muted); }
.bh-table td.fc, .bh-table th.fc { background: var(--bh-soft); }
.bh-table td.sel, .bh-table th.sel { box-shadow: inset 0 -2px 0 var(--bh-accent); }
.bh-table td.bad { color: var(--bh-bad); font-weight: var(--bh-fw-medium); }
.bh-table td.good { color: var(--bh-ok); }
.bh-table td.thr { color: var(--bh-fg-muted); }

/* goal seek */
.bh-goal { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem .7rem; align-items: end; }
.bh-goal input[type=number] { width: 100%; background: var(--bh-panel); border: 1px solid var(--bh-line); border-radius: var(--bh-radius); padding: .28rem .35rem; }
.bh-goal-res { margin-top: .7rem; padding: .5rem .7rem; border-radius: var(--bh-radius); background: var(--bh-soft); line-height: 1.45; min-height: 2.4rem; }
.bh-foot { margin-top: var(--bh-gap-md); font-size: var(--bh-fs-caption); color: var(--bh-fg-muted); line-height: 1.5; }

@container bh (max-width: 520px) {
  .bh-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bh * { transition: none !important; } }