/* burn.css -- the burn rate screen (burn.js): stacked bars and a line in SVG, tables, one column on a phone. Tokens from core.css. */

.bn-view { overflow: auto; padding: 12px 16px; }
.bn-host { display: flex; flex-direction: column; gap: 22px; max-width: 1000px; }
.bn-h2 { margin: 0 0 6px; font-size: calc(var(--ui-fs) * 16 / 13); font-weight: 600; color: var(--text-strong); }
.bn-h3 { margin: 12px 0 4px; font-size: calc(var(--ui-fs) * 11 / 13); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.bn-bar2 { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 2px 0 8px; }
.bn-group { display: flex; align-items: center; gap: 4px; }
.bn-gl { color: var(--text-muted); margin-right: 4px; font-size: calc(var(--ui-fs) * 12 / 13); }
.bn-btn { padding: 4px 10px; min-height: 28px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.bn-btn.on { border-color: var(--accent); font-weight: 700; }
.bn-btn:focus-visible, .bn-tid:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }
.bn-pace { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 8px; }
.bn-pc { min-width: 200px; }
.bn-pl { color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); }
.bn-pv { color: var(--text-strong); font-weight: 600; }
.bn-note { color: var(--text-muted); font-size: calc(var(--ui-fs) * 12 / 13); margin: 4px 0; flex-basis: 100%; }
.bn-none { color: var(--text-muted); }
.bn-chart { overflow-x: auto; max-width: 100%; }
.bn-svg { display: block; max-width: none; height: auto; }
.bn-grid { stroke: var(--rule); stroke-width: 1; }
.bn-ax { fill: var(--text-dim); font-size: 10px; }
.bn-seg { cursor: pointer; }
.bn-seg:hover { opacity: .8; }
.bn-hit { cursor: pointer; }
.bn-line { stroke-linejoin: round; }
.bn-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 0; }
.bn-key { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.bn-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.bn-turns { padding-top: 4px; }
.bn-turn { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.bn-tt { color: var(--text-dim); min-width: 8em; }
.bn-trole { color: var(--text-strong); min-width: 4em; }
.bn-tid { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; min-height: 24px; }
.bn-tm { flex: 1 1 12em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bn-tc { color: var(--text-dim); }
.bn-ts { padding: 0 6px; border-radius: 3px; border: 1px solid var(--rule); }
.bn-st-done { border-color: var(--accent); }
.bn-st-blocked, .bn-st-failed, .bn-st-limit { border-color: var(--danger); }
.bn-wrap { overflow-x: auto; margin-top: 8px; }
.bn-table { border-collapse: collapse; width: 100%; }
.bn-table th, .bn-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bn-table thead th { font-weight: 400; color: var(--text-dim); font-size: calc(var(--ui-fs) * 12 / 13); }
.bn-n { text-align: right; }
.bn-k { text-align: left; font-weight: 500; color: var(--text-strong); }
.bn-total th, .bn-total td { border-top: 2px solid var(--rule); font-weight: 600; }
@media (max-width: 640px) { .bn-view { padding: 8px; } .bn-pc { min-width: 100%; } .bn-tt { min-width: 100%; } }
.bn-few td { color: var(--text-muted); }
.bn-perfbody { overflow-x: auto; }