/* =====================================================================
   board-gameconfig.css — the board's 🥊 Konfiguracja gry (js/board-gameconfig.js). The board's colour names and unit
   (board.css: .bub-sec scope, --rbu). The rows are laid out by the form's own width (container queries), not the
   window's: the same with the side menu and without. No sideways scroll on any screen (the site's rule).
   ===================================================================== */
.bgc { min-width: 0; }
.bgc *, .bgc-dlg * { box-sizing: border-box; }
.bgc.busy .bgc-ed, .bgc.busy .bgc-hist { opacity: .55; pointer-events: none; transition: opacity .15s; }
.bgc-top { margin-bottom: calc(10 * var(--rbu)); }
.bgc-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-bottom: calc(12 * var(--rbu)); min-width: 0; }
.bgc-lbl { font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.bgc-x { background: none; border: 0; color: var(--text-secondary); cursor: pointer; min-width: calc(34 * var(--rbu)); min-height: calc(34 * var(--rbu)); border-radius: var(--radius-sm); font-size: calc(14 * var(--rbu)); flex: none; }
.bgc-x:hover { color: var(--text-primary); background: var(--bg-elevated); }
.bgc-alert { display: flex; align-items: center; gap: calc(10 * var(--rbu)); margin-bottom: calc(12 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(8 * var(--rbu)) calc(8 * var(--rbu)) calc(12 * var(--rbu));
    border-radius: var(--radius-sm); background: var(--accent-red-dim); border: 1px solid rgba(255, 56, 56, .45); color: var(--text-primary); font-size: calc(13 * var(--rbu)); }
.bgc-alert > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ── the head: channel, what the game has, the address it reads ── */
.bgc-head { padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); }
.bgc-head-row { display: flex; align-items: center; gap: calc(10 * var(--rbu)); flex-wrap: wrap; }
.bgc-chan { display: flex; align-items: center; gap: calc(8 * var(--rbu)); min-width: 0; }
.bgc-chan .rb-sel { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: calc(14 * var(--rbu)); min-width: calc(100 * var(--rbu)); min-height: calc(36 * var(--rbu)); }
.bgc-stats { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); flex: 1 1 calc(300 * var(--rbu)); min-width: 0; }
.bgc-stat { display: grid; grid-template-columns: auto auto; grid-template-areas: "l v" "s s"; align-items: baseline; column-gap: calc(8 * var(--rbu)); min-width: 0;
    padding: calc(5 * var(--rbu)) calc(11 * var(--rbu)); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-deep); color: var(--text-secondary);
    font: inherit; text-align: left; }
button.bgc-stat { cursor: pointer; }
button.bgc-stat:hover { border-color: var(--border-hover); }
.bgc-stat span { grid-area: l; font-size: calc(11 * var(--rbu)); font-weight: 700; }
.bgc-stat b { grid-area: v; font-family: 'JetBrains Mono', monospace; font-size: calc(17 * var(--rbu)); color: var(--text-primary); line-height: 1.15; }
.bgc-stat small { grid-area: s; font-size: calc(10.5 * var(--rbu)); color: var(--text-muted); white-space: nowrap; }
.bgc-stat.ok { border-color: rgba(0, 210, 106, .45); background: var(--accent-green-dim); }
.bgc-stat.ok b { color: var(--accent-green); }
.bgc-stat.bad b { color: var(--accent-red); }
.bgc-stat.warn { border-color: var(--accent-gold); background: var(--accent-gold-dim); }
.bgc-stat.warn b { color: var(--accent-gold); font-family: inherit; font-size: calc(14 * var(--rbu)); }
.bgc-icon { margin-left: auto; font-size: calc(15 * var(--rbu)); min-width: calc(36 * var(--rbu)); min-height: calc(36 * var(--rbu)); }
.bgc-pub { display: flex; align-items: center; gap: calc(8 * var(--rbu)); margin-top: calc(10 * var(--rbu)); padding-top: calc(10 * var(--rbu)); border-top: 1px solid var(--border); min-width: 0; }
.bgc-url { flex: 1 1 auto; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: calc(11.5 * var(--rbu)); color: var(--text-secondary); background: var(--bg-deepest);
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: calc(6 * var(--rbu)) calc(9 * var(--rbu)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── no channel yet ── */
.bgc-empty { display: grid; justify-items: center; gap: calc(8 * var(--rbu)); padding: calc(36 * var(--rbu)) calc(16 * var(--rbu)); text-align: center; }
.bgc-empty-ico { font-size: calc(38 * var(--rbu)); }
.bgc-empty b { font-size: calc(18 * var(--rbu)); color: var(--text-primary); }
.bgc-empty p { margin: 0 0 calc(6 * var(--rbu)); color: var(--text-secondary); font-size: calc(13 * var(--rbu)); max-width: calc(420 * var(--rbu)); }

/* ── the groups as tabs ── */
.bgc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(4 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(8 * var(--rbu)) 0; border-bottom: 1px solid var(--border); }
.bgc-tab { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(6 * var(--rbu)); min-width: 0; min-height: calc(42 * var(--rbu));
    padding: calc(7 * var(--rbu)) calc(8 * var(--rbu)) calc(10 * var(--rbu)); background: none; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer;
    font: inherit; font-size: calc(13 * var(--rbu)); font-weight: 700; color: var(--text-secondary); }
.bgc-tab:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.bgc-tab::after { content: ''; position: absolute; left: calc(10 * var(--rbu)); right: calc(10 * var(--rbu)); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-gold); transform: scaleX(0); transition: transform .2s; }
.bgc-tab.on { color: var(--text-primary); }
.bgc-tab.on::after { transform: scaleX(1); }
.bgc-tab.is-empty { opacity: .45; }
.bgc-tab-t { text-align: center; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.bgc-tab-n { font-family: 'JetBrains Mono', monospace; font-size: calc(11 * var(--rbu)); font-weight: 600; color: var(--text-muted); }
.bgc-badge { background: var(--accent-cyan); color: #062a30; font-size: calc(10.5 * var(--rbu)); font-weight: 800; border-radius: 999px; padding: 0 calc(7 * var(--rbu)); min-width: calc(18 * var(--rbu)); text-align: center; line-height: 1.5; }
.bgc-badge.err { background: var(--accent-red); color: #fff; }

/* ── search + changed only ── */
.bgc-tools { display: flex; align-items: center; gap: calc(10 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); flex-wrap: wrap; }
.bgc-search { position: relative; flex: 1 1 calc(220 * var(--rbu)); min-width: 0; display: block; }
.bgc-search-ico { position: absolute; left: calc(11 * var(--rbu)); top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: calc(15 * var(--rbu)); pointer-events: none; }
.bgc-search .rb-in { width: 100%; min-height: calc(36 * var(--rbu)); padding-left: calc(32 * var(--rbu)); }
.bgc-only { display: inline-flex; align-items: center; gap: calc(8 * var(--rbu)); min-height: calc(36 * var(--rbu)); padding: 0 calc(4 * var(--rbu)); background: none; border: 0; cursor: pointer;
    font: inherit; font-size: calc(12.5 * var(--rbu)); font-weight: 600; color: var(--text-secondary); }
.bgc-only i { position: relative; width: calc(32 * var(--rbu)); height: calc(18 * var(--rbu)); border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); transition: background .15s; flex: none; }
.bgc-only i::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(12 * var(--rbu)); height: calc(12 * var(--rbu)); border-radius: 50%; background: var(--text-secondary); transition: transform .15s; }
.bgc-only.on { color: var(--text-primary); }
.bgc-only.on i { background: var(--accent-cyan); border-color: var(--accent-cyan); }
.bgc-only.on i::after { transform: translateX(calc(14 * var(--rbu))); background: #062a30; }

/* ── the errors' list ── */
.bgc-sum { margin: 0 calc(12 * var(--rbu)) calc(10 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(12 * var(--rbu)); border-radius: var(--radius-sm); background: var(--accent-red-dim); border: 1px solid rgba(255, 56, 56, .5); }
.bgc-sum b { display: block; font-size: calc(12.5 * var(--rbu)); color: var(--accent-red); margin-bottom: calc(2 * var(--rbu)); }
.bgc-sum ul { list-style: none; margin: 0; padding: 0; }
.bgc-sum li { font-size: calc(12 * var(--rbu)); }
.bgc-sum button { background: none; border: 0; padding: calc(4 * var(--rbu)) 0; min-height: calc(26 * var(--rbu)); font: inherit; color: var(--text-primary); cursor: pointer; text-align: left;
    text-decoration: underline dotted rgba(255, 255, 255, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.bgc-sum button:hover { color: var(--accent-red); }

/* ── the parameters ── */
.bgc-form { container-type: inline-size; container-name: bgcform; padding: 0 0 calc(6 * var(--rbu)); min-width: 0; }
.bgc-gdesc { padding: 0 calc(14 * var(--rbu)) calc(6 * var(--rbu)); font-size: calc(12 * var(--rbu)); color: var(--text-secondary); line-height: 1.45; }
.bgc-gtitle { margin: calc(10 * var(--rbu)) calc(14 * var(--rbu)) 0; padding: calc(6 * var(--rbu)) 0 2px; font-size: calc(13 * var(--rbu)); font-weight: 800; color: var(--accent-gold); scroll-margin-top: calc(var(--nav-h, 64px) + 12px); }
.bgc-sub { margin: calc(12 * var(--rbu)) calc(14 * var(--rbu)) 2px; padding-bottom: calc(5 * var(--rbu)); border-bottom: 1px solid var(--border);
    font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
/* a row, narrow: name + input / range, default, was / description / error */
.bgc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name input" "meta meta" "desc desc" "err err";
    column-gap: calc(12 * var(--rbu)); row-gap: calc(3 * var(--rbu)); align-items: center; padding: calc(8 * var(--rbu)) calc(14 * var(--rbu)) calc(8 * var(--rbu)) calc(11 * var(--rbu));
    border-left: 3px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, .05); scroll-margin: calc(var(--nav-h, 64px) + 20px) 0 calc(140 * var(--rbu)); }
.bgc-row:hover { background: rgba(255, 255, 255, .015); }
.bgc-row.is-changed { border-left-color: var(--accent-cyan); background: rgba(56, 182, 255, .05); }
.bgc-row.is-err { border-left-color: var(--accent-red); background: rgba(255, 56, 56, .06); }
.bgc-row.is-flash { animation: bgcFlash 1.2s ease; }
@keyframes bgcFlash { 0%, 40% { box-shadow: inset 0 0 0 2px var(--accent-gold); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .bgc-row.is-flash { animation: none; } }
.bgc-name { grid-area: name; min-width: 0; display: flex; align-items: center; gap: calc(6 * var(--rbu)); flex-wrap: wrap; cursor: text; }
.bgc-key { font-family: 'JetBrains Mono', monospace; font-size: calc(13 * var(--rbu)); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; }
.bgc-int { font-size: calc(10 * var(--rbu)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-purple); border: 1px solid rgba(157, 107, 255, .5); border-radius: 4px; padding: 0 4px; line-height: 1.4; }
.bgc-inwrap { grid-area: input; display: flex; align-items: center; gap: calc(6 * var(--rbu)); justify-self: end; }
.bgc-in { width: calc(110 * var(--rbu)); min-height: calc(38 * var(--rbu)); padding: calc(7 * var(--rbu)) calc(9 * var(--rbu)); font-family: 'JetBrains Mono', monospace; font-size: calc(14 * var(--rbu)); font-weight: 600;
    text-align: right; color: var(--text-primary); background: var(--bg-deepest); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bgc-in:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-dim); }
.bgc-row.is-changed .bgc-in { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.bgc-row.is-err .bgc-in { border-color: var(--accent-red); color: var(--accent-red); }
.bgc-unit { font-size: calc(11 * var(--rbu)); color: var(--text-secondary); min-width: calc(30 * var(--rbu)); max-width: calc(60 * var(--rbu)); line-height: 1.2; overflow-wrap: anywhere; }
.bgc-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(2 * var(--rbu)) calc(10 * var(--rbu)); min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: calc(11 * var(--rbu)); color: var(--text-muted); }
.bgc-range { white-space: nowrap; }
.bgc-def, .bgc-was { background: none; border: 0; padding: calc(3 * var(--rbu)) 0; min-height: calc(26 * var(--rbu)); font: inherit; cursor: pointer; white-space: nowrap; }
.bgc-def { color: var(--text-secondary); }
.bgc-def:hover { color: var(--text-primary); }
.bgc-def.same { cursor: default; color: var(--text-muted); min-height: 0; font-family: var(--f-body, inherit); font-size: calc(10.5 * var(--rbu)); }
.bgc-pubv { color: var(--accent-gold); white-space: nowrap; }
.bgc-was { color: var(--accent-cyan); }
.bgc-desc { grid-area: desc; min-width: 0; text-align: left; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-size: calc(11.5 * var(--rbu)); line-height: 1.45; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bgc-desc:hover { color: var(--text-primary); }
.bgc-row.is-open .bgc-desc { display: block; -webkit-line-clamp: unset; }
.bgc-reader { display: none; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: calc(10.5 * var(--rbu)); color: var(--text-muted); }
.bgc-row.is-open .bgc-reader { display: block; }
.bgc-err { grid-area: err; font-size: calc(12 * var(--rbu)); font-weight: 600; color: var(--accent-red); min-width: 0; overflow-wrap: anywhere; }
.bgc-err:empty { display: none; }
/* wide (the form ≥ 640 px): name + description | input + unit | range, default, was */
@container bgcform (min-width: 640px) {
    .bgc-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 240px); grid-template-areas: "name input meta" "desc desc desc" "err err err"; column-gap: calc(16 * var(--rbu)); row-gap: 2px; }
    .bgc-desc { -webkit-line-clamp: 1; }
    .bgc-inwrap { justify-self: start; }
    .bgc-unit { width: calc(60 * var(--rbu)); }
}
@container bgcform (min-width: 1000px) {
    .bgc-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 340px); grid-template-areas: "name input meta" "desc input meta" "err err err"; }
}

/* ── the action bar: sticks to the bottom of the screen while the form scrolls (above the phones' tab bar) ── */
.bgc-ed { min-width: 0; }
.bgc-bar { position: sticky; bottom: var(--tab-space, 0px); z-index: 6; display: flex; align-items: center; gap: calc(8 * var(--rbu)) calc(10 * var(--rbu)); flex-wrap: wrap;
    margin: calc(-12 * var(--rbu)) 0 calc(12 * var(--rbu)); padding: calc(9 * var(--rbu)) calc(12 * var(--rbu)); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
    background: rgba(13, 14, 20, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .3); }
.bgc-bar.is-dirty { border-color: rgba(56, 182, 255, .55); }
.bgc-bar-stat { display: flex; align-items: center; gap: calc(8 * var(--rbu)); font-size: calc(13 * var(--rbu)); white-space: nowrap; color: var(--text-secondary); }
.bgc-bar-stat > b { font-family: 'JetBrains Mono', monospace; color: var(--accent-cyan); font-size: calc(16 * var(--rbu)); }
.bgc-bar-err { background: var(--accent-red-dim); border: 1px solid var(--accent-red); color: var(--accent-red); border-radius: 999px; padding: calc(3 * var(--rbu)) calc(10 * var(--rbu));
    min-height: calc(28 * var(--rbu)); font: inherit; font-size: calc(11.5 * var(--rbu)); font-weight: 700; cursor: pointer; }
.bgc-note { flex: 1 1 calc(160 * var(--rbu)); min-width: 0; min-height: calc(34 * var(--rbu)); }
.bgc-bar-btns { display: flex; gap: calc(6 * var(--rbu)); flex-wrap: wrap; margin-left: auto; }
.bgc-bar-btns .rb-x { min-height: calc(34 * var(--rbu)); }
.rb-x.bgc-save:not([disabled]) { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ── the history ── */
.bgc-hist { container-type: inline-size; container-name: bgchist; scroll-margin-top: calc(var(--nav-h, 64px) + 12px); }
.bgc-hist-head { display: flex; align-items: center; gap: calc(8 * var(--rbu)) calc(14 * var(--rbu)); flex-wrap: wrap; padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-bottom: 1px solid var(--border); }
.bgc-hist-head h3 { margin: 0 auto 0 0; font-size: calc(14 * var(--rbu)); font-weight: 800; color: var(--text-primary); }
.bgc-hist-head h3 small { color: var(--text-muted); font-weight: 600; margin-left: calc(4 * var(--rbu)); }
.bgc-cmp { display: flex; align-items: center; gap: calc(6 * var(--rbu)); flex-wrap: wrap; color: var(--text-muted); }
.bgc-cmp .rb-sel { font-family: 'JetBrains Mono', monospace; min-width: calc(70 * var(--rbu)); min-height: calc(34 * var(--rbu)); }
.bgc-hrow { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "v main" "act act"; gap: calc(6 * var(--rbu)) calc(12 * var(--rbu));
    padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)) calc(10 * var(--rbu)) calc(11 * var(--rbu)); border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.bgc-hrow:last-child { border-bottom: 0; }
.bgc-hrow.is-pub { border-left-color: var(--accent-green); background: rgba(0, 210, 106, .04); }
.bgc-hv { grid-area: v; font-family: 'JetBrains Mono', monospace; font-size: calc(15 * var(--rbu)); font-weight: 800; color: var(--text-primary); min-width: calc(36 * var(--rbu)); }
.bgc-hmain { grid-area: main; min-width: 0; }
.bgc-hnote { font-size: calc(13 * var(--rbu)); line-height: 1.4; color: var(--text-primary); overflow-wrap: anywhere; }
.bgc-hmeta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--rbu)) calc(10 * var(--rbu)); margin-top: calc(4 * var(--rbu)); font-size: calc(11.5 * var(--rbu)); color: var(--text-secondary); }
.bgc-hmeta code { font-family: 'JetBrains Mono', monospace; font-size: calc(11 * var(--rbu)); color: var(--text-muted); }
.bgc-hmeta .bm-chip { margin: 0; }
.bgc-hwho { overflow-wrap: anywhere; }
.bgc-hact { grid-area: act; display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); }
.rb-x.bgc-rb { color: var(--accent-orange); }
.bgc-more { margin: calc(8 * var(--rbu)) calc(14 * var(--rbu)) calc(12 * var(--rbu)); }
@container bgchist (min-width: 600px) {
    .bgc-hrow { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "v main act"; align-items: center; }
    .bgc-hact { justify-content: flex-end; }
}

/* ── a dialog (the board's modal, wider) ── */
.bgc-dlg { width: min(100%, calc(520 * var(--rbu))); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.bgc-dlg.wide { width: min(100%, calc(760 * var(--rbu))); }
.bgc-dlg.danger { border-color: rgba(255, 107, 53, .6); }
.bgc-dlg-head { display: flex; align-items: center; gap: calc(10 * var(--rbu)); padding: calc(12 * var(--rbu)) calc(10 * var(--rbu)) calc(10 * var(--rbu)) calc(18 * var(--rbu)); border-bottom: 1px solid var(--border); }
.bgc-dlg-head h3 { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bgc-dlg-body { padding: calc(14 * var(--rbu)) calc(18 * var(--rbu)); overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; display: grid; gap: calc(10 * var(--rbu)); align-content: start; font-size: calc(13 * var(--rbu)); }
.bgc-dlg-body p { margin: 0; }
.bgc-dlg-body .bgc-lead { color: var(--text-primary); font-weight: 600; }
.bgc-warn { color: var(--accent-gold) !important; }
.bgc-hint { color: var(--text-muted) !important; font-size: calc(12 * var(--rbu)) !important; }
.bgc-dlg-body .bub-f input, .bgc-dlg-body .bub-f .rb-sel { width: 100%; min-height: calc(38 * var(--rbu)); }
.bgc-dlg-body [data-bgc-nc="name"] { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.bgc-dlg-err { color: var(--accent-red); font-size: calc(12.5 * var(--rbu)); font-weight: 600; padding: 0 calc(18 * var(--rbu)); }
.bgc-dlg-err:empty { display: none; }
.bgc-dlg .actions { padding: calc(10 * var(--rbu)) calc(18 * var(--rbu)) calc(12 * var(--rbu)); border-top: 1px solid var(--border); }
.bgc-dlg .actions .rb-x { min-height: calc(36 * var(--rbu)); }
.bgc-dlg-sum { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); }
.bgc-dlg-sum .bm-chip { margin: 0; font-size: calc(12 * var(--rbu)); padding: calc(2 * var(--rbu)) calc(10 * var(--rbu)); }
.bgc-dlg-note { color: var(--text-primary); overflow-wrap: anywhere; }
.bgc-dlg-cap { font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.bgc-seg { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); }
.bgc-seg .rb-x { font-family: 'JetBrains Mono', monospace; min-height: calc(32 * var(--rbu)); }
.bgc-seg .rb-x.on { background: var(--accent-gold); border-color: var(--accent-gold); color: #2a1f00; }
/* the diff: wraps (fixed columns), never wider than the dialog */
.bgc-diff { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(12.5 * var(--rbu)); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bgc-diff th { text-align: left; font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-card);
    padding: calc(7 * var(--rbu)) calc(9 * var(--rbu)); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.bgc-diff th:nth-child(1) { width: 50%; }
.bgc-diff td { padding: calc(7 * var(--rbu)) calc(9 * var(--rbu)); border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; color: var(--text-primary); }
.bgc-diff tr:last-child td { border-bottom: 0; }
.bgc-dk .bgc-key { display: block; font-size: calc(12.5 * var(--rbu)); }
.bgc-dk small, .bgc-dv small { display: block; font-size: calc(10.5 * var(--rbu)); color: var(--text-muted); margin-top: 1px; }
.bgc-dv { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text-secondary) !important; }
.bgc-dv.b { color: var(--accent-cyan) !important; }
.bgc-dv small { display: inline; font-family: var(--f-body, inherit); font-weight: 400; }
.bgc-diff-n { text-align: right; font-size: calc(11 * var(--rbu)); color: var(--text-muted); }

/* ── phones ── */
@media (max-width: 640px) {
    .bgc-head { padding: calc(10 * var(--rbu)); }
    .bgc-stats { flex-basis: 100%; order: 3; }
    .bgc-stat { flex: 1 1 calc(90 * var(--rbu)); }
    .bgc-tabs { padding: calc(6 * var(--rbu)) calc(4 * var(--rbu)) 0; gap: 2px; }
    .bgc-tab { font-size: calc(12 * var(--rbu)); padding: calc(7 * var(--rbu)) calc(3 * var(--rbu)) calc(9 * var(--rbu)); gap: calc(4 * var(--rbu)); }
    .bgc-tools { padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); }
    .bgc-row { padding-left: calc(8 * var(--rbu)); padding-right: calc(10 * var(--rbu)); }
    .bgc-sub, .bgc-gtitle { margin-left: calc(10 * var(--rbu)); margin-right: calc(10 * var(--rbu)); }
    .bgc-gdesc { padding-left: calc(10 * var(--rbu)); padding-right: calc(10 * var(--rbu)); }
    .bgc-in { width: calc(96 * var(--rbu)); }
    .bgc-bar:not(.is-dirty) { display: none; }
    .bgc-bar { margin-top: 0; border-radius: var(--radius); }
    .bgc-note { flex: 1 1 100%; order: 3; }
    .bgc-bar-btns { flex: 1 1 100%; order: 4; display: grid; grid-template-columns: 1fr 1fr 1.4fr; margin-left: 0; }
    .bgc-bar-btns .rb-x { padding-left: calc(4 * var(--rbu)); padding-right: calc(4 * var(--rbu)); text-align: center; line-height: 1.2; }
    .bgc-hrow, .bgc-hist-head { padding-left: calc(10 * var(--rbu)); padding-right: calc(10 * var(--rbu)); }
    .bgc-dlg-head { padding-left: calc(14 * var(--rbu)); }
    .bgc-dlg-body, .bgc-dlg .actions { padding-left: calc(14 * var(--rbu)); padding-right: calc(14 * var(--rbu)); }
    .bgc-dlg .actions .rb-x { flex: 1 1 auto; }
    .bgc-diff th:nth-child(1) { width: 44%; }
    .bgc-diff th, .bgc-diff td { padding: calc(6 * var(--rbu)) calc(7 * var(--rbu)); }
}
@media (min-width: 641px) { .bgc-form-card { border-radius: var(--radius) var(--radius) 0 0; } }
/* fingers: every control of the editor at least 26 px tall (WCAG 2.5.8 asks 24) */
@media (pointer: coarse) {
    .bgc-desc { min-height: 26px; }
    .bgc-def:not(.same), .bgc-was, .bgc-sum button, .bgc-bar-err { min-height: 28px; }
}
/* the board gives buttons min-width on touch screens, which lets a flex row squeeze them: never below their text */
.bgc-head-row > .rb-x, .bgc-pub > .rb-x, .bgc-cmp > .rb-x, .bgc-hact > .rb-x, .bgc .bgc-stat { flex: none; }
@media (max-width: 640px) { .bgc .bgc-stat { flex: 1 1 calc(90 * var(--rbu)); } }
@media (max-width: 640px) {
    .bgc .bgc-stat { flex: 1 1 calc(96 * var(--rbu)); grid-template-columns: minmax(0, 1fr) auto; padding-left: calc(8 * var(--rbu)); padding-right: calc(8 * var(--rbu)); }
    .bgc-stat span, .bgc-stat small { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
}
@media (max-width: 640px) {
    .bgc .bgc-stat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "v" "s"; row-gap: 1px; }
}
/* very wide forms (Damian's ultrawide): the input stays near its name, the range and the default follow it */
@container bgcform (min-width: 1300px) {
    .bgc-row { grid-template-columns: minmax(0, 680px) auto minmax(0, 1fr); }
}