/* Tokeny kolorów jak w makiecie; ciemny motyw wg systemu albo przełącznika. */
:root{
  --bg:#f3f5f7; --surface:#ffffff; --ink:#18212b; --muted:#5b6774; --line:#d5dbe2; --accent:#1f5fa8;
  --todo:#e3e7ec; --todo-ink:#46525f;
  --doing:#f6c344; --doing-ink:#4a3500;
  --done:#3f9a5c; --done-ink:#ffffff;
  --hold:#d0453a; --hold-ink:#ffffff;
  --na-ink:#8a95a1;
  --ok-bg:#e3f2e8; --err-bg:#fbe5e3;
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11161c; --surface:#19212a; --ink:#e6ebf0; --muted:#9aa6b2; --line:#2d3844; --accent:#6aa5ec;
  --todo:#2b3540; --todo-ink:#c3ccd5; --doing:#e0ad2e; --doing-ink:#2a1f00; --done:#3d8f57; --done-ink:#ffffff;
  --hold:#c9453b; --hold-ink:#ffffff; --na-ink:#6c7885; --ok-bg:#1d3326; --err-bg:#3a1f1d; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11161c; --surface:#19212a; --ink:#e6ebf0; --muted:#9aa6b2; --line:#2d3844; --accent:#6aa5ec;
  --todo:#2b3540; --todo-ink:#c3ccd5; --doing:#e0ad2e; --doing-ink:#2a1f00; --done:#3d8f57; --done-ink:#ffffff;
  --hold:#c9453b; --hold-ink:#ffffff; --na-ink:#6c7885; --ok-bg:#1d3326; --err-bg:#3a1f1d; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;
  padding:20px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
a{color:var(--accent)}
.wrap{max-width:1240px;margin:0 auto;display:grid;gap:18px}
main{display:grid;gap:14px;min-width:0}
h1{font-family:var(--f-display);font-weight:800;font-size:1.5rem;margin:0;letter-spacing:-.01em}
h2{font-family:var(--f-display);font-weight:700;font-size:1.1rem;margin:0 0 8px}
.sub{color:var(--muted);margin:2px 0 0;font-size:.92rem}
.note{font-size:.85rem;color:var(--muted);margin:0}
small{color:var(--muted)}

/* nagłówek i nawigacja */
.top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.brand{font-family:var(--f-display);font-weight:800;font-size:1.7rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.who{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.92rem}
.who form{margin:0}
.badge{font:600 .7rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--muted)}
.badge-admin{border-color:var(--accent);color:var(--accent)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs a{font-weight:600;color:var(--muted);text-decoration:none;padding:8px 12px;border-bottom:3px solid transparent}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.head-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}

/* komunikaty */
.flash{margin:0;padding:8px 12px;border-radius:5px;border:1px solid var(--line)}
.flash-ok{background:var(--ok-bg);border-color:var(--done)}
.flash-error{background:var(--err-bg);border-color:var(--hold)}
.warn{color:var(--hold)}

/* karty i formularze */
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;min-width:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.narrow{max-width:520px}
.form{display:grid;gap:10px}
.form label{display:grid;gap:3px;font-size:.88rem;font-weight:600}
.form label.check{display:flex;align-items:center;gap:8px;font-weight:400}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
input,select,textarea{font:400 1rem var(--f-body);padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
input[type=checkbox]{width:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{font:600 .95rem var(--f-body);border-radius:4px;padding:8px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;justify-self:start}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.link{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
.dl dt{color:var(--muted)} .dl dd{margin:0}

/* logowanie */
.login{min-height:80vh;display:grid;place-items:center}
.login-card{width:100%;max-width:380px;display:grid;gap:12px;padding:24px}
.login-card label{display:grid;gap:3px;font-weight:600;font-size:.9rem}
.login-card .btn{justify-self:stretch}

/* tabele */
.tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px}
table.st{border-collapse:collapse;width:100%;font-size:.9rem;min-width:720px}
table.st th,table.st td{border-top:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.st thead th{border-top:0;font:600 .72rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tr.off{opacity:.55}
.nm{font-weight:700}
.dt{font-family:var(--f-mono);font-size:.84rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt.late{color:var(--hold);font-weight:600}
.prog{display:flex;align-items:center;gap:8px;min-width:150px}
.bar{flex:1;height:10px;background:var(--todo);border-radius:5px;overflow:hidden;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--done)}
.pct{font:600 .82rem var(--f-mono);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.blocker{font-size:.84rem;color:var(--muted)}
.blocker b{color:var(--hold)}
details.edit summary{cursor:pointer;color:var(--accent);font-weight:600}
details.edit[open]{min-width:260px}
details.edit .form{margin-top:8px}

/* statusy (używane od kroku 3) */
.s-todo{background:var(--todo);color:var(--todo-ink)} .s-doing{background:var(--doing);color:var(--doing-ink)}
.s-done{background:var(--done);color:var(--done-ink)} .s-hold{background:var(--hold);color:var(--hold-ink)}
.s-na{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 7px);color:var(--na-ink)}

/* legenda i KPI */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.sw-late{border:2px solid var(--hold);background:var(--surface)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 14px}
.kpi b{display:block;font:800 1.6rem var(--f-display);font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted)}
.meta{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}

/* widok ogólny */
.ov{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow-x:auto}
.ovt{min-width:960px;display:grid}
.row{display:grid;grid-template-columns:170px 88px 150px repeat(5,minmax(90px,1fr)) 210px;gap:8px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.row.head{border-top:0;font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
a.row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.lanechip{display:flex;gap:2px;height:18px}
.lanechip i{flex:1;border-radius:2px;min-width:5px}
.lanechip i.s-todo{box-shadow:inset 0 0 0 1px var(--line)}

/* szczegóły budowy */
.toolbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.toolbar select{font-weight:600}
.pick select{width:auto}
.prog.wide{min-width:200px;flex:0 1 260px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:600 .75rem var(--f-mono);border:1px solid var(--line);border-radius:3px;padding:2px 8px;color:var(--muted);background:var(--surface)}
.facts-card summary{cursor:pointer;font-weight:600}
.facts-card .dl{margin-top:10px}
.pre{white-space:pre-line}
.board{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow-x:auto;padding:16px}
.board h3{margin:0 0 12px;font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.flow{display:grid;grid-template-columns:auto 40px 150px;align-items:center;width:max-content}
.flow2{display:flex;align-items:center;width:max-content}
.lanes{display:grid;gap:14px}
.lane{display:grid;grid-template-columns:132px auto;gap:10px;align-items:center}
.lane>.lbl{font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.chain{display:flex;align-items:center}
.sublanes{display:grid;gap:8px}
.sublanes.multi{border-left:2px solid var(--muted);padding-left:8px}
.sublane{display:flex;align-items:center}
.sublane.off{opacity:.65}
.sublane .rt{font:600 .7rem var(--f-mono);color:var(--muted);width:92px;flex:none;text-transform:uppercase;letter-spacing:.04em}
.empty{font-size:.8rem;color:var(--muted);font-style:italic}
.arr{width:26px;height:2px;background:var(--muted);position:relative;flex:none}
.arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--muted);border-right:0}
.blk{width:118px;min-height:54px;flex:none;border-radius:5px;padding:6px 8px;font:600 .8rem/1.2 var(--f-body);display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;cursor:pointer;border:1px solid transparent;position:relative}
.blk small{font:400 .66rem var(--f-mono);opacity:.85;color:inherit}
.blk.s-todo{border-color:var(--line)}
.blk.s-na{border:1px dashed var(--line)}
.blk.late{outline:2px solid var(--hold);outline-offset:1px}
.blk.has-doc::before{content:"✎";position:absolute;top:3px;right:5px;font-size:.7rem;opacity:.8}
.blk.cond::after{content:"?";position:absolute;bottom:3px;right:6px;font:700 .7rem var(--f-mono);opacity:.75}
.join{align-self:stretch;position:relative}
.join::before{content:"";position:absolute;left:0;top:27px;bottom:27px;width:2px;background:var(--muted)}
.join::after{content:"";position:absolute;left:0;right:6px;top:50%;height:2px;background:var(--muted)}
.gate{width:150px;min-height:120px;font-size:.88rem;text-align:center;align-items:center}
.gate.small{min-height:70px;width:130px;cursor:default}
.flow2>.lanes .lane{grid-template-columns:0 auto;gap:0}
.flow2>.lanes .lane>.lbl{display:none}
#tip{position:fixed;z-index:20;pointer-events:none;max-width:320px;background:var(--ink);color:var(--bg);border-radius:6px;padding:10px 12px;font-size:.85rem;line-height:1.4;box-shadow:0 6px 20px rgb(0 0 0 / .25)}
#tip h4{margin:0 0 4px;font:700 .95rem var(--f-display)}
#tip dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}
#tip dt{opacity:.7} #tip dd{margin:0}
.pill{display:inline-block;font:600 .75rem var(--f-mono);border-radius:3px;padding:2px 7px;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.blk,a.row{transition:background-color .15s}}
/* gałęzie „nie dotyczy” domyślnie ukryte */
.toggle-off{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
body:not(.show-off) .sublane.off,body:not(.show-off) .stage-off{display:none}
body.show-off .sublanes.multi-all{border-left:2px solid var(--muted);padding-left:8px}
.sublane .rt{margin-left:6px}

/* telefon: wszystko w jednej kolumnie, strzałki w dół, dymek jako panel na dole ekranu */
@media (max-width:700px){
  .board{overflow:visible;padding:12px}
  .flow{grid-template-columns:1fr;width:auto;gap:18px}
  .flow2{flex-direction:column;align-items:stretch;width:auto}
  .join{display:none}
  .lanes{gap:18px}
  .lane{grid-template-columns:1fr;gap:6px}
  .lane>.lbl{font-size:.8rem;color:var(--ink)}
  .chain,.sublane{flex-direction:column;align-items:stretch}
  .sublanes.multi,body.show-off .sublanes.multi-all{border-left:0;padding-left:0;gap:12px}
  .sublanes.multi>.sublane:not(.off),body.show-off .sublanes.multi-all>.sublane{border-left:3px solid var(--line);padding-left:8px}
  .sublane .rt{width:auto;margin:0 0 4px}
  .arr{width:2px;height:16px;margin:2px 0 2px 24px}
  .arr::after{right:auto;left:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:7px solid var(--muted);border-bottom:0}
  .blk{width:100%;min-height:44px}
  .gate,.gate.small{width:100%;min-height:56px}
  #tip{left:8px!important;right:8px;top:auto!important;bottom:8px;max-width:none}
}
details.later summary{cursor:pointer;font-weight:600;margin-bottom:8px}

/* telefon: widok ogólny jako karty */
@media (max-width:700px){
  .ov{overflow:visible}
  .ovt{min-width:0}
  .row.head{display:none}
  .row{grid-template-columns:1fr auto;gap:6px 10px;padding:12px}
  .row .prog{grid-column:1 / -1}
  .row .lanechip{height:14px;align-items:center}
  .row .lanechip::before{content:attr(data-l);flex:0 0 92px;font:600 .66rem var(--f-mono);text-transform:uppercase;color:var(--muted)}
  .row .lanechip i{height:12px;max-width:22px}
  .row .lanechip{grid-column:1 / -1}
  .row .blocker{grid-column:1 / -1}
}

/* panel bloku */
dialog#panel{border:0;padding:0;margin:0 0 0 auto;height:100%;max-height:none;max-width:none;width:min(520px,100%);background:var(--surface);color:var(--ink);box-shadow:-8px 0 30px rgb(0 0 0 / .35)}
dialog#panel::backdrop{background:rgb(0 0 0 / .45)}
.panel-body{padding:18px 20px 32px}
.panel{display:grid;gap:14px}
.panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px}
.panel-head h2{margin:2px 0 0;font-size:1.3rem}
.crumb{margin:0;font-size:.82rem;color:var(--muted)}
.panel-close{font-size:1.2rem;text-decoration:none;color:var(--muted);padding:4px 8px}
.info{font-size:.9rem}
.statuses{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.statuses legend{font-weight:600;font-size:.88rem;margin-bottom:6px}
.st-opt{display:inline-flex!important;align-items:center;cursor:pointer;border-radius:5px;padding:0;font-weight:600!important;border:1px solid var(--line)}
.st-opt input{position:absolute;opacity:0;pointer-events:none}
.st-opt span{padding:7px 12px}
.st-opt:has(input:checked){outline:3px solid var(--accent);outline-offset:1px}
.st-opt:has(input:focus-visible){outline:3px solid var(--ink)}
.st-opt:not(:has(input:checked)){opacity:.55}
.admin-fields{border:1px dashed var(--line);border-radius:5px;padding:8px 12px;display:grid;gap:10px}
.admin-fields summary{cursor:pointer;font-weight:600;color:var(--accent)}
.admin-fields[open]{gap:10px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.history h3{font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.history ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.86rem}
.history li{border-top:1px solid var(--line);padding-top:6px}
.history .dt{margin-right:6px;color:var(--muted)}
@media (max-width:700px){dialog#panel{width:100%;box-shadow:none}.panel-body{padding:14px 16px 28px}}

/* edycja struktury (administrator) */
.btn-danger{border-color:var(--hold);color:var(--hold)}
.admin-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.edit-toggle{display:flex;align-items:center;gap:8px;font-weight:600}
body:not(.edit-mode) .ed{display:none!important}
body.edit-mode .sublane.off,body.edit-mode .stage-off{display:flex}
body.edit-mode .sublanes.stage-off{display:grid}
body.edit-mode .arr.stage-off{display:block}
body.edit-mode .sublanes.multi-all{border-left:2px solid var(--muted);padding-left:8px}
body.edit-mode .toggle-off{display:none}
.chain-tools{display:flex;align-items:center;gap:4px;margin-left:10px;flex:none}
.chain-tools form{margin:0}
.tool,.pop>summary{font:600 .72rem var(--f-mono);border:1px dashed var(--accent);color:var(--accent);background:none;border-radius:3px;padding:3px 7px;cursor:pointer;list-style:none;white-space:nowrap}
.pop>summary::-webkit-details-marker{display:none}
.tool.danger{border-color:var(--hold);color:var(--hold)}
.pop{position:relative}
.pop-form{position:fixed;z-index:15;top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 32px));display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px;box-shadow:0 6px 20px rgb(0 0 0 / .35)}
.pop-form label{display:grid;gap:3px;font-size:.82rem;font-weight:600}
.lane-tools{margin-left:12px;align-self:center}
.inline-form{display:flex;gap:8px;flex-wrap:wrap}
.inline-form input{flex:1 1 180px}
.struct-actions{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.struct-actions h3{font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}
.struct-actions .actions form{margin:0}
.recent summary{cursor:pointer;font-weight:600}
.recent ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:.86rem}
.recent .dt{color:var(--muted);margin-right:6px}
@media (max-width:700px){
  .chain-tools{margin:6px 0 0;flex-wrap:wrap}
  .lane-tools{margin:8px 0 0}
}

/* pisma */
.docs{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px}
.docs h3{font:600 .72rem var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}
.inline-form .grow{flex:1 1 200px;display:grid;gap:3px;font-size:.82rem;font-weight:600}
.inline-form{align-items:end}
.files{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}
code{font-family:var(--f-mono);font-size:.85em;background:color-mix(in srgb,var(--line) 45%,transparent);border-radius:3px;padding:1px 4px}
code.warn{color:var(--hold)}
td code{display:inline-block;margin:0 3px 3px 0}
.prose{max-width:80ch}
.prose ol{padding-left:20px;display:grid;gap:6px}
table.fields{border-collapse:collapse;width:100%;font-size:.88rem}
table.fields td{padding:4px 6px;border-top:1px solid var(--line);vertical-align:top}
code.copy{cursor:copy}