/* Build xonasi — GitLab CI/CD pipeline'lar (build-room.js). Tokenlar base.css dan.
   Rang faqat holatni bildiradi: running — --info (pulsatsiya), success — --ok, failed — --err,
   canceled/skipped — --muted, stale — --warn, pending — --st-idle. */

/* ---------------- Xona yorlig'i: belgi va halqa ---------------- */
.fp-room[data-location="lead-build"] > .fp-head.ci-click{cursor:pointer}
.fp-head .ci-badge{--lv:var(--st-idle); font:600 10px/1 var(--font-mono); padding:2px 5px; margin-left:4px; border-radius:8px; white-space:nowrap;
  color:var(--lv); background:color-mix(in srgb, var(--lv) 14%, transparent)}
.fp-head .ci-badge[data-l="running"]{--lv:var(--info); animation:mtPulse 2s ease-in-out infinite}
.fp-head .ci-badge[data-l="success"]{--lv:var(--ok)}
.fp-head .ci-badge[data-l="failed"]{--lv:var(--err)}
.fp-head .ci-badge[data-l="stale"]{--lv:var(--warn)}
.fp-head .ci-badge[data-l="canceled"],.fp-head .ci-badge[data-l="skipped"]{--lv:var(--muted)}
.fp-room[data-ci="running"] > .fp-head{box-shadow:0 4px 14px var(--iso-label-shd, rgba(15,28,52,.18)), 0 0 0 2px var(--info)}
.fp-room[data-ci="failed"] > .fp-head{box-shadow:0 4px 14px var(--iso-label-shd, rgba(15,28,52,.18)), 0 0 0 2px var(--err)}
.fp-room[data-ci="stale"] > .fp-head{box-shadow:0 4px 14px var(--iso-label-shd, rgba(15,28,52,.18)), 0 0 0 2px var(--warn)}

/* ---------------- Toolbar tugmasi: holat nuqtasi ---------------- */
.ci-btn{position:relative}
.ci-btn[data-ci]:not([data-ci=""])::after{content:""; position:absolute; right:3px; top:3px; width:7px; height:7px; border-radius:50%;
  background:var(--st-idle); box-shadow:0 0 0 2px var(--topbar-bg, #14223c)}
.ci-btn[data-ci="running"]::after{background:var(--info); animation:mtPulse 1.6s ease-in-out infinite}
.ci-btn[data-ci="success"]::after{background:var(--ok)}
.ci-btn[data-ci="failed"]::after{background:var(--err); animation:ledBlink 1s steps(2) infinite}
.ci-btn[data-ci="stale"]::after{background:var(--warn)}
.ci-btn[data-ci="canceled"]::after,.ci-btn[data-ci="skipped"]::after{background:var(--muted)}

/* ---------------- Panel ---------------- */
.ci-panel{width:420px}
.ci-projects{display:flex; flex-wrap:wrap; gap:4px; padding:8px 10px 0}
.ci-chip{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:500 11.5px/1 var(--font-ui, inherit); padding:5px 8px; border-radius:12px; cursor:pointer}
.ci-chip em{font-style:normal; font:600 10px/1 var(--font-mono); color:var(--info)}
.ci-chip[aria-pressed="true"]{background:var(--chip-on); border-color:var(--chip-on); color:var(--chip-on-text)}
.ci-chip[aria-pressed="true"] em{color:var(--chip-on-text)}
.ci-body{overflow:auto; padding:8px 10px 10px; display:flex; flex-direction:column; gap:8px}
.ci-body code{font:500 11px/1.4 var(--font-mono); background:var(--chip); padding:0 4px; border-radius:4px}

/* Pipeline kartasi: chap chegara — holat rangi */
.ci-card{--lv:var(--st-idle); border:1px solid var(--line); border-left:3px solid var(--lv); border-radius:var(--r-sm);
  padding:9px 11px; background:var(--panel)}
.ci-card[data-l="running"]{--lv:var(--info)}
.ci-card[data-l="success"]{--lv:var(--ok)}
.ci-card[data-l="failed"]{--lv:var(--err); background:color-mix(in srgb, var(--err) 4%, var(--panel))}
.ci-card[data-l="stale"]{--lv:var(--warn)}
.ci-card[data-l="canceled"],.ci-card[data-l="skipped"]{--lv:var(--muted); opacity:.85}
.ci-card[data-l="pending"]{--lv:var(--line-2)}
.ci-ch{display:flex; align-items:center; gap:8px; min-width:0}
.ci-dot{width:9px; height:9px; border-radius:50%; background:var(--lv); flex:none}
.ci-card[data-l="running"] .ci-dot{animation:mtPulse 1.6s ease-in-out infinite}
.ci-proj{font:600 11.5px/1.2 var(--font-mono); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.ci-pill{font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:10px; white-space:nowrap; color:var(--lv);
  background:color-mix(in srgb, var(--lv) 14%, transparent)}
.ci-ago{margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap}
.ci-title{margin:6px 0 0; font-size:13.5px; font-weight:700; color:var(--heading); overflow-wrap:anywhere}
.ci-desc{margin:4px 0 0; font-size:11.5px}
.ci-desc summary{cursor:pointer; color:var(--muted); font-weight:600}
.ci-desc pre{margin:4px 0 0; padding:6px 8px; white-space:pre-wrap; overflow-wrap:anywhere; font:400 12px/1.45 var(--font-ui, inherit);
  color:var(--text); background:var(--panel-2); border-radius:var(--r-xs); max-height:160px; overflow:auto}
.ci-commit{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 0; font-size:11.5px; min-width:0}
.ci-sha{font:600 11px/1.2 var(--font-mono); color:var(--info); text-decoration:none}
.ci-sha:hover{text-decoration:underline}
.ci-branch{color:var(--muted); font-family:var(--font-mono); font-size:11px; overflow-wrap:anywhere}
.ci-author{color:var(--muted)}
.ci-stale{margin:8px 0 0; padding:6px 8px; border-radius:var(--r-xs); font-size:11.5px; color:var(--text);
  background:color-mix(in srgb, var(--warn) 12%, transparent)}

/* Stage stepper: gorizontal qadamlar, yuqori chiziq — stage holati */
.ci-stages{list-style:none; margin:10px 0 0; padding:0; display:flex; gap:4px}
.ci-stage{--sc:var(--st-idle); position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:6px 6px 5px; border-radius:var(--r-xs); background:var(--surface-3); overflow:hidden}
.ci-stage::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--sc)}
.ci-stage[data-s="success"]{--sc:var(--ok)}
.ci-stage[data-s="failed"]{--sc:var(--err); background:color-mix(in srgb, var(--err) 10%, var(--surface-3))}
.ci-stage[data-s="running"]{--sc:var(--info)}
.ci-stage[data-s="pending"],.ci-stage[data-s="created"],.ci-stage[data-s="manual"]{--sc:var(--line-2)}
.ci-stage[data-s="canceled"],.ci-stage[data-s="skipped"]{--sc:var(--muted); opacity:.75}
.ci-stage[data-s="running"]::before{background:repeating-linear-gradient(90deg, var(--info) 0 8px,
  color-mix(in srgb, var(--info) 40%, transparent) 8px 16px); background-size:32px 100%; animation:ciStripe .9s linear infinite}
@keyframes ciStripe{to{background-position:32px 0}}
.ci-si{font:700 11px/1 var(--font-mono); color:var(--sc)}
.ci-sn{max-width:100%; font-size:11px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ci-sn a{color:inherit; text-decoration:none} a.ci-sn:link,a.ci-sn:visited{color:inherit; text-decoration:none}
.ci-sn a:hover,a.ci-sn:hover{text-decoration:underline}
.ci-sd{font:400 10.5px/1 var(--font-mono); color:var(--muted); white-space:nowrap}

/* Karta pastki qatori */
.ci-cf{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 0; font-size:11px; color:var(--muted)}
.ci-cf a{color:var(--info); text-decoration:none} .ci-cf a:hover{text-decoration:underline}
.ci-total{font-family:var(--font-mono); color:var(--ink)}
.ci-env{font:600 10.5px/1 var(--font-mono); padding:2px 7px; border-radius:10px; color:var(--ok);
  background:color-mix(in srgb, var(--ok) 14%, transparent)}

@media (prefers-reduced-motion: reduce){
  .fp-head .ci-badge[data-l="running"], .ci-btn[data-ci]::after, .ci-card .ci-dot, .ci-stage[data-s="running"]::before{animation:none}
}
@media (max-width:480px){ .ci-panel{width:calc(100vw - 16px)} .ci-stages{flex-wrap:wrap} .ci-stage{flex:1 1 72px} }