/* ============================================================
   exec.css — execution stage (SPEC-v2-sim §2, §5, §7, §9.6)
   Extends tbank.css: same white cards, same yellow accent, same
   radii. Everything here encodes a state the player must notice.

   DENSITY RULE. A round screen must fit a real decision on one
   screen, so the unit of layout is a ROW with a fixed 3-part
   rhythm (identity · measured state · controls), not a card grid.
   Rows collapse to stacked blocks below 760px.

   NOISE RULE (§9.6). There is exactly ONE event-card class,
   `.ev-card`, with no modifiers anywhere in this file. A `szum`
   card and a risk card are the same DOM and the same pixels.
   Do not add a type-dependent selector here.
   ============================================================ */

:root {
  --series: #2F6FED;        /* the single data hue: magnitude, one meaning */
  --series-soft: #E7EEFD;
  --plan: #8A9099;          /* plan / reference line — always dashed + labelled */
  --rag-g: #2BA84A;
  --rag-a: #C98A00;
  --rag-r: #D93636;
}

/* ---------- run bar ---------- */
.runbar {
  position: sticky;
  top: 58px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.runbar-round {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.01em;
}
.runbar-round small { font-size: 12px; font-weight: 700; color: var(--muted); }
.runbar-sep { width: 1px; align-self: stretch; background: var(--line); }
.runbar-metric { min-width: 132px; }
.runbar-metric .label { margin-bottom: 3px; }
.runbar-metric b { font-variant-numeric: tabular-nums; font-size: 15px; }
.runbar .progress { margin-top: 5px; }
.runbar-score {
  margin-left: auto;
  text-align: right;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.runbar-score b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- tabs ---------- */
.ex-tabs { margin-bottom: 16px; }
.ex-tabs .tab .count {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.ex-tabs .tab .count.hot { background: var(--bad-bg); color: var(--bad); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tile {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: #fff;
}
.tile .label { margin-bottom: 4px; }
.tile b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tile.bad b { color: var(--bad); }
.tile.ok b { color: var(--ok); }

/* ---------- progress rows (report) ---------- */
.prow {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) minmax(140px, 1.4fr) minmax(140px, 1.4fr) 96px;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.prow:last-child { border-bottom: none; }
.prow-name { min-width: 0; }
.prow-name button {
  all: unset;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  display: block;
  /* `all: unset` also drops the width constraints, so a long project name would push the
     whole page sideways at phone width. Pin it back. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prow-name button:hover { text-decoration: underline; }
.prow-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.meter .meter-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.meter .progress { height: 8px; }
.meter .progress-bar { background: var(--series); }
.meter .progress-bar.over { background: var(--over); }
.meter .progress-bar.plan { background: var(--plan); }

/* RAG dot — status, never carried by colour alone: the letter is inside. */
.rag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.rag-G { background: var(--rag-g); }
.rag-A { background: var(--rag-a); }
.rag-R { background: var(--rag-r); }
.rag-X { background: var(--muted); }

/* ---------- event cards (§9.6 — one class, no modifiers) ---------- */
.ev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ev-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.ev-card h4 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.ev-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.ev-where { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ev-opt {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.ev-opt:hover { border-color: var(--muted); }
.ev-opt.on { border-color: var(--accent); background: #FFFCEB; }
.ev-opt input { margin-top: 3px; accent-color: var(--accent); }
.ev-opt .cost { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- decision rows ---------- */
.dec {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
}
.dec + .dec { margin-top: 12px; }
.dec.focus { box-shadow: 0 0 0 3px rgba(255, 221, 45, .75); }
.dec.blocked { border-color: var(--bad); }
.dec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dec-head h4 { margin: 0; font-size: 16px; font-weight: 800; max-width: 100%; overflow-wrap: anywhere; }
.dec-head h4 button { max-width: 100%; overflow-wrap: anywhere; }
.dec-head .pj-meta { margin-top: 3px; }
.dec-state { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.dec-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.dec-controls .field { margin-bottom: 0; }
.dec-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dec-note b { font-variant-numeric: tabular-nums; }
.dec-danger { background: var(--bad-bg); color: var(--bad); font-weight: 600; }
.dec-danger b { color: var(--bad); }
.dec-warn { background: var(--warn-bg); color: #8a6000; }

/* segmented action picker */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--line-soft); border-radius: 12px; }
.seg button {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.seg button:hover { background: #fff; }
.seg button.on { background: #fff; box-shadow: var(--shadow); }
.seg button.on.danger { background: var(--bad); color: #fff; }
.seg button:disabled { opacity: .4; cursor: not-allowed; }

/* sticky submit bar */
.submitbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 -2px 14px rgba(20, 24, 31, .1);
}
.submitbar .grow { flex: 1 1 220px; min-width: 0; font-size: 13px; line-height: 1.45; }

/* ---------- scorecard ---------- */
.formula {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg);
}
.formula .op { display: flex; align-items: center; font-size: 18px; font-weight: 800; color: var(--muted); }
.kpi {
  flex: 1 1 120px;
  min-width: 108px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}
.kpi .label { margin-bottom: 4px; line-height: 1.3; }
.kpi b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .progress { height: 6px; margin-top: 6px; }
.kpi .progress-bar { background: var(--series); }
.kpi.neg b { color: var(--bad); }
.kpi-total { background: var(--accent); }
.kpi-total b { font-size: 26px; }
.formula.zeroed .kpi:not(.kpi-total) { opacity: .45; }
.formula.zeroed .kpi:not(.kpi-total) b { text-decoration: line-through; }
.zero-why {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.kpi-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.kpi-explain > div { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.kpi-explain h5 { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.kpi-explain p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.kpi-explain .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- error list ---------- */
.err-group + .err-group { margin-top: 16px; }
.err-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  border-left: 4px solid var(--line);
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.5;
}
.err-item + .err-item { margin-top: 8px; }
.err-item .grow { flex: 1 1 auto; min-width: 0; }
.err-czerwony { border-left-color: var(--bad); background: var(--bad-bg); color: #8f2020; }
.err-pomaranczowy { border-left-color: var(--warn); background: var(--warn-bg); color: #7a5400; }
.err-niebieski { border-left-color: var(--series); background: var(--series-soft); color: #1c407f; }

/* ---------- charts ---------- */
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; max-width: 100%; height: auto; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--series); }
.swatch.plan { background: transparent; border-top: 2px dashed var(--plan); height: 0; }

/* ---------- project card, execution half ---------- */
.pcx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.pcx-log { margin: 0; padding: 0; list-style: none; }
.pcx-log li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
  line-height: 1.5;
}
.pcx-log li:last-child { border-bottom: none; }
.pcx-log .when { flex: 0 0 74px; font-weight: 700; color: var(--muted); font-size: 12px; }
.pcx-risk { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* ---------- history table ---------- */
.hist-wrap { overflow-x: auto; }
.hist { min-width: 560px; }
.hist td, .hist th { font-variant-numeric: tabular-nums; }

/* ---------- confirm dialog ---------- */
.confirm {
  width: min(460px, calc(100vw - 24px));
  border: none;
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.confirm::backdrop { background: rgba(20, 24, 31, .45); }
.confirm h3 { margin-top: 0; }
.confirm .sunk {
  margin: 14px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--bad-bg);
  color: var(--bad);
}
.confirm .sunk b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.confirm .row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .runbar { position: static; gap: 12px; }
  .runbar-sep { display: none; }
  .runbar-score { margin-left: 0; width: 100%; text-align: left; }
  .prow { grid-template-columns: 1fr; gap: 8px; }
  .prow-rag { justify-self: start; }
  .formula { padding: 12px; }
  .kpi { flex-basis: 100%; }
  .formula .op { justify-content: center; width: 100%; }
  .submitbar { padding: 12px 14px; }
}