/* Kwadrans.map 3.0 „Pracownia” · powłoka (WP-S1-A; SPEC-UX-v2 §3, §6, §12, §13; przeniesione i uporządkowane z mock/mock.css).
 * Kolory wyłącznie z tokenów marki (tokens.css) i ról gęstości (pro-tokens.css, dwa poziomy data-view). Stały ekran:
 * html/body bez przewijania (100dvh), przewijają się tylko listy i tabele wewnątrz paneli, Karty, arkusza, okien i rozmowy.
 */

:root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --asst-w: 360px; --legend-w: 272px; --karta-w: 336px; --t-ui: var(--dur-short, 200ms); }

/* ─────────────── podstawa ─────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; margin: 0; }
body { background: var(--bg); color: var(--ink); font: var(--pro-fw-ui, 450) var(--pro-fs-ui)/var(--pro-lh-ui) var(--font-sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
button:disabled { opacity: .55; }
:focus-visible { outline: var(--pro-focus-w, 2px) solid var(--focus); outline-offset: var(--pro-focus-gap, 1px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--surface); color: var(--ink); padding: 8px 12px; border-radius: var(--pro-r); box-shadow: var(--sh-2); }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.grow { flex: 1 1 auto; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
.kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; font: 500 12px/1 var(--font-sans); color: var(--ink-2); background: var(--surface); white-space: nowrap; }
:root[data-keys="off"] .kbd-one { display: none !important; }

/* ─────────────── siatka (§3.1): 48 | 1fr | 24 × 64 | scena | asystent ─────────────── */
.ws {
  height: 100vh; height: 100dvh; display: grid;
  grid-template-rows: var(--pro-top, 48px) minmax(0, 1fr) 24px;
  grid-template-columns: 64px minmax(0, 1fr) var(--asst-w);
  grid-template-areas: "top top top" "rail stage asst" "status status status";
  transition: grid-template-columns var(--pro-dur-panel, 250ms) var(--ease-standard);
}
.ws > * { min-width: 0; min-height: 0; }
.top { grid-area: top; } .rail { grid-area: rail; } .stage { grid-area: stage; } .asst { grid-area: asst; } .status { grid-area: status; }

/* ─────────────── pasek górny (§6.1) ─────────────── */
.top { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.brand { display: flex; align-items: center; flex: none; }
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.logo svg { display: block; flex: none; }
.logo-word { font: 600 15px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; }
.tb { display: inline-flex; align-items: center; gap: 6px; height: var(--pro-ctl); padding: 0 10px; border: 0; border-radius: var(--pro-r); background: transparent; color: var(--ink); white-space: nowrap; }
.tb:hover:not(:disabled) { background: var(--fill); }
.tb-menu .tb-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
#btn-project .tb-label { font-weight: 550; }
.tb-icon { width: var(--pro-ctl); padding: 0; justify-content: center; }
.tb-group { display: flex; gap: 2px; flex: none; }
.tb-switch { gap: 8px; }
.sw-track { width: 32px; height: 18px; border-radius: 999px; background: var(--fill-2); border: 1px solid var(--ctl); position: relative; flex: none; transition: background var(--t-ui); }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-2); transition: transform var(--t-ui) var(--ease-standard); }
.tb-switch[aria-checked="true"] .sw-track { background: var(--ink); border-color: var(--ink); }
.tb-switch[aria-checked="true"] .sw-knob { transform: translateX(14px); background: var(--on-ink); }
.tb-show-sm { display: none; }
.variants { display: flex; align-items: center; height: 32px; padding: 2px; gap: 2px; border-radius: var(--pro-r); background: var(--fill); flex: none; }
.var-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-weight: 550; justify-content: center; }
.var-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--pro-sh-1); }
.var-btn:hover:not([aria-pressed="true"]):not(:disabled) { background: var(--fill-2); }
.var-lock { display: inline-flex; color: var(--ink-3); }
.var-add { padding: 0 6px; min-width: 28px; color: var(--ink-2); }
.var-btn.is-glow { animation: glow 600ms var(--ease-standard) 1; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--cherry-tint); } 40% { box-shadow: 0 0 0 4px var(--cherry-tint), inset 0 0 0 1px var(--cherry); } 100% { box-shadow: 0 0 0 0 transparent; } }
.search { position: relative; flex: 1 1 360px; max-width: 360px; min-width: 160px; }
.search input { width: 100%; height: 36px; padding: 0 36px; border: 0; border-bottom: 1px solid var(--ctl); border-radius: 8px 8px 0 0; background: var(--surface-2); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search-ic { position: absolute; left: 10px; top: 10px; color: var(--ink-3); pointer-events: none; display: inline-flex; }
.search-kbd { position: absolute; right: 8px; top: 8px; pointer-events: none; }
.search-list { position: absolute; left: 0; right: 0; top: 40px; max-height: min(60vh, 440px); overflow: auto; background: var(--surface); border-radius: 10px; box-shadow: var(--pro-sh-pop); padding: 6px; z-index: 40; min-width: 340px; }
.opt-sec { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.opt[aria-selected="true"] { background: var(--fill); }
.opt[aria-disabled="true"] { cursor: default; color: var(--ink-2); }
.opt-ic { display: inline-flex; color: var(--ink-2); flex: none; }
.opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-kind { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.opt-note { padding: 4px 10px 8px; font-size: 13px; line-height: 18px; color: var(--ink-2); max-width: 48ch; }
.tb-cmp { flex: none; }
.tb-cmp[aria-disabled="true"] { color: var(--ink-2); }

/* ─────────────── przyciski i drobne kontrolki (§12) ─────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--pro-ctl); padding: 0 14px; border: 0; border-radius: var(--pro-r); font-weight: 550; white-space: nowrap; transition: background var(--dur-micro, 150ms); }
.btn-1 { background: var(--cherry); color: var(--on-cherry); font-weight: 600; }
.btn-1:hover:not(:disabled) { background: var(--cherry-hover); }
.btn-1:active:not(:disabled) { background: var(--cherry-press); }
.btn-2 { background: var(--fill); color: var(--ink); }
.btn-2:hover:not(:disabled) { background: var(--fill-2); }
.btn-3 { background: transparent; color: var(--ink); }
.btn-3:hover:not(:disabled) { text-decoration: underline; }
.btn-sm { height: var(--pro-ctl-sm); padding: 0 12px; }
.btn-ic { display: inline-flex; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--pro-ctl); height: var(--pro-ctl); flex: none; border: 0; border-radius: var(--pro-r); background: transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--fill); color: var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--fill-2); color: var(--ink); }
.icon-sm { width: 28px; height: 28px; }
.link { border: 0; background: none; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; font-weight: 500; min-height: 24px; text-align: left; }
.link:hover { text-decoration-color: var(--ink); }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--pro-r); background: var(--fill); }
.seg-btn { height: calc(var(--pro-ctl-sm) - 4px); padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--pro-sh-1); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 12px/1 var(--font-sans); white-space: nowrap; vertical-align: 1px; }
.chip-propozycja { border: 1px dashed var(--cherry); color: var(--cherry-text); }
.chip-szacunek, .chip-zalozenie { border: 1px dashed var(--ink-3); color: var(--ink-2); }
.chip-status, .chip-wip { background: var(--fill); color: var(--ink-2); }
.chip-stale { color: var(--warn); }
.chip-key { color: var(--ink-2); }
.chip-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.chip-ic { display: inline-flex; }
.badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 11px/18px var(--font-sans); text-align: center; }
.badge-dot { background: var(--fill-2); color: var(--ink); height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; }
.badge-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-mark); line-height: 16px; }
.is-ringed { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus) !important; border-radius: var(--pro-r); }
.is-pulse { animation: pulse 600ms var(--ease-standard) 1; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ─────────────── szyna (§6.2) ─────────────── */
.rail { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 4px; background: var(--surface); border-right: 1px solid var(--line); z-index: 5; }
.rail-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 56px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); }
.rail-btn:hover { background: var(--fill); color: var(--ink); }
.rail-btn[aria-pressed="true"] { background: var(--fill-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.rail-ic { display: inline-flex; }
.rail-l { font: 500 12px/14px var(--font-sans); }
.rail-prev { position: absolute; top: 8px; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

/* ─────────────── scena i elementy pływające (§3.3) ─────────────── */
.stage { position: relative; overflow: hidden; background: var(--map-land, var(--bg)); container-type: size; --po: 0; --co: 0; --pw: 320px; --cw: 336px; --sh: 0px; --dl: 0px; --dr: 0px; --palh: 44px; --free-l: 0px; --free-r: 100%; --cmp: 0; }
.stage:focus { outline: none; }
.map { position: absolute; inset: 0 var(--dr) 0 var(--dl); }
.map:focus-visible { outline-offset: -3px; }
.nowrap { white-space: nowrap; }
.map-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 36ch; padding: 10px 16px; border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: var(--sh-1); font-size: 13px; text-align: center; }
.float { position: absolute; z-index: 10; background: var(--surface); border-radius: var(--r-in, 12px); opacity: 0; transform: translateY(8px); transition: opacity var(--t-ui) var(--ease-standard), transform var(--t-ui) var(--ease-standard); }
.float.is-in { opacity: 1; transform: none; }
.panel { left: calc(var(--dl) + 12px); top: 12px; bottom: calc(var(--sh) + 12px); width: var(--pw); box-shadow: var(--sh-2); display: flex; flex-direction: column; transform: translateX(-8px); }
.panel.is-in { transform: none; }
.panel.is-pinned { left: 0; top: 0; bottom: var(--sh); border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); z-index: 9; }
.legend { left: calc(var(--dl) + 12px + var(--po) * (var(--pw) + 12px)); top: calc(12px + var(--cmp) * 56px); width: var(--legend-w); box-shadow: var(--sh-1); padding: 6px 8px 12px 16px; display: flex; flex-direction: column; opacity: 1; transform: none; transition: left var(--t-ui) var(--ease-standard); overflow: hidden; }
.legend.is-chip { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.legend.is-chip .leg-body > :not(.leg-keep) { display: none; }
.legend.is-chip .leg-body:not(:has(> .leg-keep)) { display: none; }
.karta { right: calc(var(--dr) + 12px); top: 12px; width: var(--karta-w); max-height: calc(100% - 24px - var(--sh) - var(--card-bottom, 0px)); box-shadow: var(--sh-2); display: flex; flex-direction: column; transform: translateX(8px); }
.karta.is-in { transform: none; }
.karta.is-pinned { right: 0; top: 0; max-height: calc(100% - var(--sh)); height: calc(100% - var(--sh)); border-radius: 0; box-shadow: none; border-left: 1px solid var(--line); }
.karta.is-swap .kc-body, .karta.is-swap .kc-head { animation: swap var(--dur-micro, 150ms) var(--ease-standard) 1; }
@keyframes swap { from { opacity: .3; } to { opacity: 1; } }
.cmpchip { top: 12px; left: 12px; right: 12px; margin-inline: auto; width: fit-content; max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; box-shadow: var(--sh-2); transform: translateY(-8px); }
.cmpchip.is-in { transform: none; }
/* pas dolny: wyśrodkowany w wolnej mapie (między panelem a Kartą / kontrolkami mapy), szerokość z treści */
.palette, .optbar, .msg { left: calc(var(--free-l) + 12px); right: calc(100% - var(--free-r) + 12px); margin-inline: auto; width: fit-content; transform: translateY(8px); }
.palette.is-in, .optbar.is-in, .msg.is-in { transform: none; }
.palette { bottom: calc(var(--sh) + 12px); height: var(--pro-palette, 44px); display: flex; align-items: center; padding: 0 4px; gap: 2px; box-shadow: var(--sh-1); max-width: calc(var(--free-r) - var(--free-l) - 24px); }
.palette.is-readonly { height: 32px; padding: 0 14px; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.pal-ro, .pal-wip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 8px; color: var(--ink-2); font-size: var(--pro-fs-cap); }
.pal-btn { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--pro-palette, 44px) - 4px); min-width: 64px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: 500 13px/1 var(--font-sans); white-space: nowrap; justify-content: center; }
.pal-btn:hover:not(:disabled) { background: var(--fill); }
.pal-btn[aria-pressed="true"] { background: var(--pro-active); color: var(--pro-on-active); }
.pal-ic { display: inline-flex; }
.pal-sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex: none; }
.palette.is-compact .pal-btn { flex-direction: column; gap: 2px; min-width: 48px; padding: 0 6px; font-size: 12px; }
.palette.is-compact .pal-ic svg { width: 18px; height: 18px; }
.palette.is-icons .pal-w { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.palette.is-icons .pal-btn { min-width: 40px; padding: 0 4px; }
.palette.is-icons .pal-wip { white-space: normal; max-width: 220px; line-height: 14px; }
.optbar { bottom: calc(var(--sh) + 12px); min-height: var(--pro-palette, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 8px; box-shadow: var(--sh-1); max-width: calc(var(--free-r) - var(--free-l) - 24px); }
.optbar > * { flex: none; }
.optbar > .grow { flex: 1 1 0; min-width: 8px; }
.opt-back { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 500; }
.opt-back:hover { background: var(--fill); color: var(--ink); }
.opt-name { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--pro-active); color: var(--pro-on-active); font-weight: 600; white-space: nowrap; }
.opt-slot { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opt-cancel { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.opt-cancel-ic { display: none; }
/* wąska wolna mapa: jeden wiersz (§6.5) – słowa chowane wizualnie, Anuluj jako ikona; potem także nazwa narzędzia i opisy */
.optbar.is-compact { flex-wrap: nowrap; }
.optbar.is-compact .opt-slot { flex-wrap: nowrap; }
.optbar.is-compact .opt-w, .optbar.is-icons .opt-nw { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.optbar.is-compact .opt-cancel-ic { display: inline-flex; }
.optbar.is-compact .opt-cancel .kbd { display: none; }
.optbar.is-compact .opt-cancel .btn { min-width: 32px; padding: 0 6px; }
.optbar.is-icons .opt-txt:not([id]) { display: none; }
.optbar.is-icons .opt-name { padding: 0 8px; }
.msg { bottom: calc(var(--sh) + 12px + var(--palh) + 8px); width: min(560px, calc(var(--free-r) - var(--free-l) - 24px)); min-height: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 44px 10px 16px; box-shadow: var(--sh-2); }
.msg > .msg-x { position: absolute; top: 8px; right: 6px; }
.msg.is-swap { animation: swap var(--dur-micro, 150ms) var(--ease-standard) 1; }
.msg-count { font: 600 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; flex-basis: 100%; }
.msg-text { flex: 1 1 240px; font-size: var(--pro-fs-body); line-height: var(--pro-lh-body); }
.msg-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-ic { display: inline-flex; }
.msg-ic-err { color: var(--err-mark); }
.msg.is-error { border-left: 4px solid var(--err-mark); }
.msg.is-collapsed { width: fit-content; min-height: 0; padding: 0; background: transparent; box-shadow: none; }
.msg-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-1); color: var(--ink); font-weight: 550; }
.sheet { position: absolute; left: var(--dl); right: var(--dr); bottom: 0; height: var(--sh); z-index: 11; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-2); display: flex; flex-direction: column; opacity: 0; transform: translateY(12px); transition: opacity var(--t-ui) var(--ease-standard), transform var(--t-ui) var(--ease-standard); }
.sheet.is-in { opacity: 1; transform: none; }
.cursorhint { position: absolute; z-index: 30; pointer-events: none; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--on-ink); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.ctx-anchor { position: fixed; width: 1px; height: 1px; }

/* kontrolki widoku MapLibre (prawy dolny: + − kompas 36 × 36, skala, ⓘ) – omijają Kartę i arkusz */
.stage.is-band .maplibregl-ctrl-bottom-right { right: 0 !important; }
.stage .maplibregl-ctrl-bottom-right { right: calc(var(--dr) + var(--co) * (var(--cw) + 12px)); bottom: var(--sh); transition: right var(--t-ui) var(--ease-standard), bottom var(--t-ui) var(--ease-standard); z-index: 6; }
.stage .maplibregl-ctrl button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; box-shadow: none; }

/* ─────────────── panel z szyny (§6.3) ─────────────── */
.p-head { display: flex; align-items: center; gap: 4px; height: var(--pro-head); padding: 0 8px 0 var(--pro-pad); border-bottom: 1px solid var(--line); flex: none; }
.p-title { flex: 1; font: 600 var(--pro-fs-h1)/var(--pro-lh-h1) var(--font-sans); }
.p-title:focus { outline: none; }
.p-title:focus-visible { outline: 2px solid var(--focus); }
.p-body { flex: 1; min-height: 0; overflow: auto; padding: var(--pro-pad); display: flex; flex-direction: column; gap: 12px; }
.p-empty-wrap { display: flex; flex-direction: column; gap: 12px; }
.p-empty { color: var(--ink-2); font-size: var(--pro-fs-body); line-height: var(--pro-lh-body); max-width: 46ch; }
.p-note { color: var(--ink-2); font-size: 13px; line-height: 19px; }
.p-interim { display: flex; flex-direction: column; gap: 12px; }
.p-interim > .btn { align-self: flex-start; }
.p-scope { font-size: 12px; line-height: 16px; color: var(--ink-3); }
.p-lead { font-size: var(--pro-fs-body); line-height: var(--pro-lh-body); color: var(--ink); font-weight: 550; }
.p-ops, .p-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.p-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.p-op-ic { display: inline-flex; color: var(--ink-2); flex: none; }
.p-op-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-op-n { font-size: 13px; line-height: 18px; color: var(--ink); font-weight: 550; overflow-wrap: anywhere; }
.p-op-k { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.p-op-acts { display: flex; gap: 4px; flex: none; }
.p-sec { display: flex; flex-direction: column; gap: 6px; }
.p-h { font: 600 12px/16px var(--font-sans); color: var(--ink-2); text-transform: none; }
.p-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 400 13px/18px var(--font-sans); }
.p-item:hover { background: var(--fill); }
.p-item[aria-pressed="true"] { background: var(--fill-2); border-color: var(--line-2); font-weight: 600; }
.p-item[disabled] { color: var(--ink-3); cursor: not-allowed; }
.p-item-s { font-size: 12px; line-height: 16px; color: var(--ink-2); font-weight: 400; }
.p-disc { font-size: 12px; line-height: 16px; }
.p-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; line-height: 18px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.kv dt { color: var(--ink-2); } .kv dd { color: var(--ink); font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.src-stale { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }

/* ─────────────── legenda (rama, §6.4) ─────────────── */
.leg-head { display: flex; align-items: center; gap: 4px; min-height: 32px; flex: none; }
.leg-title { flex: 1; min-width: 0; font: 600 14px/20px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 8px; }
.leg-wait { font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ─────────────── Karta (rama, §6.7) ─────────────── */
.kc-head { display: flex; align-items: flex-start; gap: 10px; min-height: 56px; padding: 10px 6px 8px var(--pro-pad); border-bottom: 1px solid var(--line); flex: none; }
.kc-ic { display: inline-flex; color: var(--ink-2); margin-top: 2px; }
.kc-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kc-title { font: 600 var(--pro-fs-h1)/var(--pro-lh-h1) var(--font-sans); }
.kc-title:focus { outline: none; } .kc-title:focus-visible { outline: 2px solid var(--focus); }
.kc-sub { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kc-note { padding: 8px var(--pro-pad); font-size: 13px; color: var(--ink-2); background: var(--surface-2); flex: none; }
.kc-tabs { display: flex; gap: 2px; padding: 6px var(--pro-pad) 0; border-bottom: 1px solid var(--line); flex: none; }
.kc-tabs [role="tab"] { height: 34px; padding: 0 10px; border: 0; background: none; color: var(--ink-2); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kc-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.kc-body { flex: 1; min-height: 0; overflow: auto; padding: var(--pro-pad); display: flex; flex-direction: column; gap: 14px; }
.kc-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px var(--pro-pad) 10px; border-top: 1px solid var(--line); flex: none; }
.kc-info { font-size: 12px; line-height: 16px; color: var(--ink-2); }
.kc-legal { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-2); padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.kc-num { font: 600 var(--pro-fs-num)/var(--pro-lh-num) var(--font-sans); font-variant-numeric: tabular-nums; }
.kc-expand { display: none; }
.karta.is-mini { max-height: none; }
.karta.is-mini > :not(.kc-head) { display: none !important; }
.karta.is-mini .kc-head { border-bottom: 0; align-items: center; }
.karta.is-mini .kc-sub { display: none; }
.karta.is-mini .kc-expand { display: inline-flex; align-items: center; gap: 4px; flex: none; }

/* ─────────────── arkusz Wyniki (rama) ─────────────── */
.sh-head { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 var(--pro-pad); border-bottom: 1px solid var(--line); flex: none; }
.sh-title { font: 600 var(--pro-fs-h2)/var(--pro-lh-h2) var(--font-sans); }
.sh-tabs { display: flex; gap: 2px; height: 100%; }
.sh-tabs [role="tab"] { height: 100%; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font-weight: 550; border-bottom: 2px solid transparent; }
.sh-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.sh-body { flex: 1; min-height: 0; overflow: auto; padding: 12px var(--pro-pad) 16px; display: flex; flex-direction: column; gap: 12px; }

/* ─────────────── asystent (§8.1): prawa kolumna na całą wysokość, zwinięta 56 px ─────────────── */
.asst { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); position: relative; z-index: 6; overflow: hidden; }
.asst-head { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line); flex: none; }
.asst-title { flex: 1; min-width: 0; font: 600 14px/18px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-by { font-weight: 500; color: var(--ink-2); }
.asst-toggle { padding: 0 8px; color: var(--ink-2); }
.asst-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.asst-wait { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.asst-note { font: 400 var(--pro-fs-chat, 15px)/var(--pro-lh-chat, 22px) var(--font-read); color: var(--ink-2); }
.asst-rail { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 8px 4px; }
.asst-rail .rail-btn { width: 48px; }
.asst-task { font: 600 11px/16px var(--font-sans); color: var(--ink-2); padding: 0 6px; border-radius: 999px; background: var(--fill-2); }
.ws[data-asst="closed"] .asst-body { display: none; }
.ws[data-asst="closed"] .asst-rail { display: flex; }
.ws[data-asst="closed"] .asst-title { display: none; }
.ws[data-asst="closed"] .asst-head { padding: 0; justify-content: center; }
.asst-btn-l { font-size: 13px; }

/* ─────────────── pasek stanu (§6.12): nic się nie nakłada i nota nie jest ucinana ─────────────── */
.status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; background: var(--surface-2); border-top: 1px solid var(--line); font: 400 12px/16px var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; z-index: 6; }
.st-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.st-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.st-btn { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); font: inherit; }
.st-btn:hover { background: var(--fill); color: var(--ink); }
.st-scope { flex: none; }
.st-left > * { flex: none; }
.st-btn.is-flash { animation: flash 600ms var(--ease-standard) 1; }
@keyframes flash { 0%, 70% { background: var(--fill-2); color: var(--ink); } 100% { background: transparent; } }
.st-sep { color: var(--ink-3); }
.st-eng { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); display: inline-block; flex: none; }
.st-eng.is-ok .st-dot { background: var(--ok-mark); }
.st-eng.is-err { color: var(--err); } .st-eng.is-err .st-dot { background: var(--err-mark); }
.st-eng.is-busy .st-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.st-left > .st-pro { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-disc { color: var(--ink-2); }
.st-short, .st-tiny { display: none; }

/* ─────────────── menu, dymki, okna ─────────────── */
.menu { position: fixed; z-index: 50; padding: 6px; border-radius: 10px; background: var(--surface); box-shadow: var(--pro-sh-pop); max-height: 70vh; overflow: auto; }
.menu-it { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-align: left; }
.menu-it:hover, .menu-it:focus-visible { background: var(--fill); outline-offset: -2px; }
.menu-it[aria-disabled="true"] { color: var(--ink-2); }
.menu-it[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 700; }
.menu-ic { display: inline-flex; color: var(--ink-2); }
.menu-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.menu-label { font-weight: 500; }
.menu-sub { font-size: 12px; line-height: 16px; color: var(--ink-2); white-space: normal; }
.menu-it.is-wip .menu-sub { color: var(--ink-2); }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.menu-head { padding: 6px 10px 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tip { position: fixed; z-index: 70; max-width: 300px; padding: 8px 12px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font: 400 13px/18px var(--font-sans); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--pro-sh-pop); }
.tip-t { font-weight: 600; }
.tip-f, .tip-k { font-size: 12px; }
.tip-ask { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--on-ink); text-decoration: underline; font-size: 12px; min-height: 24px; }
.dlg { border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--pro-sh-pop); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: hidden; }
.dlg-wide { width: min(860px, calc(100vw - 32px)); }
.dlg::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; max-height: calc(100vh - 64px); }
.dlg-t { font: 600 18px/24px var(--font-sans); }
.dlg-sub { color: var(--ink-2); font-size: 13px; line-height: 18px; }
.dlg-scroll { overflow: auto; min-height: 0; flex: 1 1 auto; max-height: 58vh; }
.dlg-grid { display: flex; flex-direction: column; gap: 10px; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; flex: none; }
.fs { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 2px; margin: 0; }
.fs legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.fs label { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.fs input[type="radio"] { width: 16px; height: 16px; accent-color: var(--ink); margin: 0; flex: none; }
.field { display: flex; align-items: center; gap: 6px; position: relative; }
.field-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; border: 0; border-bottom: 1px solid var(--ctl); border-radius: 8px 8px 0 0; background: var(--surface-2); color: var(--ink); }
.field-ic { position: absolute; left: 9px; top: 10px; display: inline-flex; color: var(--ink-2); pointer-events: none; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; height: var(--pro-row); }
.tbl thead th { font-weight: 600; color: var(--ink-2); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.tbl tbody th { font-weight: 500; white-space: nowrap; }
.tbl-gl td { font-size: 13px; } .gl-pro { color: var(--ink-2); }
:root[data-keys="off"] tr.kbd-one { opacity: .7; }

/* ─────────────── ruch: ograniczony (≤ 150 ms, bez przesunięć) i wyłączony (§11.1 pkt 7) ─────────────── */
:root[data-motion="reduced"] .float, :root[data-motion="reduced"] .sheet { transform: none !important; transition-duration: 150ms; }
:root[data-motion="reduced"] .ws { transition-duration: 0ms; }
:root[data-motion="reduced"] .is-pulse, :root[data-motion="reduced"] .var-btn.is-glow { animation: none; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { transition: none !important; animation: none !important; }
:root[data-motion="off"] .float, :root[data-motion="off"] .sheet { transform: none !important; }

/* ─────────────── wymuszone kolory ─────────────── */
@media (forced-colors: active) {
  .float, .sheet, .menu, .tip, .dlg { border: 1px solid CanvasText; }
  .pal-btn[aria-pressed="true"], .rail-btn[aria-pressed="true"], .var-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
  .st-dot { forced-color-adjust: none; border: 1px solid CanvasText; }
}

/* ─────────────── szerokości (§3.1) ─────────────── */
@media (max-width: 1599px) {
  .tb-hide-sm { display: none; } .tb-show-sm { display: inline; }
  .tb-cmp > span:first-child { display: none; }
  .st-right .st-long { display: none; } .st-right .st-short { display: inline; }
}
@media (max-width: 1439px) { .search { max-width: 280px; } #btn-project .tb-label { max-width: 160px; } }
@media (max-width: 1279px) {
  .top { gap: 8px; padding: 0 8px 0 12px; }
  .logo-word { display: none; }
  #btn-project .tb-label { max-width: 120px; }
  .search { min-width: 140px; }
  .tb-cmp .tb-label { display: none; }
  .tb-cmp > span:first-child { display: inline-flex !important; }
  .tb-cmp { width: var(--pro-ctl); padding: 0; }
  .asst-btn-l { display: none; }
  .var-btn .var-l { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-right .st-short { display: none; } .st-right .st-tiny { display: inline; }
}
@container (max-width: 700px) { .msg-text { flex-basis: 100%; } }