/* ============================================================
   Pipeline Runner — design tokens
   Paleta wyciagnieta 1:1 z brand/buddy-mark.svg
   Nie dodawaj kolorow poza tym plikiem.
   ============================================================ */
:root {
  /* --- Marka: facety heksagonu, od najciemniejszego do cyan --- */
  --bd-blue-700: #1A67FD;
  --bd-blue-600: #1877FD;
  --bd-blue-500: #1A86FD;  /* primary — kolor bryly marka */
  --bd-blue-400: #0DA7FE;
  --bd-cyan-300: #05BBFF;
  --bd-cyan-200: #00C9FF;
  --bd-ice:      #D6FFFF;  /* najjasniejszy akcent z marka */
  --bd-ink:      #0A0D16;  /* wordmark / tekst */

  /* --- Neutralne, wyprowadzone z --bd-ink (ten sam hue) --- */
  --bd-n-900: #0A0D16;
  --bd-n-800: #141926;
  --bd-n-700: #1E2436;
  --bd-n-600: #2C3450;
  --bd-n-500: #4A5578;
  --bd-n-400: #7C87A8;
  --bd-n-300: #B4BDD4;
  --bd-n-200: #DCE2EE;
  --bd-n-100: #EEF2F9;
  --bd-n-050: #F7F9FC;
  --bd-white: #FFFFFF;

  /* --- Semantyczne (CI/CD: pass / fail / pending) --- */
  --bd-pass:  #16C79A;
  --bd-warn:  #FFB020;

  /* Kolor akcji "Wait for approval" z Buddy'ego. Nie jest czescia palety marki,
     ale jest czescia jezyka produktu: tak wyglada ta akcja w pipeline'ach. */
  --bd-approve-1: #F869C8;
  --bd-approve-2: #EE3897;

  /* Kolory pozostalych akcji Buddy'ego uzywanych jako pickupy w grach:
     publish artifact (zolto-pomaranczowy) i sandbox (zielony). */
  --bd-artifact-1: #FFD500;
  --bd-artifact-2: #FF8600;
  --bd-sandbox:    #6AD147;

  /* Kolory kropek statusu z Buddy'ego (status_icon_success / _failed). To one
     stoja przy akcjach w widoku runa, wiec gra uzywa dokladnie tych samych. */
  --bd-status-ok:   #22CE5B;
  --bd-status-fail: #F20D69;
  --bd-fail:  #FF4D5E;

  /* --- Gradienty marki --- */
  --bd-grad-mark: linear-gradient(135deg, var(--bd-blue-700) 0%, var(--bd-blue-500) 45%, var(--bd-cyan-200) 100%);
  --bd-grad-sky:  linear-gradient(180deg, var(--bd-ice) 0%, var(--bd-n-050) 100%);
  --bd-grad-deep: linear-gradient(180deg, var(--bd-n-900) 0%, var(--bd-n-700) 100%);

  /* --- Role semantyczne: LIGHT (default) --- */
  --bg:          var(--bd-n-050);
  --bg-elev:     var(--bd-white);
  --bg-sunk:     var(--bd-n-100);
  --fg:          var(--bd-n-900);
  --fg-muted:    var(--bd-n-500);
  --fg-faint:    var(--bd-n-400);
  --border:      var(--bd-n-200);
  --border-strong: var(--bd-n-300);
  --accent:      var(--bd-blue-500);
  --accent-fg:   var(--bd-white);
  --accent-soft: rgba(26, 134, 253, 0.10);
  --ring:        rgba(26, 134, 253, 0.45);
  --shadow-sm:   0 1px 2px rgba(10, 13, 22, 0.06), 0 1px 3px rgba(10, 13, 22, 0.10);
  --shadow-md:   0 4px 12px rgba(10, 13, 22, 0.08), 0 2px 4px rgba(10, 13, 22, 0.06);
  --shadow-lg:   0 18px 40px rgba(10, 13, 22, 0.14);

  /* --- Skala / rytm --- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Role semantyczne: DARK --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--bd-n-900);
    --bg-elev:     var(--bd-n-800);
    --bg-sunk:     #070A11;
    --fg:          var(--bd-n-100);
    --fg-muted:    var(--bd-n-400);
    --fg-faint:    var(--bd-n-500);
    --border:      var(--bd-n-700);
    --border-strong: var(--bd-n-600);
    --accent:      var(--bd-blue-400);
    --accent-fg:   var(--bd-n-900);
    --accent-soft: rgba(13, 167, 254, 0.14);
    --ring:        rgba(13, 167, 254, 0.50);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
    --shadow-md:   0 4px 14px rgba(0,0,0,.5);
    --shadow-lg:   0 18px 44px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg: var(--bd-n-900); --bg-elev: var(--bd-n-800); --bg-sunk: #070A11;
  --fg: var(--bd-n-100); --fg-muted: var(--bd-n-400); --fg-faint: var(--bd-n-500);
  --border: var(--bd-n-700); --border-strong: var(--bd-n-600);
  --accent: var(--bd-blue-400); --accent-fg: var(--bd-n-900);
  --accent-soft: rgba(13,167,254,.14); --ring: rgba(13,167,254,.50);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.6);
}

/* ============================================================
   Baza + wspolne komponenty UI (uzywaj ich, nie pisz wlasnych)
   ============================================================ */
* { box-sizing: border-box; }
/* Komponenty typu .bd-btn maja display: inline-flex, ktore bije domyslne [hidden]
   z UA stylesheet — bez tego przycisk z atrybutem hidden nadal sie renderuje. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--bg-elev); color: var(--fg);
  font: inherit; font-weight: 600; cursor: pointer; user-select: none;
  box-shadow: var(--shadow-sm); transition: transform .12s var(--ease), background .15s, border-color .15s;
}
.bd-btn:hover { border-color: var(--border-strong); }
.bd-btn:active { transform: translateY(1px) scale(.985); }
.bd-btn--primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.bd-btn--ghost { background: transparent; box-shadow: none; }
.bd-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.bd-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.bd-hud {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-pill); box-shadow: var(--shadow-md); padding: 8px 6px;
}
.bd-hud__cell { padding: 2px 18px; text-align: center; border-right: 1px solid var(--border); }
.bd-hud__cell:last-child { border-right: 0; }
.bd-hud__k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); font-weight: 700; }
.bd-hud__v { font-family: var(--mono); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-mark { width: 32px; height: 36px; display: block; flex: none; }

.bd-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px); z-index: 40; text-align: center; padding: 24px;
}
.bd-overlay[hidden] { display: none; }
/* fixed + offsety: absolute bez offsetow laduje w normalnym flow i rozpycha dokument
   (np. o 16 px pod layoutem na 100dvh, co daje pasek przewijania z niczego). */
.bd-sr { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html,body{height:100%}body{display:flex;flex-direction:column;min-height:100%;min-height:100dvh;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.topbar{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg-elev)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand [data-bd-mark]{display:block;flex:none}.brand__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}.brand__txt .brand__h1{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}.brand__txt small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}.hud{margin-left:auto;padding:6px 4px}.bd-hud__cell{padding:2px 14px}.bd-hud__v{font-size:17px}.bd-hud__v--stage{font-size:13px;letter-spacing:.08em;font-weight:700}.bd-hud__v--stage[data-stage="0"]{color:var(--bd-blue-700)}.bd-hud__v--stage[data-stage="1"]{color:var(--bd-blue-600)}.bd-hud__v--stage[data-stage="2"]{color:var(--bd-blue-500)}.bd-hud__v--stage[data-stage="3"]{color:var(--bd-blue-400)}.bd-hud__v--stage[data-stage="4"]{color:var(--bd-cyan-300)}.bd-hud__v--buffer{font-family:var(--mono);color:var(--bd-blue-500)}.tools{display:flex;align-items:center;gap:8px;flex:none}.bd-btn--icon{min-width:44px;padding:0 12px;font-size:17px;font-weight:700}#btn-mute[aria-pressed=true]{background:var(--bg-sunk);color:var(--fg-faint);border-color:var(--border)}#btn-mute[aria-pressed=true] .mute-icon{text-decoration:line-through}body.is-embed [data-nav]{display:none!important}.stage{position:relative;flex:1 1 auto;min-height:0;background:var(--bg)}#game{display:block;width:100%;height:100%;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}.screen{padding:16px}.panel{width:min(420px,100%);padding:26px 24px;display:flex;flex-direction:column;align-items:center;gap:14px}.panel--wide{width:min(520px,100%);align-items:stretch;text-align:left}.panel__mark{display:block}.panel__mark .bd-mark{width:46px;height:51px}.panel h2{font-size:26px}.panel__lead{margin:0;color:var(--fg-muted);max-width:30ch}.panel__cta{min-width:180px;font-size:17px;letter-spacing:.06em}.panel__hint{margin:0;font-size:12px;color:var(--fg-faint);line-height:1.7}.panel__best{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}.panel__best b{font-family:var(--mono);font-size:15px;color:var(--fg);margin-left:6px}.panel__row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.panel__badge{margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;padding:6px 14px;border-radius:var(--r-pill)}.panel__badge--fail{color:var(--bd-fail);background:color-mix(in srgb,var(--bd-fail) 14%,transparent)}.panel__badge--warn{color:var(--bd-warn);background:color-mix(in srgb,var(--bd-warn) 16%,transparent)}.panel__h2--tight{font-size:22px}.panel__registry{margin:0;font-size:11px;letter-spacing:.04em;color:var(--fg-faint);font-family:var(--mono)}.panel__new{margin:0;font-size:15px;font-weight:800;letter-spacing:.1em;color:var(--bd-pass)}.scores{display:flex;gap:6px;width:100%}.scores>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;background:var(--bg-sunk);border-radius:var(--r-md)}.scores span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}.scores b{font-family:var(--mono);font-size:22px;font-variant-numeric:tabular-nums}.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}.rules li{display:block;padding-left:24px;text-indent:-24px;font-size:13.5px;line-height:1.6;color:var(--fg-muted)}.nw{white-space:nowrap}html[data-input=keys] [data-input=touch],html[data-input=touch] [data-input=keys]{display:none}.rules b{color:var(--fg);white-space:nowrap}.dot{display:inline-block;flex:none;width:14px;height:14px;border-radius:4px;margin-right:10px;vertical-align:-2px;text-indent:0}.dot--fail{background:var(--bd-status-fail);border-radius:50%}.dot--warn{background:var(--bd-warn)}.dot--blue{background:var(--bd-blue-400)}.dot--merge{background:linear-gradient(135deg,var(--bd-fail),var(--bd-warn))}.dot--pass{background:var(--bd-status-ok);border-radius:50%}.dot--cache{background:var(--bd-grad-mark);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0}.dot--gate{background:linear-gradient(135deg,var(--bd-approve-1),var(--bd-approve-2));border-radius:50%}.dot--review{background:linear-gradient(135deg,var(--bd-cyan-300),var(--bd-blue-400));border-radius:50%}.dot--b0{background:var(--bd-blue-700);border-radius:50%}.dot--b1{background:var(--bd-blue-600);border-radius:50%}.dot--b2{background:var(--bd-blue-500);border-radius:50%}.dot--b3{background:var(--bd-blue-400);border-radius:50%}.dot--b4{background:var(--bd-cyan-300);border-radius:50%}.rules--tight{margin:2px 0 6px}.dot--scale{background:var(--bd-blue-500);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bd-ice) 70%,transparent)}.dot--shot{background:var(--bd-grad-mark);clip-path:polygon(0 0,100% 50%,0 100%,35% 50%);border-radius:0}.dot--sandbox{background:transparent;border:2px dashed var(--bd-cyan-300);border-radius:50%}.dot--artifact{background:var(--bd-grad-mark);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0;opacity:.85}kbd{font:600 11px/1 var(--mono);padding:3px 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;background:var(--bg-elev);color:var(--fg)}@media(max-width:620px){.topbar{flex-wrap:wrap;gap:8px 10px;padding:8px 10px}.brand__txt small{display:none}.tools{margin-left:auto}.nav-link{display:none}.hud{order:3;width:100%;margin-left:0;justify-content:space-between}.bd-hud__cell{padding:2px 8px;flex:1}.bd-hud__v{font-size:15px}.panel{padding:22px 18px}.panel h2{font-size:22px}.scores b{font-size:19px}}@media(max-width:620px){.panel__row .nav-link{display:inline-flex}}body.is-embed .panel__row .nav-link{display:none!important}@media(max-height:420px){.brand__txt{display:none}.panel{padding:16px;gap:10px}.panel__mark,.panel__hint{display:none}}.gate{max-width:340px}.gate__timer{display:flex;flex-direction:column;gap:6px;width:100%}.gate__track{height:8px;border-radius:99px;background:color-mix(in srgb,var(--fg) 14%,transparent);overflow:hidden}.gate__bar{display:block;height:100%;width:100%;border-radius:99px;background:var(--bd-warn);transition:width 90ms linear}.gate__count{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--fg-muted)}.gate__approve{min-width:160px;min-height:48px}.gate__code{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.gate__label{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}.gate__digits{margin:0;font-size:38px;font-weight:800;letter-spacing:.22em;line-height:1.1;color:var(--fg)}.gate__entry{margin:0;font-size:26px;font-weight:700;letter-spacing:.22em;color:var(--accent)}.gate__entry.is-wrong{color:var(--bd-fail)}.gate__pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:264px}.gate__key{min-width:44px;min-height:44px;padding:0;font-size:20px;font-weight:700}.gate__review{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.review__strip{position:relative;width:100%;max-width:264px;height:52px;overflow:hidden;border-radius:var(--r-md);background:var(--bg-sunk);border:1px solid var(--border);box-shadow:inset 3px 0 0 var(--accent)}.review__rail{--at: 0;position:absolute;top:6px;left:8px;display:flex;gap:8px;transform:translate(calc(var(--at) * -48px));transition:transform .18s var(--ease)}.review__cell{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--bg-elev);border:1px solid var(--border);font-size:19px;font-weight:700;color:var(--fg-muted)}.review__cell[data-state=now]{color:var(--fg);border-color:var(--accent);background:var(--accent-soft)}.review__cell[data-state=ok]{color:var(--bd-pass);border-color:var(--bd-pass)}.review__cell[data-state=bad]{color:var(--bd-fail);border-color:var(--bd-fail)}.review__count{margin:0;font-family:var(--mono);font-size:12px;color:var(--fg-faint);font-variant-numeric:tabular-nums}.review__keys{display:flex;gap:8px}.review__key{min-width:64px;min-height:44px;padding:0;font-size:20px;font-weight:700}@media(prefers-reduced-motion:reduce){.gate__bar,.review__rail{transition:none}}@media(max-height:780px){.gate{padding:16px 14px;gap:8px}.gate h2{font-size:18px}.gate .panel__lead{font-size:12px}.gate .panel__hint,.gate__label{display:none}.gate__digits{font-size:30px}.gate__entry{font-size:20px}.gate__pad{max-width:216px;gap:6px}.review__strip{height:44px}.review__cell{width:34px;height:32px;font-size:16px}.review__rail{top:5px;transform:translate(calc(var(--at) * -42px))}.gate__key{min-height:44px;font-size:17px}}.screen{overflow-y:auto}.screen>.panel{max-height:100%;overflow-y:auto}.gate__icon{width:44px;height:44px;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--bd-approve-2) 40%,transparent))}@media(max-height:640px){.gate__icon{width:32px;height:32px}}.gate .panel__badge--warn{color:var(--bd-approve-2);background:color-mix(in srgb,var(--bd-approve-2) 15%,transparent)}.jobs{flex:none;display:flex;align-items:center;justify-content:center;gap:22px;width:fit-content;max-width:calc(100% - 24px);margin:0 auto 10px;padding:7px 18px;border:1px solid var(--border);border-radius:999px;background:var(--bg-elev);font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--fg-faint);white-space:nowrap}.jobs__i{display:inline-flex;align-items:center;gap:7px}.jobs__i b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}.jobs__ico{width:15px;height:15px;flex:none}.jobs__ico path[stroke]{stroke-width:1.6;fill:none}.jobs__ico--visual{fill:var(--bd-blue-500)}.jobs__ico--sandbox{fill:var(--bd-sandbox)}@media(max-width:560px){.jobs{gap:14px;font-size:11px;padding:7px 10px}.jobs__i{gap:5px}.jobs__label{display:none}}body.is-embed .jobs{display:none}.panel__report{margin:10px 0 0;font-family:var(--mono);font-size:12px;color:var(--fg-muted)}