/* Rozliczenie (step 2 of the cycle), Pareto of causes, actions in place, the screen Trafność i FVA (shared pieces).
   0.87 (F-87): the rules of 0.84 that left app.css with these screens in 0.85, back as they were, plus the new pieces
   of 0.87 at the end (.rz-*: the 80% target on the step bar, the causes in three groups, „czy działamy” in place). */
.pane.side-panel { background: #FBFCFE; }
.kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 120px; }
.kpi .k { font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.kpi .v { font-size: 19px; font-weight: 750; color: var(--navy-3); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .s { font-size: 11.5px; color: var(--ink-3); }
.kpi.ok .v { color: var(--ok); } .kpi.bad .v { color: var(--bad); } .kpi.warn .v { color: var(--warn); }
.qlist { list-style: none; margin: 0; padding: 0; }
.qitem { padding: 10px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; display: grid; gap: 3px; }
.qitem:hover { background: #F7F9FD; }
.qitem.on { background: var(--orange-soft); box-shadow: inset 3px 0 0 var(--orange); }
.qitem.done { opacity: .6; }
.qitem .t { font-weight: 650; color: var(--navy-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qitem .m { font-size: 12px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qitem .r { font-size: 12px; color: var(--ink-2); }
.qitem .r b { color: var(--bad); font-weight: 650; } .qitem .r b.medium { color: var(--warn); } .qitem .r b.low { color: var(--ink-2); }
.list-head { position: sticky; top: 0; background: #fff; z-index: 2; padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.list-head input[type=text] { height: 34px; }
.ptable { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ptable th, .ptable td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ptable th:first-child, .ptable td:first-child { text-align: left; position: sticky; left: 0; background: #fff; font-weight: 600; color: var(--ink-2); }
.ptable th { color: var(--ink-3); font-weight: 600; font-size: 11.5px; }
.ptable tr.final td { font-weight: 700; color: var(--navy-3); }
.ptable td.edit { padding: 2px; }
.ptable td.edit input { width: 64px; height: 26px; padding: 0 6px; text-align: right; font: 700 12.5px var(--font); border-color: transparent; background: var(--orange-soft); }
.ptable td.edit input:focus { border-color: var(--orange); background: #fff; }
.ptable td.changed { background: #FFF2E6; }
.ptable td.anom { background: #FFF6DB; }
.ptable td.adj { background: var(--ok-soft); }
.pareto-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 2fr auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.pareto-bar { height: 10px; border-radius: 5px; background: var(--line-2); position: relative; overflow: hidden; }
.pareto-bar i { position: absolute; inset: 0 auto 0 0; background: var(--orange); border-radius: 5px; }
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 4px 0 8px; }
.ptable.wrap-first td:first-child, .ptable.wrap-first th:first-child { white-space: normal; position: static; min-width: 160px; }
.ptable.wrap-first td:first-child { line-height: 1.35; padding-top: 7px; padding-bottom: 7px; }
.strip .stairs { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.strip .stairs b { font-size: 14px; color: var(--navy-3); }
.strip .faint-num b { color: var(--ink-3) !important; }
.qitem { padding: 6px 12px; min-height: 48px; gap: 2px; }
.qitem .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.qitem .l1 .t { flex: 1; min-width: 0; }
.qitem .l1 .n { font-weight: 700; font-size: 12.5px; color: var(--navy-3); font-variant-numeric: tabular-nums; }
.qitem .l2 { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--ink-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.qitem .l2 .tag { overflow: hidden; text-overflow: ellipsis; }
.qitem .pill { height: 18px; font-size: 10.5px; padding: 0 6px; }
.list-head { padding: 8px 12px; gap: 6px; }
.what-failed { font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--warn-soft); color: #6E4D05; }
.what-failed.ok { background: var(--line-2); color: var(--ink-2); }
.lbl-conf { font-size: 11px; color: var(--ink-3); }
.qitem .l1 .n { flex: none; }
.qitem .l1 .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-spacer { position: relative; }
.vl-layer { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.vl-layer > .qitem { box-sizing: border-box; overflow: hidden; }
.list-tools { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.list-tools select { height: 26px; font-size: 12px; width: auto; padding: 0 6px; }
.list-foot { position: sticky; bottom: 0; background: #FBFCFE; border-top: 1px solid var(--line); padding: 7px 12px; font-size: 12px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pane.list > .list-head { position: sticky; top: 0; z-index: 3; }
.vl-scroll { flex: 1; min-height: 0; overflow: auto; }
.qitem .l1 .n { min-width: 64px; text-align: right; }
.out-of-scope { font-size: 11.5px; background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 2px 8px; }
.vl-layer > .qitem { grid-template-columns: minmax(0, 1fr); }
.qitem .l2 .why { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-empty { padding: 24px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.pf { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; padding: 18px; align-items: start; }
.pf-eyebrow { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #F9B98F; font-weight: 700; }
.modal .pf-eyebrow { color: var(--orange-d); }
.pf-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pf-tbl th { font-size: 12px; color: var(--ink-3); font-weight: 600; text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.pf-tbl td { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.pf-tbl .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 10px; }
.pf-tbl th { white-space: nowrap; }
.pf-tbl td:first-child { max-width: 200px; }
.pf-tbl tr.click { cursor: pointer; } .pf-tbl tr.click:hover td { background: var(--line-2); }
.pf-tbl td:first-child { font-weight: 600; color: var(--navy-3); }
.pf-tbl .up { color: var(--warn); font-weight: 700; } .pf-tbl .down { color: var(--bad); font-weight: 700; }
.vl-layer > .qitem.ing { padding-left: 24px; }
@media (max-width: 1100px) { .pf { grid-template-columns: 1fr; } }
.pf-tbl tr.sel td { background: var(--orange-soft); }
@media (max-width: 1279px) { .wide-only { display: none !important; } .strip .lbl-conf { display: none; } }
.btn > .wide-only { margin-left: -4px; }
.list-prog { padding: 8px 14px 9px; border-bottom: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); display: grid; gap: 4px; }
.list-prog .lp-t { display: flex; gap: 4px; align-items: baseline; }
.list-prog .lp-t b { color: var(--navy-3); }
.list-prog .lp-bar { position: relative; height: 6px; border-radius: 3px; background: var(--line-2); }
.list-prog .lp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ok); }
.list-prog .lp-bar s { position: absolute; left: 80%; top: -2px; bottom: -2px; width: 2px; background: var(--ink-3); }
.list-prog .lp-s { font-size: 11.5px; color: var(--ink-3); }
.acc-board .kpi .v { font-size: 24px; }
.acc-foot { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.decide-comment { width: 100%; height: 34px; }
.pf > .card.pt-side { position: sticky; top: 0; max-height: calc(100vh - 236px); overflow: auto; }
.pt-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.pt-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-head h3 { font-size: 15px; }
.pt-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
@media (max-width: 1360px) { .pt-top-grid { grid-template-columns: 1fr; } }
.pt-bar { display: grid; grid-template-columns: 18px minmax(120px, 1.2fr) minmax(60px, 2fr) 42px; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; color: var(--ink-2); }
.pt-bar.top { color: var(--navy-3); font-weight: 650; }
.pt-bl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pt-bl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-bl i, .pt-sw, .pt-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pt-bb { height: 10px; border-radius: 4px; background: var(--line-2); position: relative; overflow: hidden; }
.pt-bb i { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; }
.pt-bv { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy-3); }
.pt-rank { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; background: var(--navy-3); }
.pt-rank:empty { background: none; }
.pt-top3 { display: grid; gap: 8px; align-content: start; }
.pt-top3 .section-title { margin: 0; }
.pt-top { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; background: #fff; }
.pt-top.ok { border-color: #CFE6D9; background: var(--ok-soft); }
.pt-top-h { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.pt-top-h .grow { flex: 1; }
.pt-acts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--ink-2); padding-left: 25px; }
.pt-act { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; }
.pt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pt-tbl td:first-child, .pt-tbl th:first-child { padding-left: 8px; }
.pt-tbl tr.in80 td { background: #FFFAF5; }
.pt-tbl tr.in80 td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.pt-tbl tr.sel td { background: var(--orange-soft); }
.pt-tbl tr.pt-cut td { padding: 3px 8px; border-bottom: 2px solid var(--orange); font-size: 11.5px; font-weight: 700; color: var(--orange-d); background: none; box-shadow: none; }
.pt-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.pt-net { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--ink-2); padding-right: 10px; }
.pt-net i { flex: none; height: 10px; border-radius: 3px; }
.pt-stack-td { min-width: 130px; }
.pt-stack { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: #fff; }
.pt-stack i { min-width: 2px; height: 100%; }
.pt-items { display: grid; gap: 1px; }
.pt-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; text-align: left; border: 0; background: none; padding: 5px 6px; border-radius: 6px; font: 500 12.5px var(--font); color: var(--ink); cursor: pointer; }
.pt-item:hover { background: var(--line-2); }
.pt-item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-item .n { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ---------- 0.87 (F-87) ---------- */
/* the described share on the step bar with the 80% target: information, not a condition */
.rz-goal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rz-goal-bar { position: relative; display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--line-2); flex: none; }
.rz-goal-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--navy); opacity: .75; }
.rz-goal-bar s { position: absolute; left: 80%; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); }
.rz-goal.ok .rz-goal-bar i { background: var(--ok); opacity: 1; }
.rz-goal-t { color: var(--ink-3); font-size: 11.5px; }
.rz-goal.ok .rz-goal-t { color: var(--ok); font-weight: 650; }
/* the 13 causes in three groups */
.rz-reasons { display: grid; gap: 6px; }
.rz-rg { display: grid; gap: 3px; }
.rz-rg-l { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.rz-rg .chips { gap: 5px; }
/* „czy działamy”: an action under the cause, in place */
.rz-act { display: grid; gap: 6px; }
.rz-act-list { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); }
.rz-act-row { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.rz-act-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--navy-3); font-weight: 600; }
.rz-act-open { justify-self: start; }
.rz-act-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--navy-soft); }
.rz-act-l { font-size: 12px; font-weight: 700; color: var(--navy-3); width: 100%; }
.rz-act-form input { height: 32px; font-size: 13px; }
.rz-act-what { flex: 2 1 220px; }
.rz-act-who { flex: 1 1 120px; }
.rz-act-due { flex: 0 0 150px; }
.rz-ou { white-space: nowrap; }
/* 0.87 (second slice): „Za wysoko” and „Za nisko” next to the goal in one line; on a narrower screen the title and the
   words of the goal get shorter (the 80% mark stays on the small bar and in its tip) */
@media (max-width: 1679px) { .rz-wide, .rz-goal-t { display: none !important; } .rz-goal-bar { width: 56px; } }

/* ---------- 0.88 ---------- */
/* „Plan sprzed: 1 mies. · 2 mies. (czas dostawy)” next to the period of the strip */
.rz-lag { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--ink-2); }
.rz-lag-l { color: var(--ink-3); font-weight: 600; }
.rz-lag b { color: var(--navy-3); }
.rz-lag .seg button.on { font-weight: 700; }
.rz-lag-set { border: 0; background: none; padding: 0; font: 600 12px var(--font); color: var(--blue); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.rz-lag-note { font-size: 11.5px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border-radius: 6px; padding: 2px 7px; }
/* „2. miesiąc za wysoko”: the same direction as in the settled periods before */
.rz-streak { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; line-height: 17px; white-space: nowrap; vertical-align: 1px; }
.rz-streak.over { background: var(--orange-soft); color: var(--orange-d); }
.rz-streak.under { background: var(--blue-soft); color: var(--blue); }
.qitem .l2 .rz-streak { margin-left: 0; line-height: 16px; }
/* errors that cancel out at a low accuracy: a strong colour and the link to the items */
.rz-noise-strong { color: var(--bad); font-weight: 700; font-size: 12.5px; }
.rz-noise-strong .rz-link { white-space: nowrap; }
.rz-noise-strong > span { margin-right: 6px; }
.rz-link { border: 0; background: var(--bad-soft); border-radius: 6px; padding: 1px 7px; font: 650 12px var(--font); color: var(--bad); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rz-link:hover, .rz-link:focus-visible { background: var(--bad); color: #fff; outline: none; }
/* what is done about a cause: „W toku · Anna · do 30 lis”, „Nie działamy: …” */
.rz-st { --st: var(--blue); --st-soft: var(--blue-soft); max-width: 300px; min-height: 24px; padding: 2px 9px; border: 1px solid var(--st); border-radius: 12px; background: var(--st-soft); color: var(--navy-3); font: 650 11.5px/1.3 var(--font); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-st.st-in_progress { --st: var(--orange); --st-soft: var(--orange-soft); }
.rz-st.st-done { --st: var(--ok); --st-soft: var(--ok-soft); }
.rz-st.st-skip { --st: var(--ink-3); --st-soft: var(--line-2); color: var(--ink-2); }
.rz-st.late { --st: var(--bad); color: #8A2414; }
.rz-st:hover, .rz-st:focus-visible { box-shadow: 0 1px 4px rgba(18,37,90,.18); outline: none; }
.pt-top-r { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
/* the actions under a cause: rows open their action; the other actions of the cause folded */
.rz-act-row { border: 0; background: none; padding: 2px 0; font: inherit; text-align: left; cursor: pointer; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; min-width: 0; width: 100%; }
.rz-act-row:hover .rz-act-t { text-decoration: underline; text-underline-offset: 2px; }
.rz-act-row .rz-act-t { max-width: 100%; }
.rz-act-m { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rz-act-row.st-in_progress .rz-act-m { color: var(--orange-d); }
.rz-act-row.late .rz-act-m { color: var(--bad); }
.rz-act-row.skip .rz-act-t { color: var(--ink-2); font-weight: 600; }
.rz-act-more { font-size: 12px; color: var(--ink-2); }
.rz-act-more > summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }
.rz-act-more[open] > summary { margin-bottom: 2px; }
.rz-act-btns { gap: 6px; }
.pt-top-b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 25px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.pt-top-b .rz-st { white-space: normal; max-width: 100%; }
.pt-top-b .pt-act { max-width: 100%; }
.pt-top-b .rz-act-form { flex: 1 1 100%; }
/* the strip of the Rozliczenie: on a narrower screen the sentence wraps, so „Plan sprzed” stays in view */
.strip.rz-strip { flex-wrap: wrap; row-gap: 4px; padding-top: 5px; padding-bottom: 5px; }
.strip.rz-strip > b:first-child { flex: 1 1 420px; min-width: 0; white-space: normal; line-height: 1.35; }

/* ---------------------------------------------------------------------------------------------------------------------
   0.89 (Paweł 31.10.2026 po teście 0.88): seven steps. The bar of the steps fits 1280 px; step 2 Wynik (wn-), the view
   switch of step 3 Przyczyny (pz-), step 4 Działania (dz-). */
@media (max-width: 1500px) and (min-width: 761px) {
  .tstep { padding: 0 7px; gap: 5px; font-size: 12px; }
  .tsep { width: 6px; }
  .cyc-chip { padding: 0 8px; margin-right: 4px; }
  .cyc-chip .cyc-chip-st { display: none; }
  .topbar { gap: 8px; }
  .user-chip > .small { display: none; }
}
/* „Notatki” and „Zgłoś uwagę” keep their words while there is room for the seven steps */
@media (max-width: 1365px) and (min-width: 761px) { .topbar .fb-btn > span { display: none; } }
@media (max-width: 1180px) and (min-width: 761px) { .tstep:not(.on) { font-size: 0; gap: 0; padding: 0 5px; } .tstep:not(.on) .cnt { font-size: 11px; margin-left: 4px; } }

/* step 3 Przyczyny: the view switch on top of the content and the way back from the items of one group */
.pz-views { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.pz-views-l { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pz-seg button { min-width: 84px; }
.pz-crumb { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line); }
.pz-back { color: var(--navy); font-weight: 650; }
.pz-measure { white-space: nowrap; }
.pill.pz-main { background: var(--navy); color: #fff; text-decoration: none; flex: none; }
/* 0.92: the line above the group and Pareto tables (plan, month, unit, main measure) and their row „Razem” */
.pz-tnote { margin: 2px 0 6px; }
.pf-tbl tr.pf-total td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 650; color: var(--navy-3); background: none; box-shadow: none; }

/* step 2 Wynik */
.wn-pane { display: flex; flex-direction: column; gap: 14px; }
/* 0.91 (Paweł 31.10 po teście 0.90): four equal, full charts in a 2 × 2 grid; the Pareto and „Do zrobienia” under them */
.wn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wn-card { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; break-inside: avoid; }
.wn-card-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wn-card-h h3 { font-size: 15px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.wn-star { color: var(--orange); font-size: 13px; }
.wn-tag { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wn-card-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; margin-bottom: 2px; }
.wn-v { font-size: 26px; font-weight: 750; color: var(--navy-3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.wn-d { font-size: 12.5px; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.wn-d.good { color: var(--ok); } .wn-d.bad { color: var(--bad); }
.wn-card-f { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2px 10px; min-height: 18px; }
.wn-card-f .wn-note { flex: 1 1 260px; margin: 0; }
.wn-lagq { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex: none; }
.wn-below { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
/* the full chart (chart.js fullChart) */
.fchart { width: 100%; min-width: 0; position: relative; }
.fchart-box { width: 100%; touch-action: pan-y; }
.fchart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fchart-svg .fc-tick, .fchart-svg .fc-unit, .fchart-svg .fc-val { font-family: var(--font); font-variant-numeric: tabular-nums; }
.fchart-svg .fc-unit { font-weight: 600; }
.fc-legend { gap: 6px 14px; font-size: 12px; margin: 2px 0 2px; }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fc-legend span.on { font-weight: 700; color: var(--navy-3); }
.fc-sw { flex: none; }
.wn-note { margin-top: 4px; }
.wn-side h3 { font-size: 14.5px; }
.wn-side { padding: 16px; }
.wn-pr-head { display: flex; gap: 8px; margin: 10px 0 4px; }
.wn-prs { display: flex; flex-direction: column; }
.wn-pr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(40px, 1fr) 44px 44px; gap: 8px; align-items: center; padding: 5px 4px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.wn-pr:hover { background: var(--line-2); }
.wn-pr-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.wn-pr-b { height: 9px; background: var(--line-2); border-radius: 5px; overflow: hidden; }
.wn-pr-b i { display: block; height: 100%; background: var(--navy); border-radius: 5px; }
.wn-pr:not(.in80) .wn-pr-b i { background: #A9B1BE; }
.wn-pr-v { text-align: right; font-variant-numeric: tabular-nums; }
.wn-pr-c { text-align: right; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; width: 44px; }
.wn-80 { border-top: 2px dashed var(--orange); margin: 3px 0 4px; position: relative; height: 0; }
.wn-80 span { position: absolute; right: 0; top: -9px; background: #fff; padding: 0 0 0 6px; font-size: 11px; font-weight: 700; color: var(--orange-d); }
.wn-todo { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-top: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.wn-todo:first-of-type { margin-top: 8px; }
.wn-todo:hover { background: var(--line-2); }
.wn-todo-n { font-size: 20px; min-width: 38px; text-align: right; color: var(--navy-3); font-variant-numeric: tabular-nums; }
.wn-todo.todo .wn-todo-n { color: var(--orange-d); } .wn-todo.late .wn-todo-n { color: var(--bad); } .wn-todo.done .wn-todo-n { color: var(--ok); }
.wn-todo-l { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: 13px; }
.wn-todo-l small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.wn-todo svg { color: var(--ink-3); }
.wn-ok { color: var(--ok); font-weight: 650; }
.wn-gear.on { background: var(--navy-soft); }
.wn-choose { padding: 16px 18px; border-color: #F7B48A; }
.wn-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; }
.wn-opt { border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; }
.wn-opt.on { border-color: var(--navy); background: var(--navy-soft); }
.wn-opt.main { box-shadow: 0 0 0 2px var(--orange); border-color: var(--orange); }
.wn-opt-b { border: 0; background: none; font: inherit; display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer; text-align: left; color: var(--navy-3); }
.wn-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #B9C3D4; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #fff; flex: none; }
.wn-opt.on .wn-check { background: var(--navy); border-color: var(--navy); }
.wn-mainbtn { border: 0; border-top: 1px solid rgba(18,37,90,.12); background: none; font: 600 11.5px var(--font); color: var(--ink-2); padding: 5px 10px; text-align: left; cursor: pointer; }
.wn-mainbtn.on { color: var(--orange-d); }
.wn-choose-foot { gap: 8px; }
@media (max-width: 1100px) { .wn-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .wn-grid, .wn-below { grid-template-columns: minmax(0, 1fr); } }
@media print { .wn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wn-card { box-shadow: none; } .fchart-svg .fc-hover { display: none; } }

/* step 4 Działania */
.dz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 14px; align-items: start; }
.dz-causes .stack > .card + .card, .dz-causes .stack > * + * { margin-top: 10px; }
.dz-cause { padding: 14px 16px; }
.dz-cause.main { border-left: 4px solid var(--navy); }
.dz-cause-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dz-share { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.dz-bar { width: 90px; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; flex: none; }
.dz-bar i { display: block; height: 100%; border-radius: 4px; }
.dz-lesson { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dz-lesson-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-d); flex: none; }
.dz-lesson-in { flex: 1; height: 32px; }
.dz-lesson-ok { font-size: 11.5px; color: var(--ok); min-width: 54px; }
.dz-rest summary { cursor: pointer; font-weight: 650; color: var(--navy); margin: 6px 0; }
.dz-earlier { padding: 16px; }
@media (max-width: 1100px) { .dz { grid-template-columns: minmax(0, 1fr); } }
/* 0.89 (ocena cyklu w 7 krokach, idea 1): the chosen measures in one line; how a tile averages */
.wn-mline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0 0 10px; color: var(--ink-2); }
.wn-mchange { border: 0; background: none; padding: 0; font: 600 12.5px var(--font); color: var(--blue); cursor: pointer; }
.wn-mchange:hover { text-decoration: underline; }
.wn-how { font-size: 11px; margin-top: 2px; }

/* 0.91.2: the full name of a measure next to its short name (WAPE, Bias, MAE…) */
.wn-full { font-weight: 400; font-size: 13px; color: var(--muted, #6b7280); margin-left: 8px; }
.wn-opt .wn-full { display: block; margin: 2px 0 0 0; font-size: 12px; }

/* 0.92: Wynik, the lines of the charts as a multiple choice (M-1, M-2, M-3, M-6, czas dostawy) */
.wn-lchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wn-lchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 12px var(--font); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.wn-lchip:hover { border-color: var(--lc); color: var(--ink-2); }
.wn-lchip.on { border-color: var(--lc); color: var(--navy-3); background: color-mix(in srgb, var(--lc) 9%, #fff); }
.wn-lsw { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--lc); opacity: .35; }
.wn-lsw.dash { border-top-style: dashed; }
.wn-lchip.on .wn-lsw { opacity: 1; }
/* 0.92: on a laptop (1280) the headers with units wrap instead of pushing „Ocena” out of the card */
@media (max-width: 1365px) { .pf-tbl th { white-space: normal; vertical-align: bottom; line-height: 1.25; } .pf-tbl .n { padding-right: 8px; } }
@media (max-width: 1365px) { .pf-tbl { font-size: 12.5px !important; } }
/* 0.92: Pareto on a 1280 px laptop: a narrower side card, so the table keeps its last column („Przyczyny”) in view */
@media (max-width: 1365px) and (min-width: 1101px) { .pf, .pane.pf.pt { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 14px; } .pt-tbl .pt-stack-td { min-width: 70px; } }