/* status.html, tab «Ветки и релизы» (js/releases.js). Everything here is rb-, so status.css never meets it. */

.st-tabs { display: flex; gap: var(--s-1); background: var(--raised); border-radius: var(--r-pill); padding: 4px; width: fit-content; max-width: 100%; }
.st-tabs a { font: 500 14px/20px var(--font-ui); color: var(--text-2); border-radius: var(--r-pill); padding: 6px 16px; white-space: nowrap; }
.st-tabs a:hover { text-decoration: none; color: var(--text); }
.st-tabs a.on { background: var(--fill-strong); color: var(--text); }
/* the tabs are an admin's (status.js, releases.js mark <body> after the first answer): until then, and for anyone
   else, the page is the gate's one line, whatever the address says */
body.is-admin.tab-releases #gate, body.is-admin.tab-releases #board, body.is-admin.tab-releases #fresh { display: none !important; }
body:not(.is-admin.tab-releases) #releasesTab { display: none; }
#releasesTab { display: grid; gap: var(--s-4); }

.rb-code { font: 500 12px/16px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); background: var(--fill); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.rb-panel { background: var(--raised); border-radius: var(--r-l); padding: var(--s-5); min-width: 0; }
.rb-panel h2 { font: 600 17px/24px var(--font-ui); margin: 0; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.rb-n { color: var(--text-3); font-weight: 400; }
.rb-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.rb-head a { font: var(--t-small); }
.rb-gap { flex: 1; }
.rb-none { color: var(--text-3); font: var(--t-small); margin: 0; padding: var(--s-2) 0; }
.rb-faint { color: var(--text-3); }
.rb-pill { font: var(--t-caption); padding: 3px 9px; border-radius: var(--r-pill); background: var(--fill); color: var(--text-2); white-space: nowrap; }
.rb-pill.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.rb-pill.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.rb-pill.blue { background: var(--accent-soft); color: var(--accent); }

/* two sites */
.rb-sites { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.rb-site { background: var(--raised); border-radius: var(--r-l); padding: var(--s-4) var(--s-5) var(--s-5); cursor: pointer; transition: background var(--d-1); }
.rb-site:hover { background: var(--fill); }
.rb-site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); color: var(--text-2); font: var(--t-small); }
.rb-site-rel { font: 600 26px/32px var(--font-ui); letter-spacing: -.01em; margin: var(--s-2) 0 2px; }
.rb-site-sub { font: var(--t-small); color: var(--text-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* rows: a task, a release item or a branch */
.rb-rows { list-style: none; margin: 0; padding: 0; }
.rb-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: 10px var(--s-2); margin: 0 calc(-1 * var(--s-2)); border-radius: var(--r-s); transition: background var(--d-1); }
.rb-row[data-task] { cursor: pointer; }
.rb-row[data-task]:hover { background: var(--fill); }
.rb-row + .rb-row { box-shadow: 0 -1px 0 var(--hairline); }
.rb-row[data-task]:hover, .rb-row[data-task]:hover + .rb-row { box-shadow: none; }
.rb-kd { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }
.k-new { --c: var(--accent); } .k-fix { --c: var(--warn); } .k-internal { --c: var(--text-3); }
.rb-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-row.k-internal .rb-t { color: var(--text-2); }
.rb-m { font: var(--t-small); color: var(--text-3); white-space: nowrap; }
.rb-b { grid-column: 2 / 4; font: var(--t-small); color: var(--text-3); display: flex; gap: 8px; align-items: center; }
.rb-legend { display: flex; gap: var(--s-3); font: var(--t-small); color: var(--text-3); flex-wrap: wrap; }
.rb-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* releases: a chart to pick one, its contents below */
.rb-chart { overflow-x: auto; margin: 0 calc(-1 * var(--s-2)); }
.rb-chart svg { display: block; font-family: var(--font-ui); }
.rb-bar { cursor: pointer; }
.rb-bar .rb-bg { fill: transparent; transition: fill var(--d-1); }
.rb-bar:hover .rb-bg { fill: var(--fill); }
.rb-bar.on .rb-bg { fill: var(--fill); stroke: var(--hairline); }
.rb-detail { margin-top: var(--s-4); padding-top: var(--s-4); box-shadow: 0 -1px 0 var(--hairline); }
.rb-detail h3 { font: var(--t-title); margin: 0; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.rb-sub { font: var(--t-small); color: var(--text-3); margin: 4px 0 var(--s-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.rb-how > summary { list-style: none; cursor: pointer; font: var(--t-small); color: var(--text-3); }
.rb-how > summary::-webkit-details-marker { display: none; }
.rb-how > summary:hover { color: var(--text-2); }
.rb-how-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-3) var(--s-5); margin-top: var(--s-4); font: var(--t-small); color: var(--text-2); }
.rb-how-grid .rb-code { margin-right: 6px; }
.rb-how-grid .rb-kd { margin: 0 4px 0 2px; }
.rb-wide { grid-column: 1 / -1; color: var(--text-3); }

/* a task's side panel */
#rbScrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transition: opacity var(--d-3); z-index: 30; }
#rbSide { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--raised); box-shadow: var(--shadow-float);
  transform: translateX(104%); transition: transform var(--d-5) var(--ease-sheet); z-index: 31; overflow-y: auto; padding: var(--s-6) var(--s-5); }
body.rb-side-on #rbScrim { opacity: 1; pointer-events: auto; }
body.rb-side-on #rbSide { transform: none; }
.rb-x { position: absolute; top: var(--s-4); right: var(--s-4); background: var(--fill); color: var(--text-2); border: 0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
#rbSide h3 { font: var(--t-title); margin: var(--s-2) 40px var(--s-3) 0; }
#rbSide h4 { font: var(--t-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); margin: var(--s-6) 0 var(--s-3); }
.rb-kindline { font: var(--t-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--c); }
.rb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rb-steps div { background: var(--fill); border-radius: var(--r-m); padding: 10px 12px; font: var(--t-small); color: var(--text-3); }
.rb-steps div b { display: block; color: var(--text); font-weight: 600; }
.rb-steps .done { box-shadow: inset 0 2px 0 var(--c); } .rb-steps .here { box-shadow: inset 0 0 0 1.5px var(--c); }
.rb-steps .todo b { color: var(--text-3); }
.rb-steps .p1 { --c: var(--accent); } .rb-steps .p2 { --c: var(--warn); } .rb-steps .p3 { --c: var(--good); }
.rb-commits { list-style: none; margin: 0; padding: 0; }
.rb-commits li { display: grid; grid-template-columns: 72px 1fr; gap: 2px var(--s-2); padding: var(--s-2) 0; font: var(--t-small); }
.rb-commits li + li { box-shadow: 0 -1px 0 var(--hairline); }
.rb-commits .w { grid-column: 2; color: var(--text-3); }
.rb-cmd { background: var(--fill); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); font: 12px/18px ui-monospace, Menlo, monospace; white-space: pre-wrap; color: var(--text-2); margin: 0; }

@media (max-width: 820px) {
  .rb-sites { grid-template-columns: 1fr; }
  .rb-m { display: none; }
  .rb-steps { grid-template-columns: 1fr; }
}