/* =====================================================================
   board.css — boxingunderdog.com/board/ (js/board.js): Damian's board and the testers' board.
   The board's rules came from the dashboard (DashboardWebsite/css/roadmap-board.css, 04.10.2026); its colour names are
   the site's colours here (the .bub-sec scope), so the rules read the same.
   ===================================================================== */
/* the board's unit: 1 px on a laptop, growing with the screen (1920: ~1.13, 2560: ~1.32, ultrawide 3427: 1.45), so the
   board fills a big monitor at a readable size instead of sitting small in the middle */
:root { --rbu: clamp(1px, calc(0.55px + 0.03vw), 1.45px); }
.bub-sec, #dash-drawer, .bub-modal-bd, #bub-toasts, .rb-ghost {
    --bg-deepest: var(--void); --bg-deep: var(--deep); --bg-card: var(--card); --bg-card-hover: var(--raised); --bg-elevated: #262a34;
    --border: rgba(255, 255, 255, .09); --border-hover: rgba(255, 255, 255, .2);
    --text-primary: var(--tx-hi); --text-secondary: var(--tx-mid); --text-muted: #8a8a99;
    --accent-red: var(--red); --accent-red-dim: rgba(255, 56, 56, .15); --accent-gold: var(--gold); --accent-gold-dim: rgba(233, 185, 73, .13);
    --accent-blue: #4d8dff; --accent-blue-dim: rgba(77, 141, 255, .14); --accent-green: var(--green); --accent-green-dim: rgba(0, 210, 106, .13);
    --accent-purple: var(--purple); --accent-purple-dim: rgba(157, 107, 255, .14); --accent-orange: var(--orange); --accent-orange-dim: rgba(255, 107, 53, .14);
    --accent-cyan: var(--cyan); --accent-cyan-dim: rgba(56, 182, 255, .13);
    --radius: calc(12 * var(--rbu)); --radius-sm: calc(8 * var(--rbu)); --radius-lg: calc(16 * var(--rbu));
}

.rb { display: grid; grid-template-columns: calc(230 * var(--rbu)) minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-deep); min-height: calc(640 * var(--rbu)); }
.rb-side { border-right: 1px solid var(--border); padding: calc(10 * var(--rbu)) calc(8 * var(--rbu)); display: flex; flex-direction: column; gap: 2px; background: var(--bg-deepest); }
.rb-nav { display: grid; grid-template-columns: calc(22 * var(--rbu)) minmax(0, 1fr) auto; align-items: center; gap: calc(8 * var(--rbu)); width: 100%; padding: calc(7 * var(--rbu)) calc(8 * var(--rbu)); border-radius: var(--radius-sm); color: var(--text-secondary); text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.rb-nav:hover { background: var(--bg-card); }
.rb-nav.on { background: var(--bg-elevated); color: var(--text-primary); }
.rb-nav .ic { text-align: center; }
.rb-nav .lb { min-width: 0; font-weight: 600; font-size: calc(13 * var(--rbu)); }
.rb-nav .lb small { display: block; font-weight: 500; font-size: calc(11 * var(--rbu)); color: var(--text-muted); }
.rb-nav .rt { font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); }
.rb-badge { background: var(--accent-red); color: #fff; border-radius: calc(999 * var(--rbu)); padding: 1px calc(7 * var(--rbu)); font-size: calc(11 * var(--rbu)); font-weight: 700; }
.rb-cat { margin: calc(12 * var(--rbu)) calc(8 * var(--rbu)) calc(4 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.rb-foot { margin-top: auto; padding: calc(12 * var(--rbu)) calc(8 * var(--rbu)) calc(4 * var(--rbu)); display: grid; gap: calc(6 * var(--rbu)); font-size: calc(12 * var(--rbu)); border-top: 1px solid var(--border); }
.rb-foot a { color: var(--accent-cyan); text-decoration: none; }
.rb-main { padding: calc(16 * var(--rbu)) calc(18 * var(--rbu)) calc(22 * var(--rbu)); min-width: 0; }

.rb-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: calc(10 * var(--rbu)) calc(20 * var(--rbu)); margin-bottom: calc(12 * var(--rbu)); }
.rb-h > div:first-child { min-width: 0; flex: 1 1 calc(340 * var(--rbu)); }
.rb-h h2 { margin: 0; font-size: calc(20 * var(--rbu)); font-weight: 800; color: var(--text-primary); letter-spacing: .2px; }
.rb-h h2 small { margin-left: calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); font-weight: 600; color: var(--text-secondary); }
.rb-h p { margin: calc(4 * var(--rbu)) 0 0; color: var(--text-secondary); font-size: calc(13 * var(--rbu)); max-width: calc(700 * var(--rbu)); line-height: 1.45; }
.rb-kick { font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-gold); }
.rb-vision { font-style: italic; }
.rb-goal { display: grid; text-align: right; font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); }
.rb-goal b { color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); }
.rb-pct { display: grid; gap: calc(4 * var(--rbu)); min-width: calc(160 * var(--rbu)); text-align: right; }
.rb-pct b { font-size: calc(30 * var(--rbu)); line-height: 1; font-weight: 800; color: var(--text-primary); }
.rb-pct span { font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-bar { display: block; height: calc(5 * var(--rbu)); border-radius: calc(3 * var(--rbu)); background: var(--bg-elevated); overflow: hidden; }
.rb-bar s { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, var(--accent-red), var(--accent-gold)); }
.rb-bar.ready s { background: var(--accent-green); }
.rb-x { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: var(--radius-sm); padding: calc(5 * var(--rbu)) calc(10 * var(--rbu)); font-family: inherit; font-size: calc(12 * var(--rbu)); font-weight: 600; cursor: pointer; }
.rb-x:hover { border-color: var(--border-hover); }
.rb-x.sug, .rb-x.primary { background: var(--accent-gold); border-color: var(--accent-gold); color: #2a1f00; font-weight: 800; }
.rb-x.danger { color: var(--accent-red); }
.rb-x[disabled] { opacity: .45; cursor: not-allowed; }
.rb-in, .rb-ta, .rb-sel { background: var(--bg-deepest); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-sm); padding: calc(7 * var(--rbu)) calc(9 * var(--rbu)); font-family: inherit; font-size: calc(13 * var(--rbu)); min-width: 0; }
.rb-ta { width: 100%; min-height: calc(70 * var(--rbu)); resize: vertical; line-height: 1.45; }
.rb-in:focus, .rb-ta:focus, .rb-sel:focus { outline: none; border-color: var(--accent-cyan); }

/* release track */
.rb-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6 * var(--rbu)); margin: calc(4 * var(--rbu)) 0 calc(6 * var(--rbu)); }
.rb-step { display: flex; align-items: center; gap: calc(8 * var(--rbu)); min-width: 0; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(10 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); color: var(--text-secondary); font: inherit; cursor: pointer; }
.rb-step:hover { border-color: var(--border-hover); }
.rb-step b { flex: none; width: calc(22 * var(--rbu)); height: calc(22 * var(--rbu)); border-radius: 50%; display: grid; place-items: center; font-size: calc(12 * var(--rbu)); background: var(--bg-elevated); color: var(--text-secondary); }
.rb-step span { display: grid; min-width: 0; font-weight: 700; font-size: calc(12.5 * var(--rbu)); }
.rb-step small { font-weight: 600; font-size: calc(11 * var(--rbu)); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-step.on { border-color: rgba(255, 194, 51, .6); background: var(--accent-gold-dim); color: var(--text-primary); }
.rb-step.on b { background: var(--accent-gold); color: #2a1f00; }
.rb-step.on small { color: var(--accent-gold); }
.rb-step.done { color: var(--accent-green); }
.rb-step.done b { background: var(--accent-green); color: #04241a; }
.rb-tip { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--rbu)) calc(12 * var(--rbu)); margin-bottom: calc(12 * var(--rbu)); font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-tip .rb-x { margin-left: auto; }

/* the board */
.rb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--rbu)); margin-bottom: calc(8 * var(--rbu)); }
.rb-tools .sp { flex: 1; }
.rb-legend { font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); }
.rb-sz { display: inline-grid; place-items: center; min-width: calc(20 * var(--rbu)); height: calc(16 * var(--rbu)); padding: 0 calc(3 * var(--rbu)); border-radius: calc(4 * var(--rbu)); background: var(--bg-elevated); color: var(--text-secondary); font: 700 calc(10 * var(--rbu)) 'JetBrains Mono', monospace; }
.rb-grid { display: grid; gap: calc(6 * var(--rbu)); }
.rb-gh, .rb-lane { display: grid; grid-template-columns: calc(230 * var(--rbu)) repeat(4, minmax(0, 1fr)); gap: calc(6 * var(--rbu)); }
.rb-gh span { padding: 0 calc(6 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rb-gh .c-doing { color: var(--accent-gold); }
.rb-gh .c-test { color: var(--accent-cyan); }
.rb-gh .c-done { color: var(--accent-green); }
.rb-lane { background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(10 * var(--rbu)); padding: calc(6 * var(--rbu)); }
.rb-lh { display: grid; grid-template-columns: calc(20 * var(--rbu)) minmax(0, 1fr); gap: calc(8 * var(--rbu)); align-items: start; padding: calc(4 * var(--rbu)); background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: calc(8 * var(--rbu)); }
.rb-lh:hover { background: var(--bg-card-hover); }
.rb-lh b { display: block; color: var(--text-primary); font-size: calc(13 * var(--rbu)); font-weight: 600; line-height: 1.3; }
.rb-lh small { display: block; color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.rb-mk { font-size: calc(14 * var(--rbu)); line-height: 1.3; text-align: center; }
.rb-mk.building, .rb-mk.testing { color: var(--accent-gold); }
.rb-mk.planned { color: var(--text-muted); }
.rb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)); margin: calc(4 * var(--rbu)) 0 calc(6 * var(--rbu)); }
.rb-chip { font-size: calc(10.5 * var(--rbu)); font-weight: 700; border-radius: calc(4 * var(--rbu)); padding: 0 calc(5 * var(--rbu)); line-height: calc(17 * var(--rbu)); }
.rb-chip.fix { background: var(--accent-red-dim); color: var(--accent-red); }
.rb-chip.sec, .rb-chip.idea { background: var(--accent-purple-dim); color: var(--accent-purple); }
.rb-chip.rep { background: var(--accent-blue-dim); color: var(--accent-blue); }
.rb-cnt { margin-left: auto; font-size: calc(11 * var(--rbu)); color: var(--text-secondary); }
.rb-col { display: grid; align-content: start; gap: calc(5 * var(--rbu)); min-width: 0; min-height: calc(38 * var(--rbu)); border-radius: calc(8 * var(--rbu)); padding: 2px; transition: background .12s; }
.rb-col.c-doing { background: rgba(255, 194, 51, .035); }
.rb-col.c-test { background: rgba(34, 211, 238, .04); }
.rb-col.drop { background: var(--accent-cyan-dim); outline: 1px dashed var(--accent-cyan); }
.rb-card { display: grid; gap: calc(5 * var(--rbu)); min-width: 0; text-align: left; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: calc(8 * var(--rbu)); padding: calc(7 * var(--rbu)) calc(8 * var(--rbu)); color: var(--text-primary); font-family: inherit; font-size: calc(12 * var(--rbu)); line-height: 1.3; cursor: grab; user-select: none; transition: border-color .12s, transform .12s, box-shadow .12s; }
.rb-card:hover { border-color: var(--border-hover); }
.rb-card.sel { border-color: var(--accent-gold); box-shadow: 0 0 0 1px var(--accent-gold) inset; }
.rb-card span { overflow-wrap: anywhere; }
.rb-card i { display: flex; align-items: center; gap: calc(4 * var(--rbu)); font-style: normal; font-size: calc(11 * var(--rbu)); }
.rb-card.slim { padding: calc(3 * var(--rbu)) calc(6 * var(--rbu)); background: transparent; border-color: transparent; color: var(--text-secondary); font-size: calc(11.5 * var(--rbu)); }
.rb-card.slim:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.rb-add-task { display: flex; gap: calc(4 * var(--rbu)); }
.rb-add-task .rb-in { flex: 1; padding: calc(5 * var(--rbu)) calc(7 * var(--rbu)); font-size: calc(12 * var(--rbu)); }
.rb-grp { display: block; width: 100%; margin: calc(8 * var(--rbu)) 0 2px; padding: calc(6 * var(--rbu)) calc(8 * var(--rbu)); border-radius: calc(8 * var(--rbu)); text-align: left; font-size: calc(12 * var(--rbu)); font-weight: 700; color: var(--text-secondary); background: var(--bg-card); border: 0; font-family: inherit; cursor: pointer; }
.rb-grp.static { cursor: default; }
.rb-empty { color: var(--text-muted); font-size: calc(12.5 * var(--rbu)); padding: calc(18 * var(--rbu)); text-align: center; border: 1px dashed var(--border); border-radius: calc(10 * var(--rbu)); }

/* Inbox */
.rb-ibl { display: grid; gap: calc(8 * var(--rbu)); }
.rb-ib { background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(12 * var(--rbu)); padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); }
.rb-ib.priv { border-color: rgba(164, 107, 255, .45); }
.rb-ibh { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--rbu)) calc(10 * var(--rbu)); }
.rb-ibh b { color: var(--text-primary); font-size: calc(14.5 * var(--rbu)); min-width: 0; }
.rb-k { font-size: calc(11 * var(--rbu)); font-weight: 800; border-radius: calc(5 * var(--rbu)); padding: 1px calc(7 * var(--rbu)); }
.rb-k.k-bug { background: var(--accent-red-dim); color: var(--accent-red); }
.rb-k.k-idea { background: var(--accent-purple-dim); color: var(--accent-purple); }
.rb-k.k-feedback { background: var(--accent-blue-dim); color: var(--accent-blue); }
.rb-k.k-question, .rb-k.k-priv { background: var(--bg-elevated); color: var(--text-secondary); }
.rb-n { margin-left: auto; font-weight: 800; color: var(--text-primary); font-size: calc(12.5 * var(--rbu)); }
.rb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(8 * var(--rbu)); margin: calc(6 * var(--rbu)) 0 0; font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-meta .late { color: var(--accent-red); font-weight: 700; }
.rb-ai { margin: calc(8 * var(--rbu)) 0 0; font-size: calc(13 * var(--rbu)); color: var(--text-primary); background: var(--accent-purple-dim); border: 1px solid rgba(164, 107, 255, .3); border-radius: calc(8 * var(--rbu)); padding: calc(7 * var(--rbu)) calc(10 * var(--rbu)); }
.rb-ai span { margin-right: calc(8 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 800; color: var(--accent-purple); }
.rb-acts { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); margin-top: calc(10 * var(--rbu)); }
.rb-acts .rb-sel { padding: calc(5 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(12 * var(--rbu)); }
.rb-q { margin-top: calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); }
.rb-q summary { cursor: pointer; font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-q blockquote { margin: calc(6 * var(--rbu)) 0 0; padding: calc(4 * var(--rbu)) calc(10 * var(--rbu)); border-left: 2px solid var(--border-hover); color: var(--text-primary); white-space: pre-wrap; }
.rb-q cite { display: block; font-style: normal; font-size: calc(11 * var(--rbu)); color: var(--text-muted); }
.rb-q a { color: var(--accent-cyan); }
.rb-ib.done { display: grid; grid-template-columns: calc(24 * var(--rbu)) minmax(0, 1fr) auto; gap: calc(10 * var(--rbu)); align-items: center; background: rgba(45, 212, 160, .05); border-color: rgba(45, 212, 160, .25); }
.rb-ib.done .ok { width: calc(22 * var(--rbu)); height: calc(22 * var(--rbu)); border-radius: 50%; display: grid; place-items: center; background: var(--accent-green); color: #04241a; font-weight: 800; font-size: calc(12 * var(--rbu)); }
.rb-ib.done b { color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); }
.rb-ib.done p { margin: 2px 0 0; font-size: calc(12 * var(--rbu)); color: var(--accent-green); }
.rb-zero { margin-bottom: calc(10 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: rgba(45, 212, 160, .06); border: 1px solid rgba(45, 212, 160, .25); color: var(--accent-green); font-weight: 700; }
.rb-sec-t { margin: calc(18 * var(--rbu)) 0 calc(8 * var(--rbu)); font-size: calc(11 * var(--rbu)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* drawer forms */
.rb-form { display: grid; gap: calc(6 * var(--rbu)); }
.rb-form label { margin-top: calc(6 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.rb-form small { font-size: calc(11.5 * var(--rbu)); color: var(--text-secondary); }
.rb-seg { display: flex; flex-wrap: wrap; gap: calc(4 * var(--rbu)); }
.rb-seg button { flex: 1 1 auto; border: 1px solid var(--border); border-radius: calc(7 * var(--rbu)); padding: calc(6 * var(--rbu)) calc(8 * var(--rbu)); font-family: inherit; font-size: calc(12 * var(--rbu)); font-weight: 700; color: var(--text-secondary); background: var(--bg-card); cursor: pointer; }
.rb-seg button.on { background: var(--text-primary); border-color: var(--text-primary); color: #111; }
.rb-seg button.c-doing.on { background: var(--accent-gold); border-color: var(--accent-gold); color: #2a1f00; }
.rb-seg button.c-test.on { background: var(--accent-cyan); border-color: var(--accent-cyan); color: #062a30; }
.rb-seg button.c-done.on { background: var(--accent-green); border-color: var(--accent-green); color: #04241a; }
.rb-tog { display: flex; align-items: center; gap: calc(10 * var(--rbu)); text-align: left; border: 1px solid var(--border); border-radius: calc(8 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); font-family: inherit; font-size: calc(12.5 * var(--rbu)); color: var(--text-primary); background: var(--bg-card); cursor: pointer; }
.rb-tog i { flex: none; position: relative; width: calc(34 * var(--rbu)); height: calc(20 * var(--rbu)); border-radius: calc(999 * var(--rbu)); background: var(--border-hover); }
.rb-tog i::after { content: ""; position: absolute; top: calc(3 * var(--rbu)); left: calc(3 * var(--rbu)); width: calc(14 * var(--rbu)); height: calc(14 * var(--rbu)); border-radius: 50%; background: #fff; transition: left .15s; }
.rb-tog.on i { background: var(--accent-green); }
.rb-tog.on i::after { left: calc(17 * var(--rbu)); }
.rb-live { margin-top: calc(10 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(8 * var(--rbu)); background: rgba(45, 212, 160, .06); border: 1px solid rgba(45, 212, 160, .25); font-size: calc(12 * var(--rbu)); color: var(--accent-green); }
.rb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--rbu)); }

/* ideas and releases */
.rb-ideas, .rb-rel { display: grid; gap: calc(6 * var(--rbu)); }
.rb-idea { display: grid; grid-template-columns: calc(64 * var(--rbu)) minmax(0, 1fr) auto auto; gap: calc(8 * var(--rbu)) calc(12 * var(--rbu)); align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(10 * var(--rbu)); padding: calc(9 * var(--rbu)) calc(12 * var(--rbu)); }
.rb-idea .v { font-weight: 800; color: var(--accent-purple); }
.rb-idea b { color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); }
.rb-idea small { display: block; color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.rb-st { border-radius: calc(5 * var(--rbu)); padding: 1px calc(7 * var(--rbu)); font-size: calc(11 * var(--rbu)); font-weight: 700; white-space: nowrap; }
.rb-st.planned, .rb-st.out { background: var(--accent-green-dim); color: var(--accent-green); }
.rb-st.maybe, .rb-st.draft { background: var(--accent-gold-dim); color: var(--accent-gold); }
.rb-st.no { background: var(--bg-elevated); color: var(--text-secondary); }
.rb-st.new { background: var(--accent-blue-dim); color: var(--accent-blue); }
.rb-rr { display: grid; grid-template-columns: calc(70 * var(--rbu)) minmax(0, calc(190 * var(--rbu))) auto minmax(0, 1fr) auto; gap: calc(8 * var(--rbu)) calc(12 * var(--rbu)); align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(10 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.rb-rr.on { border-color: rgba(255, 194, 51, .6); }
.rb-rr .v { font: 500 calc(13 * var(--rbu)) 'JetBrains Mono', monospace; color: var(--text-secondary); }
.rb-rr b { color: var(--text-primary); }
.rb-rr .m { min-width: 0; font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-notes { margin-top: calc(12 * var(--rbu)); display: grid; gap: calc(8 * var(--rbu)); background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(12 * var(--rbu)); padding: calc(14 * var(--rbu)); }
.rb-send { margin-top: calc(4 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: rgba(45, 212, 160, .05); border: 1px solid rgba(45, 212, 160, .22); }
.rb-send ul { display: grid; gap: calc(5 * var(--rbu)); margin: calc(6 * var(--rbu)) 0 0; padding: 0; list-style: none; font-size: calc(12.5 * var(--rbu)); color: var(--text-primary); }
.rb-send li span { margin-right: calc(6 * var(--rbu)); font-weight: 800; color: var(--accent-green); }
.rb-send li.off { color: var(--text-muted); }
.rb-send li.off span { color: var(--text-muted); }
.rb-send p { margin: calc(8 * var(--rbu)) 0 0; font-size: calc(12 * var(--rbu)); color: var(--accent-gold); }

@media (max-width: 900px) {
    .rb { grid-template-columns: 1fr; }
    .rb-side { flex-direction: row; flex-wrap: wrap; gap: calc(4 * var(--rbu)); border-right: 0; border-bottom: 1px solid var(--border); }
    .rb-nav { width: auto; grid-template-columns: auto auto auto; gap: calc(6 * var(--rbu)); padding: calc(6 * var(--rbu)) calc(9 * var(--rbu)); background: var(--bg-card); }
    .rb-nav .lb small, .rb-cat, .rb-foot { display: none; }
    .rb-main { padding: calc(12 * var(--rbu)); }
    .rb-gh { display: none; }
    .rb-lane { grid-template-columns: 1fr; }
    .rb-col.empty { display: none; }
    .rb-col::before { content: attr(data-label); padding: 2px 2px 0; font-size: calc(10 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
    .rb-track { grid-template-columns: 1fr 1fr; }
    .rb-pct, .rb-goal { text-align: left; }
    .rb-idea { grid-template-columns: calc(56 * var(--rbu)) minmax(0, 1fr); }
    .rb-idea > :nth-child(n+3) { grid-column: 2; justify-self: start; }
    .rb-rr { grid-template-columns: calc(60 * var(--rbu)) minmax(0, 1fr); }
    .rb-rr > :nth-child(n+3) { grid-column: 2; justify-self: start; }
    .rb-row2 { grid-template-columns: 1fr; }
}

/* cards in hand: grab, a ghost under the pointer, a gold line where it lands; the size has a colour (weight) */
.rb-card:hover { transform: translateY(-1px); box-shadow: 0 calc(4 * var(--rbu)) calc(14 * var(--rbu)) rgba(0, 0, 0, .25); }
.rb-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.rb-card.slim { display: flex; align-items: center; gap: calc(6 * var(--rbu)); }
.rb-card.slim span { flex: 1; min-width: 0; }
.rb-card.slim .rb-sz { opacity: .6; }
.rb-card.rb-dragging { opacity: .3; transform: none; box-shadow: none; }
.rb-ghost { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; margin: 0; cursor: grabbing; border-color: var(--accent-gold) !important;
    box-shadow: 0 calc(14 * var(--rbu)) calc(34 * var(--rbu)) rgba(0, 0, 0, .55), 0 0 0 1px var(--accent-gold) inset; background: var(--bg-card-hover); }
.rb-ph { height: calc(3 * var(--rbu)); margin: 1px 2px; border-radius: 2px; background: var(--accent-gold); box-shadow: 0 0 calc(10 * var(--rbu)) rgba(255, 194, 51, .6); }
.rb-is-dragging, .rb-is-dragging * { cursor: grabbing !important; }
.rb-is-dragging .rb-col { outline: 1px dashed var(--border); outline-offset: -1px; }
.rb-is-dragging .rb-col.drop { outline: 1px solid var(--accent-cyan); background: var(--accent-cyan-dim); }
.rb-is-dragging .rb-col.empty { display: grid; }
.rb-is-dragging .rb-card:hover { transform: none; box-shadow: none; }
.rb-landed { animation: rbLand .8s ease-out; }
@keyframes rbLand { 0% { box-shadow: 0 0 0 2px var(--accent-gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
.rb-sz.sz-XS, .rb-comp-sz .sz-XS { background: rgba(139, 144, 168, .18); color: var(--text-secondary); }
.rb-sz.sz-S, .rb-comp-sz .sz-S { background: var(--accent-blue-dim); color: var(--accent-blue); }
.rb-sz.sz-M, .rb-comp-sz .sz-M { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.rb-sz.sz-L, .rb-comp-sz .sz-L { background: var(--accent-gold-dim); color: var(--accent-gold); }
.rb-sz.sz-XL, .rb-comp-sz .sz-XL { background: var(--accent-red-dim); color: var(--accent-red); }
/* adding a task: type the name, then one click on its size adds it (the size is required) */
.rb-comp { display: grid; gap: calc(5 * var(--rbu)); }
.rb-comp .rb-in { padding: calc(6 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(12 * var(--rbu)); }
.rb-comp-sz { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)) calc(26 * var(--rbu)); gap: calc(3 * var(--rbu)); }
.rb-comp:focus-within .rb-comp-sz, .rb-comp.has-text .rb-comp-sz { display: grid; }
.rb-comp-sz span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rb-comp-sz button { min-width: 0; height: calc(24 * var(--rbu)); padding: 0; border-radius: calc(6 * var(--rbu)); border: 1px solid transparent; font: 700 calc(11 * var(--rbu)) 'JetBrains Mono', monospace; cursor: pointer; transition: transform .12s, border-color .12s; }
.rb-comp-sz button:hover, .rb-comp-sz button:focus-visible { outline: none; border-color: currentColor; transform: translateY(-1px); }
.rb-comp-sz .rb-comp-pub { background: var(--bg-elevated); color: var(--text-secondary); font-family: inherit; opacity: .55; }
.rb-comp-sz .rb-comp-pub:hover, .rb-comp-sz .rb-comp-pub[aria-pressed="true"] { opacity: 1; }
.rb-comp-sz .rb-comp-pub[aria-pressed="true"] { background: var(--accent-green-dim); color: var(--accent-green); border-color: var(--accent-green); }
.rb-comp.need .rb-comp-sz span { color: var(--accent-gold); }
.rb-comp.need .rb-comp-sz button:not(.rb-comp-pub) { animation: rbPulse .5s ease-in-out 2; }
@keyframes rbPulse { 50% { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent-gold); } }

/* a whole feature row: grab its name (⠿) or its empty space, move it up or down */
.rb-lh { position: relative; }
.rb-lane.mov .rb-lh { cursor: grab; }
.rb-grip { position: absolute; top: calc(4 * var(--rbu)); right: calc(4 * var(--rbu)); color: var(--text-muted); font-size: calc(13 * var(--rbu)); line-height: 1; opacity: 0; transition: opacity .15s; }
.rb-lane.mov:hover .rb-grip, .rb-lane.mov .rb-lh:focus-visible .rb-grip { opacity: .8; }
.rb-grid { position: relative; }   /* rows measure their place from the grid while one is in hand */
/* a row in hand: every row folds to one line, the one in hand leaves a dashed gap, the others slide out of its way */
.rb-is-moving .rb-gh { display: none; }
.rb-is-moving .rb-lane.mov, .rb-ghost.rb-lane { grid-template-columns: minmax(0, 1fr); padding: calc(3 * var(--rbu)) calc(6 * var(--rbu)); }
.rb-is-moving .rb-lane.mov .rb-col, .rb-ghost.rb-lane .rb-col,
.rb-is-moving .rb-lane.mov .rb-lh small, .rb-ghost.rb-lane .rb-lh small,
.rb-is-moving .rb-lane.mov .rb-bar, .rb-ghost.rb-lane .rb-bar { display: none; }
.rb-is-moving .rb-lane.mov .rb-lh, .rb-ghost.rb-lane .rb-lh { align-items: center; padding: calc(5 * var(--rbu)) calc(4 * var(--rbu)); }
.rb-is-moving .rb-lane.mov .rb-lh > div, .rb-ghost.rb-lane .rb-lh > div { display: flex; align-items: center; gap: calc(10 * var(--rbu)); min-width: 0; padding-right: calc(22 * var(--rbu)); }
.rb-is-moving .rb-lane.mov .rb-lh b, .rb-ghost.rb-lane .rb-lh b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-is-moving .rb-lane.mov .rb-chips, .rb-ghost.rb-lane .rb-chips { flex: none; flex-wrap: nowrap; margin: 0; }
.rb-is-moving .rb-grip, .rb-ghost.rb-lane .rb-grip { opacity: .7; top: 50%; transform: translateY(-50%); }
.rb-is-moving .rb-lane.rb-dragging { border: 1px dashed var(--accent-gold); background: rgba(255, 194, 51, .06); box-shadow: none; }
.rb-is-moving .rb-lane.rb-dragging > * { visibility: hidden; }
.rb-ghost.rb-lane { border-radius: calc(10 * var(--rbu)); background: var(--bg-elevated); transform-origin: left center; }
.rb-is-moving, .rb-is-moving * { cursor: grabbing !important; user-select: none; }
.rb-is-moving .rb-card:hover, .rb-is-moving .rb-lh:hover { transform: none; background: none; }

/* PL dashboard: the English players get, under a field */
.rb-en { display: block; margin-top: -2px; color: var(--text-muted); font-size: calc(11 * var(--rbu)); font-style: italic; }

/* ---------- the site's page around the board ---------- */
.bub-top .ph-title { font: 700 calc(12 * var(--rbu))/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-low); margin: 0 0 calc(10 * var(--rbu)); }
.rb-lang { display: flex; gap: 2px; margin: calc(10 * var(--rbu)) calc(4 * var(--rbu)) 0; padding: 2px; border-radius: calc(8 * var(--rbu)); background: var(--bg-card); width: max-content; }
.rb-lang button { border: 0; background: none; color: var(--text-muted); font: 700 calc(11.5 * var(--rbu)) var(--f-body); padding: calc(4 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(6 * var(--rbu)); cursor: pointer; }
.rb-lang button.on { background: var(--bg-elevated); color: var(--text-primary); }
/* readable on the site: nothing under 11 px */
.bub-sec .rb-sz { font-size: calc(11 * var(--rbu)); min-width: calc(22 * var(--rbu)); height: calc(17 * var(--rbu)); }
.bub-sec .rb-chip, .bub-sec .rb-kick, .bub-sec .rb-fb { font-size: calc(11 * var(--rbu)); }
.bub-sec { padding: calc(var(--nav-h) + calc(22 * var(--rbu))) 0 calc(56 * var(--rbu)); }
.bub-wrap { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(14px, 5vw, 64px); }   /* the board spans the screen like the site's bar above it */
.bub-sec .rb { min-height: max(calc(560 * var(--rbu)), calc(100svh - var(--nav-h) - calc(96 * var(--rbu)))); }
.bub-sec .rb { font-family: var(--f-body); }
.bub-sec .rb h2 { font-family: var(--f-head); letter-spacing: .01em; }
.rb-x.sm { padding: calc(3 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(11.5 * var(--rbu)); }
a.rb-x { text-decoration: none; display: inline-flex; align-items: center; }
.rb .dash-chip { display: inline-block; padding: 1px calc(7 * var(--rbu)); border-radius: calc(999 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 700; color: var(--text-muted); background: var(--bg-elevated); }
.rb-gate { max-width: calc(560 * var(--rbu)); margin: calc(40 * var(--rbu)) auto; padding: calc(28 * var(--rbu)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-deep); text-align: center; }
.rb-gate h2 { font-family: var(--f-head); color: var(--text-primary); font-size: calc(26 * var(--rbu)); margin-bottom: calc(8 * var(--rbu)); }
.rb-gate p { color: var(--text-secondary); margin-bottom: calc(16 * var(--rbu)); }
.rb-gate .rb-x { margin: calc(3 * var(--rbu)); }

/* ---------- toast, confirm, drawer (the dashboard's, made here) ---------- */
#bub-toasts { position: fixed; z-index: 10050; left: 50%; bottom: calc(22 * var(--rbu)); transform: translateX(-50%); display: grid; gap: calc(8 * var(--rbu)); width: min(92vw, calc(460 * var(--rbu))); pointer-events: none; }
.bub-toast { padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: #1b2a22; border: 1px solid rgba(0, 210, 106, .45); color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); box-shadow: var(--shadow); transition: opacity .3s, transform .3s; }
.bub-toast.err { background: #2c1717; border-color: rgba(255, 56, 56, .5); }
.bub-toast.out { opacity: 0; transform: translateY(calc(6 * var(--rbu))); }
.bub-modal-bd { position: fixed; inset: 0; z-index: 10040; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: calc(16 * var(--rbu)); }
.dash-modal { width: min(100%, calc(440 * var(--rbu))); background: var(--bg-deep); border: 1px solid var(--border); border-radius: calc(14 * var(--rbu)); padding: calc(18 * var(--rbu)); display: grid; gap: calc(10 * var(--rbu)); box-shadow: var(--shadow); }
.dash-modal h3 { color: var(--text-primary); font-size: calc(16 * var(--rbu)); }
.dash-modal p { color: var(--text-secondary); font-size: calc(13.5 * var(--rbu)); }
.dash-modal .actions { display: flex; justify-content: flex-end; gap: calc(8 * var(--rbu)); flex-wrap: wrap; }
.bub-f { display: grid; gap: calc(5 * var(--rbu)); font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.bub-f input { padding: calc(9 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(8 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: calc(14 * var(--rbu)); }
#dash-drawer-backdrop { position: fixed; inset: 0; z-index: 10020; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s; }
#dash-drawer-backdrop.show { opacity: 1; }
#dash-drawer { position: fixed; z-index: 10030; top: 0; right: 0; bottom: 0; width: min(100vw, calc(460 * var(--rbu))); background: var(--bg-deep); border-left: 1px solid var(--border); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s cubic-bezier(.22, .9, .35, 1); box-shadow: -20px 0 calc(50 * var(--rbu)) rgba(0, 0, 0, .5); }
#dash-drawer.show { transform: none; }
#dash-drawer .dd-head { display: flex; align-items: center; justify-content: space-between; padding: calc(14 * var(--rbu)) calc(16 * var(--rbu)); border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: calc(15 * var(--rbu)); }
#dash-drawer .dd-close { background: none; border: 0; color: var(--text-secondary); font-size: calc(18 * var(--rbu)); cursor: pointer; padding: calc(4 * var(--rbu)) calc(8 * var(--rbu)); border-radius: calc(6 * var(--rbu)); }
#dash-drawer .dd-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
#dash-drawer .dd-body { padding: calc(14 * var(--rbu)) calc(16 * var(--rbu)) calc(28 * var(--rbu)); overflow-y: auto; overscroll-behavior: contain; }
html.bub-drawer-open { overflow: hidden; }

/* ---------- the testers' answers on Damian's board ---------- */
.rb-fb { display: inline-flex; gap: calc(3 * var(--rbu)); padding: 0 calc(5 * var(--rbu)); border-radius: calc(4 * var(--rbu)); font-size: calc(10.5 * var(--rbu)); font-weight: 700; background: var(--bg-elevated); color: var(--text-secondary); white-space: nowrap; }
.rb-fb.new { box-shadow: 0 0 0 1px var(--accent-gold) inset; color: var(--text-primary); }
.rb-fbl { display: grid; gap: calc(8 * var(--rbu)); }
.rb-fbe { border: 1px solid var(--border); border-radius: calc(10 * var(--rbu)); padding: calc(9 * var(--rbu)) calc(10 * var(--rbu)); background: var(--bg-card); display: grid; gap: calc(5 * var(--rbu)); min-width: 0; }
.rb-fbh { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); }
.rb-fbh b { color: var(--text-primary); }
.rb-fbh span { color: var(--text-muted); }
.rb-fbh .rb-st { margin-left: auto; }
.rb-fbh .rb-x.sm { padding: 1px calc(6 * var(--rbu)); }
.rb-fbe p { color: var(--text-secondary); font-size: calc(13 * var(--rbu)); white-space: pre-wrap; overflow-wrap: anywhere; }
.rb-fbw { color: var(--accent-gold); font-size: calc(11.5 * var(--rbu)); font-weight: 700; }
.rb-fbwrap { cursor: pointer; }
.rb-fbwrap:hover .rb-fbe { border-color: var(--border-hover); }
.rb-clip { width: 100%; max-height: calc(300 * var(--rbu)); border-radius: calc(8 * var(--rbu)); background: #000; object-fit: contain; }
.rb-clip-l { font-size: calc(12.5 * var(--rbu)); color: var(--accent-cyan); overflow-wrap: anywhere; }
.rb-st.new { color: var(--accent-gold); background: var(--accent-gold-dim); }
.rb-round { border-color: rgba(233, 185, 73, .4); }

/* ---------- the testers' board ---------- */
.rbt { max-width: calc(980 * var(--rbu)); margin: 0 auto; display: grid; gap: calc(18 * var(--rbu)); }
.rbt-pv { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--rbu)); flex-wrap: wrap; padding: calc(9 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: var(--accent-gold-dim); color: var(--accent-gold); font-size: calc(13 * var(--rbu)); font-weight: 700; }
.rbt-h h2 { font-family: var(--f-head); color: var(--text-primary); font-size: clamp(calc(24 * var(--rbu)), 4vw, calc(34 * var(--rbu))); line-height: 1.15; }
.rbt-h p { color: var(--text-secondary); margin-top: calc(6 * var(--rbu)); }
.rbt-note { padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary) !important; }
.rbt-note b { color: var(--accent-gold); }
.rbt-sec { display: grid; gap: calc(8 * var(--rbu)); }
.rbt-sec h3 { font-family: var(--f-head); color: var(--text-primary); font-size: calc(18 * var(--rbu)); letter-spacing: .02em; }
.rbt-sec > p { color: var(--text-secondary); font-size: calc(13 * var(--rbu)); margin-top: -4px; }
.rbt-asks { padding: calc(12 * var(--rbu)); border-radius: calc(14 * var(--rbu)); border: 1px solid rgba(233, 185, 73, .45); background: linear-gradient(180deg, rgba(233, 185, 73, .08), transparent); }
.rbt-ask-of { font-size: calc(11 * var(--rbu)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: calc(4 * var(--rbu)) 2px -4px; }
.rbt-items { display: grid; gap: calc(10 * var(--rbu)); }
.rbt-item { border: 1px solid var(--border); border-radius: calc(12 * var(--rbu)); background: var(--bg-card); padding: calc(10 * var(--rbu)); display: grid; gap: calc(6 * var(--rbu)); }
.rbt-ih { display: grid; grid-template-columns: calc(22 * var(--rbu)) minmax(0, 1fr); gap: calc(8 * var(--rbu)); align-items: start; }
.rbt-ih b { color: var(--text-primary); font-size: calc(15 * var(--rbu)); }
.rbt-ih small { display: block; color: var(--text-muted); font-size: calc(12.5 * var(--rbu)); }
.rbt-task { border-radius: calc(9 * var(--rbu)); background: var(--bg-deep); padding: calc(7 * var(--rbu)) calc(9 * var(--rbu)); display: grid; gap: calc(8 * var(--rbu)); }
.rbt-task.s-test { box-shadow: 0 0 0 1px rgba(56, 182, 255, .35) inset; }
.rbt-task.ask { box-shadow: 0 0 0 1px rgba(233, 185, 73, .55) inset; }
.rbt-tr { display: flex; align-items: center; gap: calc(8 * var(--rbu)); flex-wrap: wrap; min-width: 0; }
.rbt-m { width: calc(20 * var(--rbu)); text-align: center; flex: none; }
.rbt-n { flex: 1 1 calc(160 * var(--rbu)); min-width: 0; color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); overflow-wrap: anywhere; }
.rbt-n small { display: block; color: var(--text-muted); font-size: calc(11 * var(--rbu)); }
.rbt-task.s-done .rbt-n { color: var(--text-secondary); }
.rbt-mine { font-size: calc(11.5 * var(--rbu)); font-weight: 700; color: var(--text-secondary); padding: 2px calc(7 * var(--rbu)); border-radius: calc(999 * var(--rbu)); background: var(--bg-elevated); }
.rbt-mine.s-fix { color: var(--accent-orange); background: var(--accent-orange-dim); }
.rbt-mine.s-pass { color: var(--accent-green); background: var(--accent-green-dim); }
.rbt-re { font-size: calc(11.5 * var(--rbu)); font-weight: 700; color: var(--accent-cyan); padding: 2px calc(7 * var(--rbu)); border-radius: calc(999 * var(--rbu)); background: var(--accent-cyan-dim); }
.rbt-form { display: grid; gap: calc(8 * var(--rbu)); padding-top: 2px; }
.rbt-vs { display: flex; gap: calc(6 * var(--rbu)); flex-wrap: wrap; }
.rbt-v { flex: 1 1 calc(96 * var(--rbu)); padding: calc(9 * var(--rbu)) calc(8 * var(--rbu)); border-radius: calc(9 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: calc(13.5 * var(--rbu)); font-weight: 700; cursor: pointer; }
.rbt-v:hover { border-color: var(--border-hover); }
.rbt-v.on.v-ok { border-color: var(--accent-green); background: var(--accent-green-dim); }
.rbt-v.on.v-partly { border-color: var(--accent-gold); background: var(--accent-gold-dim); }
.rbt-v.on.v-broken { border-color: var(--accent-red); background: var(--accent-red-dim); }
.rbt-clip { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); }
.rbt-clip .rb-in { flex: 1 1 calc(200 * var(--rbu)); min-width: 0; }
.rbt-file { cursor: pointer; }
.rbt-clip-on { color: var(--text-primary); display: inline-flex; align-items: center; gap: calc(6 * var(--rbu)); overflow-wrap: anywhere; }
.rbt-up { color: var(--accent-gold); font-weight: 700; }
.rbt-gen { padding: calc(12 * var(--rbu)); border-radius: calc(14 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); }

@media (pointer: coarse), (max-width: 900px) {
    /* fingers (every touch screen, also tablets): every button and field at least 34 px tall */
    .bub-sec .rb-x, .rbt .rb-x.sm, #dash-drawer .rb-x { min-height: calc(34 * var(--rbu)); }
    .bub-sec .rb-in { min-height: calc(38 * var(--rbu)); }
    .bub-sec .rb-lang button { min-height: calc(32 * var(--rbu)); }
    .bub-sec .rb-x, #dash-drawer .rb-x { min-width: calc(34 * var(--rbu)); }
    .rb-clip-l, .bub-sec .rb-foot a { display: inline-flex; align-items: center; min-height: calc(34 * var(--rbu)); }
}
@media (max-width: 600px) {
    .bub-sec { padding-top: calc(var(--nav-h) + calc(10 * var(--rbu))); }
    .rbt-v { flex-basis: 30%; padding: calc(10 * var(--rbu)) calc(4 * var(--rbu)); font-size: calc(13 * var(--rbu)); }
    #dash-drawer { width: 100vw; }
}

/* ---------- versions: the tree, the filter, a version's page ---------- */
/* overflow: clip keeps the round corners without making the board a scroll box (a sticky side follows the page) */
.bub-sec .rb { overflow: clip; }
@media (min-width: 901px) {
    .bub-sec .rb-side { position: sticky; top: calc(var(--nav-h) + 8px); align-self: start; max-height: calc(100vh - var(--nav-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
}
.rb-nav.rb-sub.is-test .lb { color: var(--accent-cyan); }
.rb-nav.rb-sub.rb-add { opacity: .6; }
.rb-nav.rb-sub.rb-add:hover { opacity: 1; }
.rb-vdrop-on { outline: 2px dashed var(--accent-gold); outline-offset: -2px; background: var(--accent-gold-dim) !important; }
.rb-vf { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); margin: 0 0 calc(10 * var(--rbu)); }
.rb-vf button { border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 999px; padding: calc(4 * var(--rbu)) calc(12 * var(--rbu)); font: 600 calc(12 * var(--rbu)) var(--f-body); cursor: pointer; }
.rb-vf button.on { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-hover); }
.rb-vchip { font: 700 calc(10.5 * var(--rbu)) var(--f-mono); color: var(--accent-cyan); background: var(--accent-cyan-dim); border-radius: 4px; padding: 0 calc(4 * var(--rbu)); }
.rb-card.flag { box-shadow: inset 3px 0 0 var(--accent-red); }
.rb-lane.is-dim { opacity: .55; }
.rb-rest { display: block; margin: calc(10 * var(--rbu)) auto 0; }
/* ---------- kinds: a feature (a row with its tasks), the tasks and the fixes (a row of cards each) ---------- */
.rb-type { display: inline-block; font: 800 calc(10 * var(--rbu)) var(--f-body); letter-spacing: .08em; text-transform: uppercase; border-radius: calc(4 * var(--rbu)); padding: 0 calc(6 * var(--rbu)); line-height: calc(17 * var(--rbu)); margin-bottom: calc(3 * var(--rbu)); white-space: nowrap; }
.rb-type.t-feature { color: var(--accent-gold); background: var(--accent-gold-dim); }
.rb-type.t-fix { color: var(--accent-red); background: var(--accent-red-dim); }
.rb-type.t-task { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.rb-lane.k-feature { border-left: 3px solid var(--accent-gold); }
.rb-lane.k-fix { border-left: 3px solid var(--accent-red); }
.rb-lane.k-task { border-left: 3px solid var(--accent-cyan); }
.rb-pool { background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 40%), var(--bg-card); }
.rb-pool .rb-poolh { cursor: default; }
.rb-pool .rb-poolh:hover { background: none; }
.rb-pool .rb-type { font-size: calc(12 * var(--rbu)); line-height: calc(20 * var(--rbu)); }
.rb-chip.wait { background: var(--bg-elevated); color: var(--text-secondary); }
.rb-card .rb-rep { color: var(--accent-blue); font-size: calc(10.5 * var(--rbu)); }
.rbt-item.solo { display: grid; gap: calc(4 * var(--rbu)); justify-items: start; }
.rbt-item.solo > .rbt-task { justify-self: stretch; }
.rbt-ask-of .rb-type { margin: 0 calc(4 * var(--rbu)) 0 0; }
.rbt-next { opacity: .85; }
/* a build's way: 🔨 → 🧪 → ☑ (one direction) */
.rb-way { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(10 * var(--rbu)); margin: 0 0 calc(12 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.rb-way ol { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); list-style: none; margin: 0; padding: 0; }
.rb-way li { display: inline-flex; align-items: center; gap: calc(6 * var(--rbu)); padding: calc(5 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); font: 600 calc(13 * var(--rbu)) var(--f-body); }
.rb-way li i { font-style: normal; }
.rb-way li.on { color: var(--text-primary); box-shadow: 0 0 0 1px var(--accent-gold) inset; background: var(--accent-gold-dim); }
.rb-way li.done { color: var(--accent-green); }
.rb-way li + li::before { content: "→"; margin-right: calc(6 * var(--rbu)); color: var(--text-muted); }
/* the tests board of a frozen build */
.rb-tests { display: grid; gap: calc(5 * var(--rbu)); }
.rb-tr { display: grid; grid-template-columns: auto minmax(0, 1fr) calc(70 * var(--rbu)) calc(90 * var(--rbu)) auto; gap: calc(12 * var(--rbu)); align-items: center; padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; }
.rb-tr:hover { border-color: var(--border-hover); }
.rb-tr.flag { box-shadow: inset 3px 0 0 var(--accent-red); }
.rb-tr .rb-type { margin: 0; }
.rb-tr-n b { display: block; font-weight: 600; color: var(--text-primary); }
.rb-tr-n small { color: var(--text-muted); font-size: calc(12 * var(--rbu)); }
.rb-tr-s { color: var(--text-secondary); font-size: calc(12 * var(--rbu)); }
.rb-tr-f { font-size: calc(13 * var(--rbu)); color: var(--text-secondary); }
.rb-qa { font: 700 calc(12 * var(--rbu)) var(--f-body); padding: calc(5 * var(--rbu)) calc(10 * var(--rbu)); border-radius: 999px; white-space: nowrap; }
.rb-qa.ok { background: var(--accent-green-dim); color: var(--accent-green); }
.rb-qa.fix { background: var(--accent-gold-dim); color: var(--accent-gold); }
.rb-qa.none { color: var(--text-muted); }
.rb-qa.wait { background: var(--accent-red-dim); color: var(--accent-red); }
.rb-tr.wait { border-color: rgba(255, 56, 56, .45); }
.rb-warn { margin: calc(8 * var(--rbu)) 0; padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 10px; background: var(--accent-red-dim); color: #ffb3b3; font-size: calc(13 * var(--rbu)); }
.rb-qa-b { display: inline-flex; gap: calc(6 * var(--rbu)); }
.rb-rel-btn { border-color: var(--accent-gold) !important; color: var(--accent-gold) !important; }
.rb-site { margin-left: auto; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 999px; padding: 3px 10px; font-size: calc(12 * var(--rbu)); cursor: pointer; white-space: nowrap; }
.rb-site.on { border-color: rgba(41, 214, 122, .45); color: #3ee08c; background: rgba(41, 214, 122, .08); }
.rb-site:hover { border-color: var(--text-secondary); color: var(--text-primary); }
/* players' problems and ideas: the status, the answer to the players, Zapisz */
.rb-fbk { display: grid; gap: calc(6 * var(--rbu)); }
.rb-fbr { display: grid; grid-template-columns: calc(70 * var(--rbu)) minmax(0, 1fr) calc(230 * var(--rbu)); gap: calc(12 * var(--rbu)); align-items: start; padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.rb-fbv { font: 700 calc(14 * var(--rbu)) var(--f-mono); color: var(--text-secondary); padding-top: 2px; }
.rb-fbm b { display: block; color: var(--text-primary); font-weight: 600; }
.rb-fbm small { display: block; color: var(--text-muted); font-size: calc(12 * var(--rbu)); margin: 2px 0 6px; }
.rb-fbreply { min-height: calc(54 * var(--rbu)); }
.rb-pulse-st { margin: 0 0 calc(10 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rb-pulse-st.wait { border-color: rgba(233, 185, 73, .45); color: var(--accent-gold); }
.rb-pulse-st.ok { border-color: rgba(41, 214, 122, .45); color: #3ee08c; }
.rb-pulse-prev { padding: calc(14 * var(--rbu)) calc(16 * var(--rbu)); border-radius: 12px; background: #0d0f14; border: 1px solid var(--border); color: var(--text-primary); line-height: 1.5; }
.rb-pulse-prev .rb-pulse-title { display: block; font-size: calc(16 * var(--rbu)); margin-bottom: 6px; }
.rb-pulse-prev ul { margin: 6px 0; padding-left: 18px; }
.rb-pulse-prev p { margin: 6px 0 0; color: var(--text-secondary); }
.rb-pulse-log { display: grid; gap: 4px; font-size: calc(13 * var(--rbu)); color: var(--text-secondary); }
.rb-pulse-log small { color: var(--text-muted); }
.rb-fbd { width: 100%; margin-bottom: calc(6 * var(--rbu)); min-height: calc(44 * var(--rbu)); }
.rb-ibd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.rb-fbc { display: grid; gap: calc(6 * var(--rbu)); }
.rb-fbpub { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: calc(12.5 * var(--rbu)); }
.rb-arch { margin-top: calc(14 * var(--rbu)); }
.rb-arch > summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; padding: calc(8 * var(--rbu)) 0; }
.rb-arch[open] > summary { margin-bottom: calc(8 * var(--rbu)); }
@media (max-width: 900px) { .rb-fbr { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .rb-tr { grid-template-columns: minmax(0, 1fr) auto; }
    .rb-tr .rb-type { grid-column: 1; }
    .rb-tr-n { grid-column: 1 / -1; }
    .rb-tr-s, .rb-tr-f { grid-column: auto; }
}
.rbt-next .rbt-item { border-style: dashed; }
.rbt-nx { display: grid; gap: calc(3 * var(--rbu)); }
.rbt-nx small { color: var(--text-secondary); font-size: calc(12.5 * var(--rbu)); }
.rb-lane.is-dim .rb-col:not(.c-todo) { min-height: 0; }
.rb-vpill { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font: 700 calc(12 * var(--rbu)) var(--f-body); padding: calc(3 * var(--rbu)) calc(10 * var(--rbu)); border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary); }
.rb-vpill.s-progress { color: var(--accent-gold); background: var(--accent-gold-dim); }
.rb-vpill.s-testing { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.rb-vpill.s-released { color: var(--accent-green); background: var(--accent-green-dim); }
.rb-vst { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); margin: 0 0 calc(12 * var(--rbu)); }
.rb-vst button { flex: 1 1 calc(120 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); border-radius: 10px; padding: calc(9 * var(--rbu)) calc(10 * var(--rbu)); font: 600 calc(13 * var(--rbu)) var(--f-body); cursor: pointer; }
.rb-vst button.on { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-elevated); }
.rb-vst button.on.s-progress { border-color: var(--accent-gold); }
.rb-vst button.on.s-testing { border-color: var(--accent-cyan); }
.rb-vst button.rel { color: var(--accent-green); border-color: rgba(0, 210, 106, .4); }
.rb-vnote { margin-bottom: calc(14 * var(--rbu)); }
/* the testers: one version at a time */
.rbt-vers { display: flex; flex-wrap: wrap; gap: calc(6 * var(--rbu)); }
.rbt-vers button { display: grid; justify-items: start; gap: 1px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); border-radius: 10px; padding: calc(7 * var(--rbu)) calc(12 * var(--rbu)); cursor: pointer; font: inherit; }
.rbt-vers button b { font-family: var(--f-mono); }
.rbt-vers button small { color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.rbt-vers button.on { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.rbt-st { color: var(--text-secondary); margin-top: calc(6 * var(--rbu)); }
.rbt-st.s-testing { color: var(--accent-cyan); }
.rbt-flags { padding: calc(12 * var(--rbu)); border-radius: 14px; border: 1px solid rgba(255, 56, 56, .5); background: linear-gradient(180deg, rgba(255, 56, 56, .08), transparent); }
.rbt-task.flag { box-shadow: 0 0 0 1px rgba(255, 56, 56, .6) inset; }
.rbt-sec h3 small { color: var(--text-muted); font-family: var(--f-body); font-size: calc(13 * var(--rbu)); margin-left: 6px; }

/* an empty update: a real call to action, not a thin line */
.rb-empty-big { display: grid; justify-items: center; gap: calc(8 * var(--rbu)); padding: calc(56 * var(--rbu)) calc(16 * var(--rbu)); text-align: center; border: 1px dashed var(--border-hover); }
.rb-empty-big b { color: var(--text-primary); font-size: calc(17 * var(--rbu)); }
.rb-empty-big span { color: var(--text-secondary); font-size: calc(13.5 * var(--rbu)); max-width: calc(420 * var(--rbu)); }
.rb-empty-big .rb-acts { justify-content: center; margin-top: calc(6 * var(--rbu)); }

/* a finished feature stays in its place, ticked */
.rb-lane.is-ready { border-color: rgba(0, 210, 106, .3); background: linear-gradient(90deg, rgba(0, 210, 106, .07), transparent 45%), var(--bg-card); }
.rb-lane.is-ready .rb-lh b { color: #9ff0c0; }
/* the builds under an update in the side tree */
.rb-nav.rb-sub { padding-left: calc(26 * var(--rbu)); min-height: 0; }
.rb-nav.rb-sub .ic { font-size: calc(11 * var(--rbu)); opacity: .85; }
.rb-nav.rb-sub .lb { font-size: calc(12.5 * var(--rbu)); font-family: var(--f-mono); }
.rb-nav.rb-sub .lb small { font-family: var(--f-body); }
/* what a build brought */
.rb-chg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(260 * var(--rbu))), 1fr)); gap: calc(10 * var(--rbu)); margin: calc(6 * var(--rbu)) 0 calc(14 * var(--rbu)); }
.rb-chg-col { border: 1px solid var(--border); border-radius: 12px; padding: calc(12 * var(--rbu)); background: var(--bg-card); display: grid; gap: calc(8 * var(--rbu)); align-content: start; }
.rb-chg-col.done { border-color: rgba(0, 210, 106, .3); }
.rb-chg-col.test { border-color: rgba(56, 182, 255, .35); }
.rb-chg-col > b { color: var(--text-primary); font-size: calc(14 * var(--rbu)); }
.rb-chg-col > b small { color: var(--text-muted); font-weight: 600; margin-left: 4px; }
.rb-chg-col > span { color: var(--text-muted); font-size: calc(13 * var(--rbu)); }
.rb-chg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(6 * var(--rbu)); }
.rb-chg li { display: grid; gap: 1px; padding: calc(6 * var(--rbu)) calc(8 * var(--rbu)); border-radius: 8px; background: var(--bg-deep); }
.rb-chg li b { color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); font-weight: 600; }
.rb-chg li small { color: var(--text-muted); font-size: calc(12 * var(--rbu)); }
.rbt-new { padding: calc(12 * var(--rbu)); border-radius: 14px; border: 1px solid rgba(56, 182, 255, .35); background: linear-gradient(180deg, rgba(56, 182, 255, .07), transparent); }
.rbt-none { color: var(--text-muted); font-size: calc(13 * var(--rbu)); }
.rbt-b { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 0 calc(12 * var(--rbu)); }
.rbt-b summary { cursor: pointer; padding: calc(10 * var(--rbu)) 0; display: flex; gap: calc(10 * var(--rbu)); align-items: baseline; color: var(--text-primary); }
.rbt-b summary b { font-family: var(--f-mono); }
.rbt-b summary small { color: var(--text-muted); }

/* ---------- posts: one template, a preview of every place it goes ---------- */
.rb-pub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(14 * var(--rbu)); align-items: start; }
@media (max-width: 1100px) { .rb-pub { grid-template-columns: 1fr; } }
.rb-kind { font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.rb-kind.main { color: var(--accent-gold); background: var(--accent-gold-dim); }
.rb-kind.patch { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.rb-prev { display: grid; gap: calc(10 * var(--rbu)); }
.pv-title { font: 800 calc(12 * var(--rbu)) var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pv-title small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.pv { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: calc(10 * var(--rbu)); display: grid; gap: calc(8 * var(--rbu)); }
.pv.off { opacity: .5; }
.pv.later { border-style: dashed; }
.pv-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pv-where > span { color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); }
.pv-where small { flex-basis: 100%; color: var(--text-muted); font-size: calc(12 * var(--rbu)); }
.pv-soon { font-size: calc(10.5 * var(--rbu)); font-weight: 800; color: var(--accent-purple); background: var(--accent-purple-dim); border-radius: 4px; padding: 1px 6px; }
.pv-box { border-radius: 10px; overflow: hidden; }
.pv-game { background: #0b0d12; border: 1px solid rgba(233, 185, 73, .25); border-radius: 10px; padding: calc(12 * var(--rbu)); display: grid; gap: calc(6 * var(--rbu)); color: var(--text-secondary); font-size: calc(13 * var(--rbu)); }
.pv-game > b:first-child { color: var(--text-primary); font-family: var(--f-head); font-size: calc(17 * var(--rbu)); letter-spacing: .02em; }
.pv-game ul, .pv-dc-embed ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.pv-h { color: var(--accent-gold); font-size: calc(11 * var(--rbu)); letter-spacing: .08em; }
.pv-media { color: var(--accent-cyan); font-size: calc(12.5 * var(--rbu)); }
.pv-news { display: grid; gap: 3px; background: linear-gradient(160deg, var(--bg-elevated), var(--bg-deep)); border-radius: 10px; padding: calc(12 * var(--rbu)); }
.pv-news small { color: var(--accent-red); font-weight: 800; letter-spacing: .1em; font-size: calc(10.5 * var(--rbu)); }
.pv-news b { color: var(--text-primary); font-family: var(--f-head); font-size: calc(17 * var(--rbu)); }
.pv-news span { color: var(--text-secondary); font-size: calc(13 * var(--rbu)); }
.pv-dc { background: #313338; border-radius: 8px; padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); color: #dbdee1; font: calc(13.5 * var(--rbu)) / 1.4 'gg sans', 'Noto Sans', var(--f-body); display: grid; gap: 4px; }
.pv-dc-who { display: flex; align-items: center; gap: 8px; }
.pv-dc-who i { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font: 800 10px var(--f-body); display: grid; place-items: center; font-style: normal; }
.pv-dc-who b { color: #f2f3f5; }
.pv-dc-who small { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; border-radius: 3px; padding: 0 4px; }
.pv-dc-ping { color: #c9cdfb; background: rgba(88, 101, 242, .3); border-radius: 3px; padding: 0 3px; width: max-content; max-width: 100%; }
.pv-dc-embed { border-left: 4px solid var(--red); background: #2b2d31; border-radius: 4px; padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); display: grid; gap: 4px; }
.pv-dc-embed > b:first-child { color: #f2f3f5; }
.pv-dc-embed a, .pv-game a { color: #00a8fc; }
.rb-tog.sm { padding: 2px; }
.rbt-media { color: var(--accent-cyan); font-weight: 700; }

/* Dev Pulse: the living draft */
.rb-pulse-items { display: grid; gap: calc(6 * var(--rbu)); }
.rb-pi { display: grid; grid-template-columns: calc(26 * var(--rbu)) minmax(0, 1fr) auto; gap: calc(10 * var(--rbu)); align-items: center; padding: calc(8 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); }
.rb-pi .tx { display: flex; gap: calc(10 * var(--rbu)); align-items: center; min-width: 0; }
.rb-pi .tx span { color: var(--text-primary); overflow-wrap: anywhere; }
.rb-pi .ac { display: flex; gap: 4px; }
.rb-pm { position: relative; display: inline-block; flex: none; }
.rb-pm img { display: block; width: calc(120 * var(--rbu)); aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #000; }
.rb-pm i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; font-size: calc(22 * var(--rbu)); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.rb-pulse-prev .rb-pm img { width: min(100%, calc(420 * var(--rbu))); }
.rb-pm-row { margin: 8px 0; }
.rb-pulse-prev h4 { margin: 12px 0 4px; font-size: calc(12 * var(--rbu)); letter-spacing: .12em; color: var(--accent-gold); }
.rb-pulse-add { margin-top: calc(8 * var(--rbu)); }
.rb-pulse-add #rb-pa-u { flex: 1; min-width: calc(200 * var(--rbu)); }
.rb-pulse-add #rb-pa-t { flex: 1.4; min-width: calc(220 * var(--rbu)); }
.rb-pulse-facts { display: grid; gap: 4px; }
.rb-pf { display: flex; gap: 8px; align-items: baseline; color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); cursor: pointer; }
.rb-pf.off { color: var(--text-muted); text-decoration: line-through; }
.rb-pf small { color: var(--text-muted); }

/* Support & Feedback (06.10.2026): the number, the players' files (Ukryj / Zostaw), the fight with its replay, the ban, the answer */
.rb-no{font:700 11.5px var(--font-mono,monospace);color:var(--text-muted);background:rgba(255,255,255,.06);border-radius:6px;padding:2px 6px;margin-right:6px}
.rb-sf-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px;margin:8px 0}
.rb-sf-f{display:grid;gap:6px;padding:6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.rb-sf-f.flag{border-color:rgba(255,80,80,.55)}
.rb-sf-f.hid{opacity:.5}
.rb-sf-f video,.rb-sf-f img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000}
.rb-sf-none{display:grid;place-items:center;aspect-ratio:16/9;border-radius:8px;background:#111;color:var(--text-muted);font-size:12px}
.rb-sf-r{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.rb-sf-r span{flex:1;min-width:0}
.rb-sf-card{margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rb-sf-reply{display:grid;gap:6px;margin:8px 0}
.rb-sf-reply textarea{min-height:64px;width:100%}
.rb-sf-faq{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);margin-right:auto}
/* the Inbox in tabs, like Gmail */
.rb-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:8px}
.rb-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text-secondary);border-radius:10px;padding:8px 12px;font:600 13px var(--font-sans,inherit);cursor:pointer}
.rb-tab b{min-width:20px;text-align:center;border-radius:999px;padding:1px 7px;background:#e5262b;color:#fff;font-size:11.5px}
.rb-tab.on{background:#fff;color:#0b0c10;border-color:#fff}
/* settings: which Discord role sees which Inbox tab */
.rb-perms{display:grid;gap:2px;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:auto;max-width:100%}
.rb-perm{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(4,minmax(80px,1fr));align-items:center;gap:6px;padding:7px 10px;font-size:13px}
.rb-perm:nth-child(odd){background:rgba(255,255,255,.025)}
.rb-perm.head{font-weight:700;font-size:12px;color:var(--text-secondary)}
.rb-perm span i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:middle}
.rb-perm label{display:flex;justify-content:center}
/* FAQ */
.rb-faq-add{margin-bottom:14px}
.rb-faq{display:grid;gap:6px}
.rb-faq-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:start;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.rb-faq-r.hid{opacity:.55}
.rb-faq-t p{margin:4px 0 0;color:var(--text-secondary);font-size:13px;white-space:pre-line}
.rb-faq-b{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
@media (max-width:700px){.rb-faq-r{grid-template-columns:minmax(0,1fr)}.rb-faq-b{justify-content:flex-start}}
/* Referees (07.10.2026): the stars, the Referees screen, Moderation's evidence, an application's card */
.rb-stars{font-weight:800;letter-spacing:1px;margin-right:6px}
.rb-stars.s1{color:#5dadec}.rb-stars.s2{color:#f2c14e}.rb-stars.s3{color:#e5262b}
.rb-refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:10px}
.rb-ref{padding:12px 14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);min-width:0}
.rb-ref.is-resting,.rb-ref.is-paused{opacity:.75}.rb-ref.is-removed{opacity:.45}
.rb-ref-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rb-ref-h b{overflow-wrap:anywhere}
.rb-ref-pts{margin-left:auto;font-weight:800;white-space:nowrap}
.rb-ref-pts small{font-weight:600;margin-left:4px}.rb-ref-pts small.up{color:var(--accent-green)}.rb-ref-pts small.down{color:var(--accent-red)}
.rb-ref-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);margin:8px 0 6px;overflow:hidden}
.rb-ref-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#5dadec,#f2c14e,#e5262b)}
.rb-ref-split,.rb-ref-hist{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--text-secondary);margin-top:6px}
.rb-ref-hist{color:var(--text-muted)}
.rb-ev{flex-direction:column;align-items:flex-start}
.rb-ev q{display:block;white-space:pre-line;overflow-wrap:anywhere;color:var(--text-primary);quotes:"\201E" "\201D"}
.rb-mod-img{max-width:min(100%,420px);max-height:320px;border-radius:8px;display:block}
.rb-refapp{margin:6px 0;padding:10px 12px;border-radius:10px;background:rgba(229,38,43,.06);border:1px solid rgba(229,38,43,.25)}
.rb-refapp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px 14px}
.rb-refapp-g div{display:flex;flex-direction:column;min-width:0}
.rb-refapp-g span,.rb-refapp-t span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.rb-refapp-g b{font-size:13.5px;overflow-wrap:anywhere}
.rb-refapp-t p{margin:2px 0 8px;white-space:pre-line;font-size:13.5px;color:var(--text-secondary);overflow-wrap:anywhere}
/* the side never squeezes its rows (07.10: with Referees + Moderacja the list outgrew its sticky height and rows overlapped) */
.rb-side > * { flex-shrink: 0; }
/* the menu's groups (07.10.2026, Damian: "more pro"): a header that folds its group, a count beside a folded one, the open
   screen marked by a gold edge; on a phone the groups dissolve into the row of chips as before */
.rb-grp { display: flex; flex-direction: column; gap: 2px; margin-top: calc(6 * var(--rbu)); }
.rb-grp-b { display: flex; flex-direction: column; gap: 2px; }
.rb-grp.folded .rb-grp-b { display: none; }
.rb-fold { display: flex; align-items: center; gap: calc(6 * var(--rbu)); width: 100%; margin: calc(6 * var(--rbu)) 0 calc(2 * var(--rbu)); padding: calc(4 * var(--rbu)) calc(8 * var(--rbu));
    background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; text-align: left; }
.rb-fold:hover { background: var(--bg-card); color: var(--text-secondary); }
.rb-fold span { flex: 1 1 auto; min-width: 0; }
.rb-fold b { font-size: calc(10.5 * var(--rbu)); font-weight: 800; letter-spacing: 0; color: var(--text-secondary); background: var(--bg-elevated); border-radius: 999px; padding: 0 calc(6 * var(--rbu)); }
.rb-fold i { width: calc(8 * var(--rbu)); height: calc(8 * var(--rbu)); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; opacity: .7; }
.rb-grp.folded .rb-fold i { transform: rotate(-45deg); }
.rb-fold:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: -2px; }
.rb-side .rb-nav { position: relative; }
.rb-side .rb-nav.on::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--accent-gold); }
@media (max-width: 900px) {
    .rb-grp, .rb-grp-b, .rb-grp.folded .rb-grp-b { display: contents; }
    .rb-fold { display: none; }
    .rb-side .rb-nav.on::before { display: none; }
}

/* 📘 Guide (js/board-guide.js, 07.10.2026): my bar, the films, categories on the left, cards on the right */
.rbg-me{--ref:#5dadec;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--ref) 14%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--ref) 40%,transparent);display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-secondary)}
.rbg-me-h{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.rbg-me-h b,.rbg-me > b{color:var(--ref);font-size:15px}
.rbg-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.rbg-bar i{display:block;height:100%;background:var(--ref);border-radius:99px}
.rbg-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px;margin:0 0 14px}
.rbg-films figure{margin:0;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.rbg-films video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.rbg-films figcaption{padding:8px 12px;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--text-secondary)}
.rbg{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:14px;align-items:start}
.rbg-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--nav-h, 64px) + 10px)}
.rbg-c{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text-secondary);font:inherit;font-weight:600;font-size:13px;text-align:left;cursor:pointer}
.rbg-c:hover{background:var(--bg-card)}.rbg-c.on{background:var(--bg-elevated);color:var(--text-primary)}
.rbg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.rbg-card{padding:12px 14px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);display:flex;flex-direction:column;gap:6px;min-width:0}
.rbg-card.locked{opacity:.5}
.rbg-card-h{display:flex;align-items:center;gap:8px}
.rbg-card-h b{flex:1;min-width:0;font-size:14px;color:var(--text-primary)}
.rbg-ic{font-size:18px}
.rbg-card p{margin:0;font-size:13px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}
.rbg-card .rb-x{align-self:flex-start}
.rbg-lv{font-size:11px;font-weight:800;padding:1px 7px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}
.rbg-lv.l1{color:#5dadec}.rbg-lv.l2{color:#f2c14e}.rbg-lv.l3{color:#e5262b}.rbg-lv.l4{color:#a970ff}
@media (max-width:700px){.rbg{grid-template-columns:minmax(0,1fr)}.rbg-nav{position:static;flex-direction:row;flex-wrap:wrap}.rbg-c{padding:6px 9px;background:var(--bg-card)}}
.rb-ib.rb-mod.is-upheld{opacity:.7;border-color:rgba(35,165,90,.45)}
/* appeals handled by the team (08.10.2026): the Appeals section, an open case, the decision form */
.rb-ap{margin:0 0 14px;padding:12px;border:1px solid rgba(233,185,73,.35);border-radius:12px;background:var(--accent-gold-dim);min-width:0}
.rb-ap h3{margin:0 0 8px;font-size:15px;color:var(--text-primary)}
.rb-ap h3 small{font-weight:600;color:var(--text-secondary);margin-left:6px}
.rb-ib.rb-mod{min-width:0;overflow-wrap:anywhere}
.rb-ib.rb-mod.is-appeal{border-color:rgba(233,185,73,.55)}
.rb-mod-tg{margin-left:auto}
.rb-chip-ap{color:var(--accent-gold)!important;background:var(--accent-gold-dim)!important}
.rb-chip-red{color:var(--accent-red)!important;background:var(--accent-red-dim)!important}
.rb-chip-ok{color:var(--accent-green)!important}
.rb-mod-bot{font-weight:700;color:var(--text-primary)}
.rb-mod-botx{color:var(--text-muted);font-style:italic}
.rb-mod-why{color:var(--text-secondary)}
.rb-mod-x{margin-top:10px;display:grid;gap:6px;min-width:0}
.rb-mod-x .rb-sf-card{margin:0;min-width:0}
.rb-mod-x small{color:var(--text-muted)}
.rb-mod-rec{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%;min-width:0}
.rb-mod-rec li{display:grid;gap:2px;min-width:0}
.rb-mod-rec q{display:block;white-space:pre-line;overflow-wrap:anywhere;color:var(--text-primary);quotes:"\201E" "\201D"}
.rb-mod-ap{border-color:rgba(233,185,73,.4)}
.rb-mdec{display:grid;gap:6px;padding:10px;border-radius:10px;border:1px dashed var(--border);min-width:0}
.rb-mdec label{font-size:12px;color:var(--text-secondary)}
.rb-mdec textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:52px}
.rb-mdec .rb-acts{margin-top:0}
.rb-mdec-no{margin:0;font-size:12.5px;color:var(--text-secondary)}
.rb-hint-inl{font-size:12px;color:var(--text-muted);align-self:center}
/* 💬 conversations with players (board-talk.js, 11.10) */
.rb-fbr .btk-reps { grid-column: 1 / -1; }
.btk-at { margin-top: calc(4 * var(--rbu)); white-space: normal; }
.btk-btn.off { opacity: .7; }
.btk-strip { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--rbu)); margin: calc(10 * var(--rbu)) 0; padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 12px; border: 1px solid rgba(233, 185, 73, .45); background: rgba(233, 185, 73, .08); }
.btk-list { display: grid; gap: calc(8 * var(--rbu)); }
.btk-row { display: flex; align-items: flex-start; gap: calc(12 * var(--rbu)); width: 100%; text-align: left; padding: calc(12 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; font: inherit; }
.btk-row:hover, .btk-row:focus-visible { border-color: var(--border-hover); }
.btk-row.new { border-color: rgba(233, 185, 73, .6); }
.btk-row.off { opacity: .65; }
.btk-no { font-family: var(--f-mono, monospace); color: var(--text-muted); flex: none; }
.btk-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.btk-main small { color: var(--text-muted); }
.btk-main em { font-style: normal; color: var(--text-secondary); overflow-wrap: anywhere; }
.btk-reach { padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 10px; margin-bottom: calc(10 * var(--rbu)); line-height: 1.45; }
.btk-reach.ok { background: rgba(46, 204, 113, .1); border: 1px solid rgba(46, 204, 113, .4); }
.btk-reach.warn { background: rgba(233, 185, 73, .1); border: 1px solid rgba(233, 185, 73, .45); }
.btk-reach a { margin-left: 6px; }
.btk-rep { margin: 0 0 calc(10 * var(--rbu)); padding: calc(6 * var(--rbu)) calc(10 * var(--rbu)); border-left: 2px solid var(--border-hover); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); max-height: 40vh; overflow: auto; }
.btk-rep cite { display: block; font-style: normal; color: var(--text-muted); margin-top: 4px; }
.btk-msgs { display: grid; gap: calc(8 * var(--rbu)); margin-bottom: calc(10 * var(--rbu)); }
.btk-m { padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); border-radius: 10px; border: 1px solid var(--border); max-width: 92%; }
.btk-m.team { justify-self: end; background: rgba(229, 38, 43, .08); border-color: rgba(229, 38, 43, .35); }
.btk-m.player { justify-self: start; background: var(--bg-card); }
.btk-mh { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.btk-mh span { color: var(--text-muted); font-size: .85em; }
.btk-m p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.btk-m small { display: block; margin-top: 4px; color: var(--text-muted); overflow-wrap: anywhere; }
.btk-sys { text-align: center; color: var(--text-muted); font-size: .85em; }
.btk-in { width: 100%; min-height: calc(90 * var(--rbu)); box-sizing: border-box; }
/* the board's language, on top (13.10) */
.rb-langbar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--rbu)); margin: 0 0 calc(12 * var(--rbu)); padding: calc(8 * var(--rbu)) calc(12 * var(--rbu)); border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.rb-langbar > span { font-weight: 700; color: var(--text-secondary); }
.rb-langbar button { border: 1px solid var(--border); background: transparent; color: var(--text-primary); font: 700 calc(14 * var(--rbu)) var(--f-body); padding: calc(7 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 999px; cursor: pointer; min-height: 36px; }
.rb-langbar button.on { background: var(--accent-gold, #e9b949); border-color: var(--accent-gold, #e9b949); color: #111; }
.rb-langbar small { color: var(--text-muted); flex-basis: 100%; }
/* the Referees' how-to on top of the Inbox */
.rb-howto { margin: calc(10 * var(--rbu)) 0; padding: calc(10 * var(--rbu)) calc(14 * var(--rbu)); border-radius: 12px; border: 1px solid rgba(93, 173, 236, .45); background: rgba(93, 173, 236, .07); }
.rb-howto summary { cursor: pointer; font-weight: 700; }
.rb-howto ol { margin: calc(8 * var(--rbu)) 0 0; padding-left: calc(20 * var(--rbu)); display: grid; gap: calc(4 * var(--rbu)); }
.rb-howto b { margin-right: 4px; }
.btk-closed summary { cursor: pointer; } .btk-closed .btk-list { margin-top: calc(8 * var(--rbu)); }

/* ---------- the Inbox card (21.10.2026, js/board.js rbClusterOpen): who and what → the player's words → the quick
   replies → the reply with "the player will read" → More → the reports. One clear path, every screen without sideways
   scroll (280 px phones to ultrawide) ---------- */
.rb-icard { display: grid; gap: calc(10 * var(--rbu)); min-width: 0; overflow-wrap: anywhere; }
.rb-icard.esc { border-color: rgba(233, 185, 73, .55); box-shadow: inset 3px 0 0 var(--accent-gold); }
.rb-icard.back { border-color: rgba(0, 210, 106, .45); }
.rb-icard .rb-ibh { align-items: baseline; }
.rb-icard .rb-k { font-size: calc(14 * var(--rbu)); padding: 0 calc(5 * var(--rbu)); line-height: 1.5; }
.rb-icard .rb-no { margin-right: 0; }
.rb-ibt { flex: 1 1 calc(220 * var(--rbu)); font-size: calc(15.5 * var(--rbu)) !important; line-height: 1.3; }
.rb-aitt { font-style: normal; margin-right: calc(5 * var(--rbu)); font-size: .85em; cursor: help; }
.rb-ibs { margin-left: auto; font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); white-space: nowrap; }
.rb-ibs .late { color: var(--accent-red); font-weight: 700; }
.rb-back { font-size: calc(11.5 * var(--rbu)); font-weight: 700; color: var(--accent-green); background: var(--accent-green-dim); border-radius: 999px; padding: 1px calc(8 * var(--rbu)); }
.rb-qt { display: grid; gap: calc(4 * var(--rbu)); padding: calc(2 * var(--rbu)) 0 0 calc(12 * var(--rbu)); border-left: 2px solid var(--border-hover); }
.rb-qt p { margin: 0; font-size: calc(14 * var(--rbu)); line-height: 1.5; color: var(--text-primary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.rb-qt p b { color: var(--text-secondary); font-weight: 700; margin-right: 2px; }
.rb-qm { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(10 * var(--rbu)); font-size: calc(12 * var(--rbu)); color: var(--text-muted); }
.rb-qm > span { margin-left: auto; }
.rb-qm a { color: var(--accent-cyan); }
.rb-trt { border: 0; background: none; padding: 0; font: inherit; font-size: calc(12 * var(--rbu)); color: var(--accent-cyan); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(56, 182, 255, .35); text-underline-offset: 3px; }
.rb-trt:hover { color: var(--text-primary); }
/* ⬆ for Damian: the reason first */
.rb-escbox { display: grid; gap: calc(4 * var(--rbu)); padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: var(--accent-gold-dim); border: 1px solid rgba(233, 185, 73, .45); }
.rb-esch { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(10 * var(--rbu)); }
.rb-esch b { color: var(--accent-gold); font-size: calc(13.5 * var(--rbu)); }
.rb-esch span, .rb-esch small { font-size: calc(12 * var(--rbu)); color: var(--text-secondary); }
.rb-esch .rb-x, .rb-esch small { margin-left: auto; }
.rb-escbox p { margin: 0; font-size: calc(14 * var(--rbu)); color: var(--text-primary); line-height: 1.45; }
/* the conversation, inline */
.rb-th { display: grid; gap: calc(6 * var(--rbu)); padding: calc(10 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: var(--bg-deep); border: 1px solid var(--border); }
.rb-th.new { border-color: rgba(233, 185, 73, .6); }
.rb-thh { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(10 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); }
.rb-thh span { color: var(--text-muted); }
.rb-thh .rb-x { margin-left: auto; }
.rb-thmore { color: var(--text-muted); font-size: calc(11.5 * var(--rbu)); }
.rb-tm { display: grid; gap: 2px; max-width: 92%; padding: calc(6 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(10 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); font-size: calc(13 * var(--rbu)); }
.rb-tm.team { justify-self: end; background: rgba(229, 38, 43, .08); border-color: rgba(229, 38, 43, .3); }
.rb-tmh { display: flex; flex-wrap: wrap; gap: calc(8 * var(--rbu)); align-items: baseline; font-size: calc(12 * var(--rbu)); }
.rb-tmh span { color: var(--text-muted); }
.rb-tm p { margin: 0; white-space: pre-wrap; line-height: 1.45; color: var(--text-primary); }
/* the quick replies: one tile each, the decision in plain words under it, the AI's pick marked */
.rb-qrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(150 * var(--rbu))), 1fr)); gap: calc(6 * var(--rbu)); }
.rb-qr { display: grid; align-content: start; gap: calc(3 * var(--rbu)); min-width: 0; text-align: left; padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(10 * var(--rbu)); border: 1px solid var(--border-hover); background: var(--bg-elevated); color: var(--text-primary); font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.rb-qr:hover { border-color: rgba(255, 255, 255, .4); }
.rb-qr b { font-size: calc(13 * var(--rbu)); font-weight: 700; line-height: 1.3; }
.rb-qr small { font-size: calc(11.5 * var(--rbu)); color: var(--text-secondary); line-height: 1.3; }
.rb-qr small i { font-style: normal; font-weight: 800; color: var(--accent-gold); }
.rb-qr.ai { border-color: rgba(233, 185, 73, .75); }
.rb-qr.on { background: var(--accent-gold-dim); border-color: var(--accent-gold); }
.rb-qr:focus-visible, .rb-pick-i:focus-visible, .rb-trt:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.rb-aihint { margin: calc(-2 * var(--rbu)) 0 0; font-size: calc(12 * var(--rbu)); color: var(--text-secondary); line-height: 1.4; }
.rb-aihint span { font-weight: 800; color: var(--accent-gold); margin-right: 2px; }
/* the reply: your words → what the player reads → to whom → send */
.rb-cmp { display: grid; gap: calc(6 * var(--rbu)); min-width: 0; padding: calc(10 * var(--rbu)) calc(12 * var(--rbu)); border-radius: calc(12 * var(--rbu)); background: var(--bg-deep); border: 1px solid rgba(56, 182, 255, .35); }
.rb-cmp.idle { padding: 0; border: 0; background: none; }
.rb-cmp.idle textarea { min-height: calc(40 * var(--rbu)); resize: none; overflow: hidden; }
.rb-cmp-h { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--rbu)) calc(10 * var(--rbu)); }
.rb-cmp-h b { font-size: calc(14 * var(--rbu)); color: var(--text-primary); }
.rb-cmp-h span { font-size: calc(12.5 * var(--rbu)); color: var(--accent-gold); font-weight: 700; }
.rb-cmp-h .rb-x { margin-left: auto; }
.rb-cmp label, .rb-cmp-out label { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--rbu)) calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); font-weight: 700; color: var(--text-secondary); }
.rb-cmp label small { font-weight: 600; color: var(--text-muted); }
.rb-cmp-out { display: grid; gap: calc(6 * var(--rbu)); }
.rb-cmp-out label .rb-trt { margin-left: auto; font-weight: 600; }
.rb-cmp-out textarea { border-color: rgba(0, 210, 106, .5); background: rgba(0, 210, 106, .04); }
.rb-cmp textarea { width: 100%; min-height: calc(64 * var(--rbu)); box-sizing: border-box; }
.rb-cmp .rb-in { width: 100%; box-sizing: border-box; }
.rb-cmp-st { min-height: 1em; font-size: calc(12 * var(--rbu)); color: var(--accent-gold); }
.rb-cmp-st:empty { display: none; }
.rb-cmp-then { align-items: center !important; }
.rb-cmp-then .rb-sel { flex: 1 1 calc(200 * var(--rbu)); min-width: 0; max-width: 100%; font-weight: 600; }
.rb-cmp-to { margin: 0; font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); line-height: 1.4; }
.rb-cmp-to b { color: var(--text-primary); }
.rb-cmp .rb-acts { margin-top: calc(2 * var(--rbu)); }
/* More: smaller, one line that wraps */
.rb-more { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--rbu)); }
.rb-more > span { font-size: calc(11 * var(--rbu)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: calc(2 * var(--rbu)); }
.rb-more .rb-x { font-weight: 600; }
.rb-more .rb-site { margin-left: 0; border-radius: var(--radius-sm); padding: calc(5 * var(--rbu)) calc(10 * var(--rbu)); }
.rb-x.ai { border-color: rgba(233, 185, 73, .75); }
.rb-icard .rb-q { margin-top: 0; }
.rb-icard .rb-q > summary { padding: 5px 0; }
.rb-icard .rb-q blockquote { overflow-wrap: anywhere; }
.rb-icard .rb-q .rb-trt { display: inline; }
.rb-ren { flex: 1 1 calc(200 * var(--rbu)); min-width: 0; }
.rb-icard .rb-sf-files, .rb-icard .rb-sf-card { margin: 0; }
/* a list to pick from (a known problem by game system, another report, a reason to close) */
.rb-pick-bd { align-items: start; padding-top: max(calc(16 * var(--rbu)), 6vh); }
.rb-pick { width: min(100%, calc(600 * var(--rbu))); max-height: min(84vh, calc(760 * var(--rbu))); display: flex; flex-direction: column; gap: calc(8 * var(--rbu)); background: var(--bg-deep); border: 1px solid var(--border); border-radius: calc(14 * var(--rbu)); padding: calc(14 * var(--rbu)); box-shadow: var(--shadow); min-width: 0; }
.rb-pick-h { display: flex; align-items: center; gap: calc(10 * var(--rbu)); }
.rb-pick-h h3 { flex: 1; min-width: 0; color: var(--text-primary); font-size: calc(16 * var(--rbu)); }
.rb-pick-p { margin: 0; color: var(--text-secondary); font-size: calc(13 * var(--rbu)); line-height: 1.4; }
.rb-pick-q { width: 100%; box-sizing: border-box; font-size: calc(14 * var(--rbu)) !important; }
.rb-pick-l { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: calc(10 * var(--rbu)); min-height: 0; padding-right: 2px; }
.rb-pick-g { display: grid; gap: calc(3 * var(--rbu)); }
.rb-pick-g > b { font-size: calc(11.5 * var(--rbu)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 calc(4 * var(--rbu)); }
.rb-pick-g > b small { font-weight: 700; letter-spacing: 0; margin-left: 4px; }
.rb-pick-i { display: grid; gap: 2px; width: 100%; text-align: left; padding: calc(8 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(8 * var(--rbu)); border: 1px solid transparent; background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer; min-height: 36px; }
.rb-pick-i:hover { border-color: var(--border-hover); }
.rb-pick-i span { font-size: calc(13.5 * var(--rbu)); font-weight: 600; line-height: 1.3; }
.rb-pick-i small { font-size: calc(11.5 * var(--rbu)); color: var(--text-muted); }
.rb-pick-i.ai { border-color: rgba(233, 185, 73, .75); }
.rb-pick-i[hidden], .rb-pick-g[hidden] { display: none; }
.rb-pick-none { margin: 0; color: var(--text-muted); font-size: calc(13 * var(--rbu)); text-align: center; padding: calc(12 * var(--rbu)); }
.bub-f textarea { padding: calc(9 * var(--rbu)) calc(10 * var(--rbu)); border-radius: calc(8 * var(--rbu)); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: calc(14 * var(--rbu)); resize: vertical; min-height: calc(70 * var(--rbu)); }
/* the quick replies' texts (settings) */
.rb-set-p { margin: 0 0 calc(8 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); color: var(--text-secondary); line-height: 1.45; }
.rb-rpls { display: grid; gap: calc(10 * var(--rbu)); }
.rb-rpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(260 * var(--rbu))), 1fr)); gap: calc(6 * var(--rbu)) calc(10 * var(--rbu)); padding: calc(10 * var(--rbu)); border-radius: calc(10 * var(--rbu)); background: var(--bg-deep); border: 1px solid var(--border); }
.rb-rpl > b { grid-column: 1 / -1; color: var(--text-primary); font-size: calc(13.5 * var(--rbu)); }
.rb-rpl > b small { color: var(--accent-gold); font-weight: 700; margin-left: 6px; }
.rb-rpl label { display: grid; gap: calc(4 * var(--rbu)); font-size: calc(12 * var(--rbu)); color: var(--text-muted); }
.rb-rpl textarea { min-height: calc(104 * var(--rbu)); }
.btk-l { display: block; margin: calc(8 * var(--rbu)) 0 calc(4 * var(--rbu)); font-size: calc(12.5 * var(--rbu)); font-weight: 700; color: var(--text-secondary); }
.btk-l small { font-weight: 600; color: var(--text-muted); }
#btk-out { border-color: rgba(0, 210, 106, .5); background: rgba(0, 210, 106, .04); }
@media (pointer: coarse), (max-width: 900px) {
    .rb-qr { min-height: calc(48 * var(--rbu)); }
    .rb-trt { min-height: 24px; display: inline-flex; align-items: center; }
    .rb-pick-i { min-height: 44px; }
    .bub-sec .rb-cat.rb-fold { min-height: 28px; }   /* the menu's group headers (landscape tablets: fingers, wide screen) */
}
@media (max-width: 600px) {
    .rb-icard { padding: calc(10 * var(--rbu)) calc(10 * var(--rbu)); }
    .rb-ibs { margin-left: 0; flex-basis: 100%; }
    .rb-qm > span { margin-left: 0; }
    .rb-qt { padding-left: calc(9 * var(--rbu)); }
    .rb-qrs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); }
    .rb-qr { padding: 8px 9px; }
    .rb-cmp.idle textarea { min-height: 58px; }
    .rb-tm { max-width: 100%; }
    .rb-pick-bd { padding: calc(8 * var(--rbu)); }
    .rb-pick { max-height: 92vh; padding: calc(12 * var(--rbu)); }
}