/*
 * css/app.css - wygląd demo "Mapa projektów" (skóra B: jasny interfejs produktu, fikcyjne marki).
 * Własne zmienne z prefiksem --app-, z-index aplikacji poniżej 900, dialogi i toasty Demo.* przez --pf-ui-*.
 * Kolory marek (fiolet, morski) celowo inne niż w produkcie i spoza palety statusów.
 */

:root {
  --app-bg: #f6f7f9;
  --app-surface: #ffffff;
  --app-muted: #f1f3f5;
  --app-canvas: #eef0f3;
  --app-border: #e3e6ea;
  --app-border-strong: #cfd4da;
  --app-text: #151a21;
  --app-text-2: #545d6a;
  --app-text-3: #69717d;
  --app-brand: #6a3ec8;
  --app-brand-hover: #56309f;
  --app-brand-subtle: #f3effc;
  --app-on-brand: #ffffff;
  --app-done: #047857; --app-done-line: #10b981; --app-done-bg: #d1fae5;
  --app-doing: #1d4ed8; --app-doing-line: #3b82f6; --app-doing-bg: #dbeafe; --app-doing-soft: #f5f9ff;
  --app-wait: #8a3c0c; --app-wait-line: #f59e0b; --app-wait-bg: #fef3c7; --app-wait-soft: #fffcf0;
  --app-late: #b91c1c; --app-late-line: #dc2626; --app-late-bg: #fee2e2; --app-late-soft: #fff6f6;
  --app-blocked: #545d6a; --app-blocked-bg: #e7e9ed;
  --app-lane-a: rgba(17, 24, 39, 0.03);
  --app-edge-pend: #b3bac5; --app-edge-done: #93d2b9;
  --app-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.06);
  --app-shadow-lg: 0 10px 15px rgba(17, 24, 39, 0.10), 0 4px 6px rgba(17, 24, 39, 0.05);
  --app-shadow-xl: 0 20px 25px rgba(17, 24, 39, 0.14), 0 10px 10px rgba(17, 24, 39, 0.05);
  --app-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --app-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --app-r-sm: 4px; --app-r: 8px; --app-r-lg: 12px;

  /* dialogi i toasty Demo.* w barwach aplikacji */
  --pf-ui-tlo: #ffffff;
  --pf-ui-tlo-2: #f1f3f5;
  --pf-ui-tekst: #151a21;
  --pf-ui-tekst-2: #545d6a;
  --pf-ui-linia: #cfd4da;
  --pf-ui-akcent: #6a3ec8;
  --pf-ui-akcent-tekst: #ffffff;
  --pf-ui-ok: #047857;
  --pf-ui-uwaga: #8a3c0c;
  --pf-ui-blad: #b91c1c;
  --pf-ui-font: var(--app-font);
  --pf-ui-promien: 12px;
  --pf-ui-przyciemnienie: rgba(10, 12, 16, 0.45);
  --pf-ui-schemat: light;
}
/* druga marka: ten sam moduł, inny kolor */
html[data-ws="winien"] {
  --app-brand: #0e7490;
  --app-brand-hover: #0b5c72;
  --app-brand-subtle: #e6f4f7;
  --pf-ui-akcent: #0e7490;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--app-brand); outline-offset: 2px; }
.ico { flex-shrink: 0; display: block; }
.mono { font-family: var(--app-mono); font-variant-numeric: tabular-nums; }
.help { font-size: 12px; color: var(--app-text-3); }
.h2 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.pm-noscript { padding: 16px 20px; }

/* ---------- szkielet ---------- */
.pm-app { min-height: calc(100dvh - var(--demo-pasek-h, 0px)); display: flex; flex-direction: column; }
.pm-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 6px 20px;
  background: var(--app-surface); border-bottom: 1px solid var(--app-border); flex-shrink: 0;
}
.pm-bar__marka { display: flex; align-items: center; gap: 10px; }
.pm-bar__znak { fill: var(--app-brand-subtle); stroke: var(--app-brand); stroke-width: 1.6; stroke-linecap: round; }
.pm-bar__nazwa { display: grid; line-height: 1.15; }
.pm-bar__nazwa strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pm-bar__nazwa small { font-size: 12px; color: var(--app-text-3); }
.pm-bar__kto { display: flex; align-items: center; gap: 8px; }
.pm-bar__kto-t { display: grid; line-height: 1.15; text-align: right; }
.pm-bar__kto-t strong { font-size: 13px; }
.pm-bar__kto-t small { font-size: 12px; color: var(--app-text-3); }

.ava { color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; line-height: 1; }
.ava--lg { width: 32px; height: 32px; font-size: 14px; }
.ava--gosc { background: var(--app-text-3); width: 30px; height: 30px; font-size: 13px; }
.pm-bar .ava { width: 30px; height: 30px; font-size: 13px; }

/* ---------- przyciski, pigułki statusu ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--app-border-strong); background: var(--app-surface);
  padding: 7px 12px; border-radius: var(--app-r); font-weight: 500; font-size: 13px; white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:hover { background: var(--app-muted); }
.btn--primary { background: var(--app-brand); border-color: var(--app-brand); color: var(--app-on-brand); }
.btn--primary:hover { background: var(--app-brand-hover); border-color: var(--app-brand-hover); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--app-text-2); }
.btn--ghost:hover { background: var(--app-muted); color: var(--app-text); }
.btn--danger { color: var(--app-late); }
.btn--sm { padding: 4px 9px; font-size: 12px; }
.btn--icon { padding: 7px; }
.btn--tekst { border-color: transparent; background: transparent; color: var(--app-brand); padding: 4px 6px; margin-left: -6px; justify-self: start; align-self: flex-start; font-size: 13px; }
.btn--tekst:hover { background: var(--app-brand-subtle); }
.btn.is-on { background: var(--app-brand-subtle); border-color: var(--app-brand); color: var(--app-brand); }
.ico--gora { transform: rotate(90deg); }
.ico--dol { transform: rotate(-90deg); }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.pill--done { background: var(--app-done-bg); color: var(--app-done); }
.pill--doing { background: var(--app-doing-bg); color: var(--app-doing); }
.pill--open { background: var(--app-wait-bg); color: var(--app-wait); }
.pill--late { background: var(--app-late-bg); color: var(--app-late); }
.pill--blocked, .pill--hold { background: var(--app-blocked-bg); color: var(--app-blocked); }
.slip { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; cursor: help; }
.slip--bad { color: var(--app-late); } .slip--warn { color: var(--app-wait); } .slip--ok { color: var(--app-done); }
.linklike { border: 0; background: none; padding: 0; font: inherit; color: inherit; border-bottom: 1px dashed var(--app-border-strong); }
.linklike:hover { color: var(--app-text); border-bottom-color: var(--app-text); }
.is-late { color: var(--app-late); font-weight: 600; }

/* ---------- przegląd ---------- */
.home { padding: 24px 20px 48px; max-width: 1240px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.home__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.home__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.wstabs { display: flex; gap: 4px; border-bottom: 1px solid var(--app-border); flex: 1; min-width: 0; }
.wstab {
  border: 0; background: none; padding: 8px 14px 10px; margin-bottom: -1px;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 18px; font-weight: 700; color: var(--app-text-3);
  border-bottom: 3px solid transparent; letter-spacing: -0.01em;
}
.wstab__nazwa { display: inline-flex; align-items: center; gap: 8px; }
.wstab small { font-size: 12px; font-weight: 500; color: var(--app-text-3); letter-spacing: 0; }
.wstab:hover { color: var(--app-text); }
.wstab.is-active { color: var(--app-text); border-bottom-color: var(--app-brand); }
.wstab__n { align-self: center; font-size: 11px; font-weight: 700; background: var(--app-wait-line); color: #1f1300; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.pcard { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r-lg); display: flex; flex-direction: column; transition: border-color 150ms ease, box-shadow 150ms ease; }
.pcard:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow-lg); }
.pcard.is-risk { border-color: #f3cf8a; }
.pcard__open { text-align: left; background: none; border: 0; border-radius: var(--app-r-lg) var(--app-r-lg) 0 0; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; width: 100%; flex: 1; }
.pcard__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.pcard__blk { display: flex; flex-direction: column; gap: 6px; }
.pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 13px; color: var(--app-text-2); flex-wrap: wrap; }
.pcard__row b, .phead__stats b { color: var(--app-text); }
.pcard__actions { display: flex; gap: 6px; padding: 0 18px 14px; }
.pcard__actions [data-delete] { margin-left: auto; }
.pbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--app-muted); gap: 1px; }
.pbar i { display: block; height: 100%; }
.pbar .s-done { background: var(--app-done-line); } .pbar .s-doing { background: var(--app-doing-line); } .pbar .s-open { background: var(--app-wait-line); }
.pbar .s-hold, .pbar .s-blocked { background: var(--app-border-strong); }
.pcard__ball { display: flex; gap: 10px; flex-wrap: wrap; }
.ballchip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.pcard__why { font-size: 13px; color: var(--app-text-2); border-top: 1px solid var(--app-border); padding-top: 12px; }
.pcard__why b { color: var(--app-text); font-weight: 600; }

.home__dol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
.chglog, .ballboard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chglog__head, .side__head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.chg__list { display: flex; flex-direction: column; gap: 4px; }
.chg { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r); padding: 7px 12px; font-size: 13px; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.chg:not(.chg--static):hover { border-color: var(--app-border-strong); background: var(--app-muted); }
.chg--static { opacity: 0.75; }
.chg__time { font-size: 12px; color: var(--app-text-2); white-space: nowrap; min-width: 88px; }
.chg .ava { width: 20px; height: 20px; font-size: 10px; }
.chg__body { flex: 1 1 100%; order: 3; min-width: 0; }
.chg__body i { font-style: normal; color: var(--app-text-2); }
.chg__proj { margin-left: auto; font-size: 12px; color: var(--app-text-3); white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.chg__more { align-self: flex-start; }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.col { background: var(--app-muted); border-radius: var(--app-r-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col.is-me { box-shadow: inset 0 0 0 1.5px var(--app-text); }
.col__head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.col__head > div { min-width: 0; }
.col__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.col__meta { font-size: 12px; color: var(--app-text-2); }
.col__head .btn { margin-left: auto; }
.col__empty { font-size: 13px; color: var(--app-text-2); padding: 8px 2px; }
.board__idle { font-size: 13px; color: var(--app-text-2); }
.bcard, .bitem { text-align: left; width: 100%; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.bcard:hover, .bitem:hover { border-color: var(--app-border-strong); box-shadow: var(--app-shadow-sm); }
.bcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bcard__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--app-text-2); font-weight: 500; }
.bcard__title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.bcard__meta { font-size: 12px; color: var(--app-text-2); display: flex; gap: 2px 10px; flex-wrap: wrap; }
.bcard__crit { display: inline-flex; align-items: center; gap: 3px; color: var(--app-brand); font-weight: 600; }
.blank { border: 1px dashed var(--app-border-strong); border-radius: var(--app-r-lg); padding: 40px 20px; text-align: center; color: var(--app-text-2); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.blank__t { font-size: 16px; font-weight: 600; color: var(--app-text); }
.arch { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.arch__list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; }
.arch__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--app-muted); border-radius: var(--app-r); padding: 8px 12px; }
.arch__name { border: 0; background: none; padding: 0; font-weight: 500; text-align: left; color: var(--app-text-2); }
.arch__name:hover { color: var(--app-text); text-decoration: underline; }
.arch__btns { display: inline-flex; gap: 6px; flex-shrink: 0; }

/* ---------- widok projektu ---------- */
.pane { display: flex; flex-direction: column; }
.phead { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 10px 20px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); flex-shrink: 0; }
.phead__title { font-size: 17px; font-weight: 600; line-height: 1.25; }
.phead__stats { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 13px; color: var(--app-text-2); }
.phead__tabs { margin-left: auto; }
.phead__akcje { display: flex; gap: 8px; align-items: center; }
.tabs { display: flex; gap: 2px; background: var(--app-muted); padding: 3px; border-radius: var(--app-r); }
.tabs__btn { border: 0; background: transparent; padding: 5px 11px; border-radius: 6px; font-weight: 500; font-size: 13px; color: var(--app-text-2); white-space: nowrap; }
.tabs__btn:hover { color: var(--app-text); }
.tabs__btn.is-active { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-sm); }
.strip { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--app-border); background: var(--app-surface); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__label { font-size: 13px; color: var(--app-text-2); white-space: nowrap; }
.strip__label b { color: var(--app-text); }
.strip__sep { width: 1px; height: 20px; background: var(--app-border); flex-shrink: 0; margin: 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-border); background: var(--app-surface); border-radius: 6px; padding: 3px 9px 3px 3px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip:hover { border-color: var(--app-border-strong); }
.chip.is-on { border-color: var(--app-text); background: var(--app-muted); }
.chip b { font-weight: 700; }
.chip .ava { border-radius: 4px; }

.stage { position: relative; }
.stage__main { position: relative; min-width: 0; }
.mapwrap { position: relative; display: flex; min-width: 0; }
.canvas {
  flex: 1; min-width: 0; position: relative; overflow: auto; overscroll-behavior: contain;
  background-color: var(--app-canvas);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23cdd2d9'/%3E%3C/svg%3E");
  background-attachment: local;
  cursor: grab;
}
.canvas.is-drag { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.canvas:focus-visible { outline-offset: -3px; }
.world { position: relative; }
.lanes { position: absolute; inset: 0; }
.lane { position: absolute; left: 0; }
.lane:nth-child(odd) { background: var(--app-lane-a); }
.lane + .lane { border-top: 1px dashed var(--app-border-strong); }
.lane__label {
  position: sticky; left: 8px; top: 0;
  display: flex; align-items: center; gap: 8px; width: max-content; margin: 7px 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-2);
  background: var(--app-canvas); padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.lane__label span { font-weight: 500; letter-spacing: 0; color: var(--app-text-3); font-family: var(--app-mono); }
.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.edge { fill: none; stroke-width: 1.75; stroke: var(--app-edge-pend); transition: opacity 150ms ease; }
.edge--pend { stroke-dasharray: 5 6; }
.edge--done { stroke: var(--app-edge-done); }
.edge--live { stroke: var(--app-wait-line); stroke-width: 2.25; stroke-dasharray: 7 6; animation: pm-flow 1.1s linear infinite; }
.edge--crit { stroke: var(--app-brand); stroke-width: 3; stroke-dasharray: none; animation: none; }
.edge.is-dim { opacity: 0.14; }
.edge.is-hot { stroke-width: 3; opacity: 1; }
.port { fill: var(--app-surface); stroke: var(--app-edge-pend); stroke-width: 2; }
@keyframes pm-flow { to { stroke-dashoffset: -13; } }

.node {
  position: absolute; width: 220px; height: 106px; text-align: left;
  background: var(--app-surface); border: 1.5px solid var(--app-border-strong); border-radius: 10px;
  padding: 9px 11px; display: flex; flex-direction: column; gap: 4px;
  transition: opacity 150ms ease, box-shadow 150ms ease;
}
.node:hover { box-shadow: var(--app-shadow-lg); z-index: 2; }
.node__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.node__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--app-text-2); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; }
.node__title { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.node__meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-text-2); }
.node__meta .ava { width: 18px; height: 18px; font-size: 10px; }
.node__when { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.node.is-done { border-color: var(--app-border); }
.node.is-done .node__title { color: var(--app-text-2); font-weight: 500; }
.node.is-doing { border-color: var(--app-doing-line); background: var(--app-doing-soft); box-shadow: var(--app-shadow-sm); }
.node.is-open { border-color: var(--app-wait-line); background: var(--app-wait-soft); box-shadow: var(--app-shadow-sm); }
.node.is-late { border-color: var(--app-late-line); background: var(--app-late-soft); }
.node.is-late .node__when { color: var(--app-late); font-weight: 600; }
.node.is-blocked { background: var(--app-muted); border-style: dashed; }
.node.is-blocked .node__title { color: var(--app-text-2); }
.node.is-hold { border-style: dashed; border-color: var(--app-text-3); }
.node.is-mine { outline: 2.5px solid var(--mine, var(--app-text)); outline-offset: 3px; }
.node.is-sel { box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 5px var(--app-text), var(--app-shadow-lg); z-index: 3; }
.node.is-crit { border-color: var(--app-brand); border-width: 2px; }
.node.is-dim { opacity: 0.25; }

.zoom { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r); box-shadow: var(--app-shadow-sm); overflow: hidden; z-index: 5; }
.zoom button { border: 0; background: transparent; padding: 8px; display: flex; color: var(--app-text-2); }
.zoom button:hover { background: var(--app-muted); color: var(--app-text); }
.zoom button + button { border-top: 1px solid var(--app-border); }
.minimap { position: absolute; left: 14px; bottom: 14px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r); box-shadow: var(--app-shadow-sm); padding: 6px; cursor: pointer; z-index: 5; }
.minimap svg { display: block; }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--app-text-2); z-index: 4; }
.empty--static { position: static; padding: 60px 20px; }
.empty__t { font-size: 16px; font-weight: 600; color: var(--app-text); }
.empty__d { max-width: 40ch; }

/* panel boczny: u kogo piłka / szczegóły kroku */
.side { background: var(--app-surface); }
.ballpanel { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ball__sum { font-size: 13px; color: var(--app-text-2); background: var(--app-muted); border-radius: var(--app-r); padding: 8px 10px; }
.ball__sum b { color: var(--app-text); }
.bgroup { display: flex; flex-direction: column; gap: 6px; }
.bgroup + .bgroup { padding-top: 10px; border-top: 1px solid var(--app-border); }
.bgroup__head { display: flex; align-items: center; gap: 10px; padding: 0 2px 2px; }
.bgroup__name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.bgroup__meta { font-size: 12px; color: var(--app-text-2); }
.bitem { background: var(--app-surface); }
.bgroup .bitem { background: var(--app-bg); }
.bgroup .bitem:hover { background: var(--app-surface); }

.drawer { display: flex; flex-direction: column; min-height: 0; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; }
.drawer__kind { font-size: 12px; }
.drawer__body { padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.drawer__title { font-size: 18px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.drawer__who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--app-text-2); }
.drawer__who b { color: var(--app-text); }
.drawer__rola { color: var(--app-text-3); }
.drawer__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.drawer__foot { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--app-border); flex-wrap: wrap; }
.drawer__foot #drDel { margin-left: auto; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-text-3); }
.facts dd { margin: 1px 0 0; font-size: 13px; font-weight: 500; }
.sect__h { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-text-3); margin: 0 0 6px; }
.note { background: var(--app-muted); border-radius: var(--app-r); padding: 10px 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.links { display: flex; flex-direction: column; gap: 4px; }
.linkrow { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; background: var(--app-muted); border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%; }
.linkrow:hover { background: var(--app-border); }
.linkrow .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkrow__wait { font-size: 12px; color: var(--app-text-2); }
.due__row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.due__row .input { flex: 1 1 150px; width: auto; }
.log { display: flex; flex-direction: column; gap: 10px; }
.log__item { display: flex; gap: 8px; font-size: 13px; }
.log__item > div > div:first-child { white-space: pre-wrap; overflow-wrap: anywhere; }
.log__item--sys > div > div:first-child { color: var(--app-text-2); }
.log__meta { font-size: 12px; color: var(--app-text-3); }
.log__pusto { font-size: 13px; color: var(--app-text-3); }
.addc { display: flex; gap: 6px; margin-top: 10px; }

/* lista kroków (alternatywa dla mapy, wygodna na telefonie) */
.listview { background: var(--app-bg); }
.lista { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.lista__sekcja { display: flex; flex-direction: column; gap: 6px; }
.lista__gotowe summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.lista__gotowe summary::-webkit-details-marker { display: none; }
.lista__gotowe summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 150ms ease; }
.lista__gotowe[open] summary::before { transform: rotate(45deg); }
.lrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-r); padding: 10px 12px; }
.lrow:hover { border-color: var(--app-border-strong); }
.lrow.is-sel { box-shadow: 0 0 0 2px var(--app-text); border-color: transparent; }
.lrow.is-crit { border-color: var(--app-brand); }
.lrow.is-dim { opacity: 0.4; }
.lrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lrow__kind { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--app-text-2); font-weight: 500; }
.lrow__lane { color: var(--app-text-3); font-weight: 400; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__lane::before { content: '· '; }
.lrow__title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.lrow__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--app-text-2); }
.lrow__meta .ava { width: 18px; height: 18px; font-size: 10px; }
.lrow__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--app-text-3); }

/* oś czasu */
.tl { background: var(--app-surface); }
.tl__grid { position: relative; min-width: max-content; }
.tl__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--app-border); }
.tl__row.is-dim { opacity: 0.3; }
.tl__row--head { position: sticky; top: 0; z-index: 4; background: var(--app-surface); }
.tl__row--lane { background: var(--app-muted); }
.tl__name { position: sticky; left: 0; z-index: 3; width: 250px; flex-shrink: 0; padding: 7px 12px 7px 20px; background: inherit; border-right: 1px solid var(--app-border); font-size: 13px; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.tl__row:not(.tl__row--lane):not(.tl__row--head) { background: var(--app-surface); }
.tl__name button { border: 0; background: none; padding: 0; text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl__name button:hover { color: var(--app-brand); }
.tl__lane { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-2); }
.tl__licz { font-size: 11px; color: var(--app-text-3); }
.tl__track { position: relative; flex-shrink: 0; min-height: 34px; }
.tl__track--head { min-height: 44px; }
.tl__track--lane { min-height: 26px; }
.tl__day { position: absolute; top: 0; bottom: 0; font-size: 11px; color: var(--app-text-3); text-align: center; padding-top: 8px; font-family: var(--app-mono); line-height: 1.2; }
.tl__mies { display: block; font-size: 9px; }
.tl__day.is-we { background: var(--app-muted); }
.tl__day.is-mon { border-left: 1px solid var(--app-border); color: var(--app-text-2); }
.tl__day.is-today { color: var(--app-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--app-text); }
.tl__day.is-dl { color: var(--app-brand); font-weight: 700; box-shadow: inset 0 -3px 0 var(--app-brand); }
.tl__bar { position: absolute; top: 7px; height: 20px; border-radius: 5px; border: 0; padding: 0 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-align: left; }
.tl__bar--doing { background: var(--app-doing-bg); color: var(--app-doing); box-shadow: inset 0 0 0 1.5px var(--app-doing-line); }
.tl__bar--open { background: var(--app-wait-bg); color: var(--app-wait); box-shadow: inset 0 0 0 1.5px var(--app-wait-line); }
.tl__bar--late { background: var(--app-late-bg); color: var(--app-late); box-shadow: inset 0 0 0 1.5px var(--app-late-line); }
.tl__bar--blocked, .tl__bar--hold { background: var(--app-blocked-bg); color: var(--app-blocked); }
.tl__bar.is-crit { box-shadow: inset 0 0 0 2px var(--app-brand); }
.tl__lines { position: absolute; top: 0; bottom: 0; left: 250px; pointer-events: none; }
.tl__vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--app-text); z-index: 2; }
.tl__vline--dl { border-left: 2px dashed var(--app-brand); }
.tl__vlabel { position: absolute; top: 46px; left: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--app-surface); padding: 0 3px; }
.tl__vline--dl .tl__vlabel { color: var(--app-brand); top: 60px; }

/* ---------- okna (natywny <dialog>, bez transform: przewodnik działa w środku) ---------- */
.modal {
  padding: 0; border: 0; border-radius: 14px;
  background: var(--app-surface); color: var(--app-text);
  width: 560px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px);
  box-shadow: var(--app-shadow-xl); overflow: hidden;
}
.modal[open] { display: flex; animation: pm-okno 160ms ease-out; }
.modal::backdrop { background: rgba(10, 12, 16, 0.5); }
.modal--sm { width: 420px; }
.modal--wide { width: 700px; }
.modal__box { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 24px); min-height: 0; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 4px; }
.modal__body { padding: 8px 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1 1 auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--app-border); flex-wrap: wrap; flex-shrink: 0; }
.modal__foot .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ps-archive, .wz__wstecz { margin-right: auto; }
@keyframes pm-okno { from { opacity: 0; } to { opacity: 1; } }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label, .field > .lbl { font-size: 12px; font-weight: 600; color: var(--app-text-2); }
.input { border: 1px solid var(--app-border-strong); background: var(--app-surface); border-radius: var(--app-r); padding: 7px 10px; font-size: 14px; width: 100%; min-width: 0; }
.input:focus { outline: 2px solid var(--app-brand); outline-offset: 0; border-color: var(--app-brand); }
.input:disabled { opacity: 0.5; background: var(--app-muted); cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.5; }
#ed-note { min-height: 100px; }
.err { color: var(--app-late); font-size: 12px; font-weight: 500; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--app-border-strong); border-radius: 6px; padding: 4px 11px 4px 4px; font-size: 13px; font-weight: 500; cursor: pointer; }
.seg label .ava { border-radius: 4px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { border-color: var(--app-text); background: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--app-brand); outline-offset: 2px; }
.seg--col { flex-direction: column; align-items: stretch; }
.seg--col label { padding: 8px 12px; line-height: 1.4; }
.deps { border: 1px solid var(--app-border); border-radius: var(--app-r); max-height: 190px; overflow-y: auto; padding: 4px; }
.deps__lane { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-text-3); padding: 6px 8px 2px; }
.deps label { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.deps label:hover { background: var(--app-muted); }
.deps label.is-off { opacity: 0.45; cursor: not-allowed; }
.daterow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.daterow .input { flex: 1; min-width: 160px; width: auto; }
.checkline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.checkline input { width: 16px; height: 16px; accent-color: var(--app-brand); }
.tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpl { position: relative; border: 1px solid var(--app-border-strong); border-radius: var(--app-r); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.tpl input { position: absolute; opacity: 0; pointer-events: none; }
.tpl:has(input:checked) { border-color: var(--app-text); background: var(--app-muted); }
.tpl:has(input:focus-visible) { outline: 2px solid var(--app-brand); outline-offset: 2px; }
.tpl__name { font-weight: 600; font-size: 13px; }
.tpl__hint { font-size: 12px; color: var(--app-text-2); }
.lanelist { display: flex; flex-direction: column; gap: 6px; }
.lanerow { display: flex; gap: 6px; align-items: center; }
.ps-addlane { align-self: flex-start; margin-top: 4px; }

/* kreator */
.wz__lead { color: var(--app-text-2); font-size: 13px; max-width: 64ch; }
.wz__cel { display: flex; flex-direction: column; gap: 14px; }
.wz__q { font-size: 15px; color: var(--app-text-2); line-height: 1.4; }
.wz__q b { display: block; font-size: 18px; color: var(--app-text); font-weight: 600; text-wrap: balance; }
.wz__path { font-size: 12px; color: var(--app-text-3); margin-top: -6px; }
.wz__list { display: flex; flex-direction: column; gap: 4px; }
.wz__item { display: flex; align-items: center; gap: 8px; background: var(--app-muted); border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.wz__item .t { flex: 1; min-width: 0; font-weight: 500; }
.wz__meta { font-size: 12px; color: var(--app-text-2); white-space: nowrap; }
.wz__none { font-size: 13px; color: var(--app-text-2); border: 1px dashed var(--app-border-strong); border-radius: 6px; padding: 10px 12px; }
.wz__add { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--app-border); padding-top: 14px; }
.wz__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.wz__row .field { flex: 1; min-width: 120px; }
.wz__row .wz__dni { flex: 0 0 84px; min-width: 84px; }
.wz__row--link { border-top: 1px solid var(--app-border); padding-top: 12px; }
.wz__sum { background: var(--app-muted); border-radius: var(--app-r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* eksport i import */
.json { margin: 0; max-height: 220px; overflow: auto; background: var(--app-muted); border: 1px solid var(--app-border); border-radius: var(--app-r); padding: 10px 12px; font-family: var(--app-mono); font-size: 11.5px; line-height: 1.5; white-space: pre; color: var(--app-text-2); }
.json-input { font-family: var(--app-mono); font-size: 12px; }
.imp__zrodlo { display: flex; gap: 8px; flex-wrap: wrap; }
.imp__plik { position: relative; cursor: pointer; }
.imp__plik:focus-within { outline: 2px solid var(--app-brand); outline-offset: 2px; }
.imp__podglad { display: flex; flex-direction: column; gap: 10px; }
.imp__podglad:empty { display: none; }
.impv { border: 1px solid var(--app-border); border-radius: var(--app-r); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--app-bg); }
.impv__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.impv__list { display: flex; flex-direction: column; gap: 5px; }
.impv__zm { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.impv__zm .ico { margin-top: 3px; color: var(--app-text-2); }
.impv__zm--check .ico { color: var(--app-done); }
.impv__zm--plus .ico { color: var(--app-brand); }
.impv__zm--trash .ico { color: var(--app-late); }
.impv__zostaje, .impv__nic { font-size: 12.5px; color: var(--app-text-2); }
.impv__prog { font-size: 13px; padding-top: 8px; border-top: 1px dashed var(--app-border-strong); }

/* ---------- szeroki ekran: projekt jako aplikacja na całą wysokość ---------- */
@media (min-width: 900px) {
  .pm-app.is-project { height: calc(100dvh - var(--demo-pasek-h, 0px)); min-height: 0; overflow: hidden; }
  .pm-app.is-project .pane { flex: 1; min-height: 0; }
  .stage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 372px; }
  .stage__main { display: flex; min-height: 0; }
  .mapwrap { flex: 1; min-height: 0; }
  .listview, .tl { flex: 1; min-height: 0; overflow: auto; }
  .side { border-left: 1px solid var(--app-border); overflow-y: auto; min-height: 0; }
  /* prawy dolny róg należy do toastów Demo.*, więc przyciski widoku stoją u góry mapy */
  .zoom { top: 14px; bottom: auto; }
  /* w ramce lewy dolny róg zajmuje znacznik "Demo · dane fikcyjne" */
  html.pf-embed .minimap { bottom: 62px; }
}

/* ---------- telefon i tablet: strona przewijana, mapa w swoim kontenerze ---------- */
@media (max-width: 899px) {
  .home__dol { grid-template-columns: 1fr; }
  .mapwrap { height: clamp(360px, 58vh, 620px); border-bottom: 1px solid var(--app-border); }
  .minimap { display: none; }
  .tl { overflow-x: auto; }
  .tl__name { width: 150px; padding-left: 12px; }
  .side { border-top: 1px solid var(--app-border); }
  .tabs__btn { padding: 6px 10px; }
}
@media (max-width: 639px) {
  .pm-bar { padding: 6px 16px; }
  .pm-bar__kto-t small { display: none; }
  .home { padding: 16px 16px 40px; gap: 22px; }
  .home__actions { justify-content: flex-start; width: 100%; }
  .home__actions #wizardBtn { flex: 1 1 100%; order: -1; }
  .wstab { font-size: 16px; padding: 8px 10px 10px; flex-direction: column; gap: 0; align-items: flex-start; }
  .wstab__nazwa { display: inline-flex; align-items: center; gap: 6px; }
  .pcards { grid-template-columns: 1fr; }
  .phead, .strip { padding-left: 16px; padding-right: 16px; }
  .phead { gap: 6px 12px; }
  .phead__wroc { margin-left: -8px; }
  .phead__akcje { margin-left: auto; }
  .phead__title { flex: 1 1 100%; order: 1; }
  .phead__stats { order: 2; flex: 1 1 100%; }
  .phead__tabs { order: 3; margin: 4px 0 0; flex: 1 1 100%; }
  .phead__tabs .tabs__btn { flex: 1; }
  .phead .btn__label { display: none; }
  .grid2, .tpls { grid-template-columns: 1fr; }
  .lista { padding: 12px 16px 24px; }
  .ballpanel { padding: 16px; }
  .drawer__head, .drawer__body, .drawer__foot { padding-left: 16px; padding-right: 16px; }
  .modal { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal__box { max-height: calc(100dvh - 16px); }
  .modal__head, .modal__body, .modal__foot { padding-left: 16px; padding-right: 16px; }
  .modal__foot .btn { flex: 1 1 auto; }
  .modal__foot .btn--primary { flex-basis: 100%; order: -1; }
  .ps-archive, .wz__wstecz { margin-right: 0; }
  .input { font-size: 16px; }
  /* w trakcie przewodnika okno stoi u góry, żeby arkusz na dole nie zasłaniał jego przycisków */
  html.pf-tour-aktywny .modal { margin: 8px auto auto; max-height: 52dvh; }
  html.pf-tour-aktywny .modal__box { max-height: 52dvh; }
}
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .tabs__btn { min-height: 40px; }
  .chip { min-height: 40px; }
  .zoom button { padding: 10px; }
  .input { font-size: 16px; min-height: 44px; }
  .seg label { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .edge--live { animation: none; }
  .modal[open] { animation: none; }
  .btn, .node, .pcard, .edge { transition: none; }
}