/* ═══════════════════════════════════════════════════════════════════════════ forge Crew — arkusz samodzielny (nie zależy od `styl.css`, który zostaje przy widokach Pętli VPS). KIERUNEK: TABLICA DYSPOZYTORA. Crew to tablica nastawni dla załogi agentów pracujących w sesjach Terminal Cloud na zarejestrowanych hostach. Jedno zadanie strony: pokazać, co pracuje TERAZ i gdzie na ścieżce krytycznej stoi człowiek. TOKENY · emalia #E6EBE8 — tło; chłodna emalia pulpitu, panele się z niej unoszą · panel #FFFFFF · atrament #0F1F22 — tekst i szyna (petrol, nie czerń) · grafit #5C6C6E — tekst drugorzędny · nit #C5D0CC — linie, ramki, „nity” tablicy · petrol #136466 — jedyny akcent konstrukcyjny: linki, przycisk główny, ognisko, zaznaczony węzeł · sygnał #D8611F — ZAREZERWOWANY dla „czeka na człowieka”: bramka humanGate, skrzynka, pytanie bez odpowiedzi. Pomarańcz na tej tablicy znaczy tylko jedno: Ty jesteś na ścieżce. Cztery barwy stanu (pracuje / zaliczone / poprawka / blokada) są wspólne z resztą forge, żeby ten sam stan wyglądał tak samo w Pętli i w Crew. KROJE: Exo 2 (nagłówki, liczby na tablicy, marka), Instrument Sans (treść), IBM Plex Mono (identyfikatory, czasy, klucze węzłów). Wszystko offline. SYGNATURA: graf przepływu jako schemat okablowania — węzły to bloki z portami, krawędzie to przewody SVG z łokciami, kontrolowana poprawka wraca przerywanym przewodem pod blokami. Ten sam rysunek w edytorze zespołu i w przebiegu (tam bloki świecą stanem). ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --emalia: #e6ebe8; --panel: #ffffff; --panel-cien: #f4f7f5; --atrament: #0f1f22; --grafit: #4d5c5e; /* 8b9a9c dawało ok. 2,9:1 na bieli — a to jest kolor metadanych, stanów i czasów, czyli dokładnie tego, po co człowiek tu patrzy. 6f7f81 trzyma 4,5:1 przy 10–11 px i nie zmienia hierarchii. */ --grafit-lekki: #6f7f81; --nit: #c5d0cc; --nit-lekki: #dde5e1; --petrol: #136466; --petrol-ciemny: #0d4c4e; --petrol-mgla: #e3efee; --sygnal: #c2540f; /* tekst na białym i na mgle sygnału: 4,5:1 */ --sygnal-mgla: #fbeadf; --sygnal-jaskrawy: #d8611f; /* wypełnienia i lampy — tam kontrast liczy się inaczej */ --pracuje: #8a5300; --pracuje-mgla: #fbf2e2; --zdane: #12694a; --zdane-mgla: #e6f2ec; --poprawka: #b3372c; --poprawka-mgla: #fbebe9; --blokada: #6b3fa0; --blokada-mgla: #f0eaf8; --szyna-tlo: #0f1f22; --szyna-linia: #1f3236; --szyna-tekst: #9fb1b3; --szyna-jasny: #f2f6f5; --display: "Exo 2", "Instrument Sans", system-ui, sans-serif; --sans: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Consolas, monospace; /* ── skala typograficzna ─────────────────────────────────────────────── Siedem stopni, nazwane rolą, a nie rozmiarem. Arkusz miał 19 różnych rozmiarów w ~130 deklaracjach — m.in. `.karta-nota` 11 px obok `.crew-nota` 12 px i tę samą „dużą liczbę" raz 20, raz 24 px. Odstępy między stopniami rosną ku górze: na dole tablica jest gęsta i 1 px to już hierarchia, na górze potrzeba widocznego skoku. Hierarchii nie robimy rozmiarem tam, gdzie wystarczy waga i krój — dlatego tytuł karty siedzi na `--t-baza`, a różni go 600 i `--display`. */ --t-etykieta: 9px; /* wersalikowa etykieta z rozstrzeleniem: dt, legenda, nagłówek tabeli */ --t-plakietka: 10px; /* plakietka stanu, chip, licznik — zawsze `--mono` */ --t-nota: 11px; /* nota, podpis pola, okruch, metadana pisana zdaniem */ --t-baza: 12.5px; /* tekst czytany: akapit, komórka tabeli, pole formularza, tytuł karty */ --t-tytul: 15px; /* tytuł sekcji, warstwy, bramy */ --t-naglowek: 19px; /* nagłówek ekranu i duża liczba w wąskiej kolumnie */ --t-miara: 24px; /* jedna liczba pulpitu — jedyne, co ma być czytelne z drugiego końca biurka */ /* ── skala odstepow ──────────────────────────────────────────────────── Szesc krokow. Arkusz mial 23 rozne paddingi i 18 roznych gapow — roznica miedzy 9 a 10 px nie znaczyla nic, tylko utrudniala odpowiedz na pytanie „ile tu wstawic". Skala jest gesta na dole, bo tablica dyspozytorska zyje w gestym ukladzie. Powyzej `--o-6` konczy sie odstep komponentu, a zaczyna dystans ukladu (24, 40, 48, 72, 112 px) — te zostaja poza skala i nazwane nie sa. */ --o-1: 2px; /* przylgniecie: ikona do tekstu, plakietka do plakietki */ --o-2: 4px; /* wewnatrz jednej linijki */ --o-3: 6px; /* miedzy linijkami tej samej mysli */ --o-4: 8px; /* domyslny odstep: miedzy polami, pozycjami listy, kartami */ --o-5: 12px; /* oddech karty i wiersza tabeli */ --o-6: 16px; /* miedzy sekcjami ekranu */ --szyna-szer: 232px; --insp-szer: 320px; --r: 4px; --r-duze: 8px; --cien: 0 1px 0 rgba(15, 31, 34, .04), 0 1px 2px rgba(15, 31, 34, .06); /* ── most do `petla.css` ─────────────────────────────────────────────── Widok Pętli VPS ma własny arkusz napisany pod nazwy tokenów ze `styl.css`. Powłoka jest teraz jedna (`crew.css`), więc te nazwy muszą tu istnieć — inaczej połowa reguł tamtego arkusza sięgałaby po nieistniejącą zmienną i widok rozjeżdżałby się w drugą stronę. To aliasy, nie druga paleta. */ --tekst: var(--atrament); --karta: var(--panel); --karta-cien: var(--cien); --siatka: var(--nit-lekki); --siatka-mocna: var(--nit); --olowek: var(--grafit); --olowek-lekki: var(--grafit-lekki); --szept: var(--grafit-lekki); --granat: var(--petrol); --bursztyn: var(--pracuje); --grot: var(--sygnal); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } /* Rynna paska przewijania rezerwowana na stałe. Bez tego krótka strona (spis hostów) nie ma paska, długa (transkrypt konwersacji) ma — i przy przejściu między nimi CAŁA siatka, razem z szyną, przeskakuje w bok o jego szerokość. Z perspektywy patrzącego to menu drga przy klikaniu, choć rusza się okno. */ html { scrollbar-gutter: stable; } html { min-height: 100%; overflow-x: clip; } body { min-height: 100vh; min-height: 100dvh; overflow-x: clip; } body { margin: 0; background: var(--emalia); color: var(--atrament); font: 400 var(--t-baza)/1.45 var(--sans); -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: var(--szyna-szer) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "szyna glowa" "szyna scena"; } a { color: var(--petrol); } :focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 2px; } #szyna :focus-visible { outline-color: var(--sygnal); } ::selection { background: var(--petrol-mgla); } h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; margin: 0; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .szept { color: var(--grafit-lekki); font-weight: 400; } .wizualnie-ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── etykiety: trzy stopnie, wyraźnie różne ─────────────────────────────── */ .etykieta { margin: 0; font: 600 var(--t-etykieta)/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--grafit-lekki); } .etykieta-sygnal { color: var(--sygnal); } /* ── SZYNA (nawigator) ──────────────────────────────────────────────────── */ #szyna { grid-area: szyna; position: sticky; align-self: start; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--szyna-tlo); color: var(--szyna-tekst); display: flex; flex-direction: column; padding: var(--o-5) 0 var(--o-4); min-height: 0; /* Domyślne `min-width: auto` pozwoliłoby najdłuższej nazwie projektu w drzewie rozepchnąć szynę ponad `--szyna-szer` — i menu byłoby szersze akurat na tym ekranie, na którym ktoś ma długą nazwę. Szerokość ma pochodzić z tokenu, a nadmiar tekstu ma być przycięty, nie rozpychać. */ min-width: 0; } .znak { display: flex; align-items: center; gap: var(--o-4); text-decoration: none; padding: 0 var(--o-6) var(--o-5); border-bottom: 1px solid var(--szyna-linia); margin-bottom: 10px; } .znak svg { width: 24px; height: 24px; flex: none; display: block; } /* Trzy zmienne zamiast trzech barw wpisanych w atrybuty SVG: skóra przemalowuje znak, podmieniając ROLĘ (blok, przewód, port człowieka), a nie typ elementu. Petrol jest tu podniesiony względem `--petrol`, bo #136466 na szynie #0f1f22 daje 2,4:1 i największa plama znaku robi się dziurą — ta sama poprawka, co `--sygnal-jaskrawy` względem `--sygnal`, tylko dla ciemnego tła. */ .znak { --znak-blok: #1a8f92; --znak-przewod: var(--nit); --znak-czlowiek: var(--sygnal-jaskrawy); } .znak-blok { fill: var(--znak-blok); } /* Łokcie ostre (miter): przewód na schemacie skręca pod kątem prostym, a nie łagodnym łukiem — to ta sama reguła, co w grafie przepływu. */ .znak-przewod { stroke: var(--znak-przewod); stroke-width: 2.2; stroke-linejoin: miter; } .znak-wezel, .znak-port { fill: var(--znak-przewod); } .znak-przewod-czlowiek { stroke: var(--znak-czlowiek); } .znak-port-czlowiek { fill: var(--znak-czlowiek); } .znak:hover .znak-port-czlowiek { fill: #f0762c; } .znak-nazwa { color: var(--szyna-jasny); font: 700 15px var(--display); letter-spacing: .01em; } .znak-nazwa b { color: var(--sygnal-jaskrawy); font-weight: 700; margin: 0 1px; } .znak:hover .znak-nazwa { color: #fff; } .szyna-grupa { display: grid; gap: var(--o-1); padding: 0 var(--o-4); } /* Wysokość pozycji jest STAŁA i nie zależy od tego, co w niej stoi: interlinia wpisana wprost (18px) zamiast dziedziczonej `1.45`, więc plakietka licznika, ikona ani dłuższa nazwa nie potrafią rozepchnąć wiersza. Menu, którego jedna pozycja rośnie o ułamek piksela, gdy doczyta się licznik, drga przy każdym przejściu na nową stronę — a szyna ma wyglądać tak samo na każdym ekranie. */ .szyna-poz { color: var(--szyna-tekst); text-decoration: none; font: 600 var(--t-baza)/18px var(--sans); padding: var(--o-4) var(--o-4); display: flex; align-items: center; gap: var(--o-4); border-radius: var(--r); border-left: 2px solid transparent; min-height: 34px; } .szyna-poz:hover { color: #e3ecec; background: #182b2f; } .szyna-poz[aria-current="page"] { color: #fff; background: #1c3238; border-left-color: var(--sygnal); } .drz-ikona { font-size: var(--t-baza); line-height: 1; width: 15px; text-align: center; flex: none; opacity: .8; } .drz-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── łącza: maszyny, na których to naprawdę działa ─────────────────────── Stały blok szyny, widoczny na każdym ekranie. Odpowiada na pytanie, które operator zadaje jako pierwsze i w każdym widoku: mam połączenie czy nie. Kropka niesie stan, tekst niesie „z czym" — kolor sam by nie wystarczył. */ /* `margin-top: auto` zamiast stałego odstępu: to ono dociska stopkę szyny (łącza, wygląd, konto, puls) do dolnej krawędzi. Wcześniej robiło to rozciągliwe drzewo — a skoro drzewa nie ma, rozpórką jest ten margines. Efekt: stopka stoi w tym samym miejscu na każdym ekranie, bo zależy od wysokości okna, a nie od tego, ile czegokolwiek jest do pokazania. */ .szyna-lacza { padding: var(--o-4) var(--o-6) 0; border-top: 1px solid var(--szyna-linia); margin-top: auto; display: grid; gap: var(--o-2); } .szyna-lacza-tytul { margin: 0 0 2px; font: 600 var(--t-etykieta) var(--display); letter-spacing: .18em; text-transform: uppercase; color: #6b8084; } .lacze { display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--szyna-tekst); font-size: var(--t-nota); padding: 3px 0; } .lacze:hover { color: #fff; } .lacze-kropka { width: 7px; height: 7px; border-radius: 50%; background: #46585c; flex: none; } .lacze-zywe .lacze-kropka { background: #2fa877; box-shadow: 0 0 6px rgba(47, 168, 119, .6); } .lacze-martwe .lacze-kropka { background: var(--sygnal-jaskrawy); } .lacze-brak .lacze-kropka { background: #46585c; } .lacze-nazwa { flex: none; } .lacze-opis { margin-left: auto; font-size: var(--t-plakietka); color: #6b8084; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 108px; } .lacze:hover .lacze-opis { color: #9fb1b3; } /* Licznik przy pozycji „Czeka na Ciebie". Pomarańcz na tej tablicy znaczy jedno: Ty jesteś na ścieżce krytycznej — więc tu jest na miejscu. */ /* Plakietka mieści się w interlinii pozycji (18px) i ma tę wysokość zawsze — pusta, z jedynką i z liczbą trzycyfrową tak samo. Dzięki temu jej pojawienie się nie rusza niczego poniżej: zmienia się treść, nie wysokość wiersza. */ .szyna-poz-ile { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font: 600 var(--t-plakietka)/1 var(--mono); color: #fff; background: var(--sygnal-jaskrawy); border-radius: 9px; } /* Zakładki: dwa stany jednej listy, nie dwie strony. */ .zakladki { display: flex; gap: var(--o-2); margin: 0 0 14px; border-bottom: 1px solid var(--nit-lekki); } .zakladka { padding: 7px 12px; text-decoration: none; color: var(--grafit); font-size: var(--t-baza); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: var(--o-3); } .zakladka:hover { color: var(--atrament); } .zakladka[aria-selected="true"] { color: var(--atrament); font-weight: 600; border-bottom-color: var(--petrol); } .zakladka-ile { font: 600 var(--t-plakietka) var(--mono); color: #fff; background: var(--sygnal-jaskrawy); border-radius: 9px; padding: 1px 5px; } .szyna-kto { display: flex; align-items: center; gap: var(--o-4); padding: var(--o-4) var(--o-6) 0; border-top: 1px solid var(--szyna-linia); margin-top: 8px; } .szyna-kto-login { color: #dbe5e5; text-decoration: none; font-size: var(--t-nota); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .szyna-kto-login:hover { color: #fff; text-decoration: underline; } .szyna-kto button { margin-left: auto; appearance: none; border: 1px solid #2c3d41; background: none; color: #9fb1b3; font: 600 var(--t-plakietka) var(--sans); padding: 3px 8px; border-radius: var(--r); cursor: pointer; } .szyna-kto button:hover { color: #fff; border-color: #5e7175; } .szyna-dol { display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; font-size: var(--t-plakietka); color: #6b8084; } .puls-kropka { width: 7px; height: 7px; border-radius: 50%; background: var(--zdane); flex: none; box-shadow: 0 0 0 2px rgba(18, 105, 74, .25); } /* ── GŁOWA ──────────────────────────────────────────────────────────────── */ #glowa { grid-area: glowa; padding: var(--o-5) 24px var(--o-5); border-bottom: 1px solid var(--nit); background: var(--panel); } .okruchy { display: flex; align-items: center; gap: var(--o-3); margin: 0 0 6px; flex-wrap: wrap; } .okruch { color: var(--grafit); text-decoration: none; font-size: var(--t-nota); } .okruch:hover { color: var(--petrol); text-decoration: underline; } .okruch-tu { color: var(--grafit-lekki); font-family: var(--mono); font-size: var(--t-plakietka); } .okruch-sep { color: var(--nit); font-size: var(--t-nota); } .glowa-crew { display: flex; align-items: flex-start; gap: 20px; } .glowa-crew h1 { margin: 2px 0 2px; font-size: var(--t-naglowek); font-weight: 600; line-height: 1.15; } .glowa-id { margin: 0; font-size: var(--t-plakietka); color: var(--grafit); word-break: break-word; } .glowa-crew-akcje { margin-left: auto; display: flex; gap: var(--o-4); align-items: center; flex-wrap: wrap; justify-content: flex-end; } .glowa-crew-akcje > div { display: contents; } #scena { grid-area: scena; padding: var(--o-6) 24px 48px; min-width: 0; } /* ── karty, sekcje ──────────────────────────────────────────────────────── */ .karta { background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: var(--cien); margin: 0 0 14px; } .karta-glowa { display: flex; align-items: baseline; gap: var(--o-4); padding: var(--o-4) var(--o-5) var(--o-4); border-bottom: 1px solid var(--nit-lekki); } .karta-nota { font-size: var(--t-nota); color: var(--grafit-lekki); margin-left: auto; font-family: var(--mono); } .karta-cialo { padding: var(--o-5) var(--o-5); } .karta-cialo > .crew-lista { margin: 0; } .karta-sygnal { border-color: #f0c9ae; } /* Karta, która zaczyna zwinięta: to samo obramowanie i ta sama głowa, tylko treść czeka na kliknięcie. Używane tam, gdzie zawartość jest dla tych, którzy jej szukają (surowy JSON), a nie dla każdego, kto wejdzie. */ .karta-zwijana > summary { cursor: pointer; list-style: none; } .karta-zwijana > summary::-webkit-details-marker { display: none; } .karta-zwijana > summary::after { content: "rozwiń"; margin-left: 10px; font: var(--t-nota) var(--mono); color: var(--grafit-lekki); } .karta-zwijana[open] > summary::after { content: "zwiń"; } .karta-zwijana:not([open]) > summary { border-bottom: 0; } .karta-zwijana > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: -2px; } .karta-sygnal .karta-glowa { border-bottom-color: #f5dcc8; background: var(--sygnal-mgla); border-radius: var(--r-duze) var(--r-duze) 0 0; } .sek { padding: 0 0 18px; scroll-margin-top: 10px; } .sek > .etykieta { margin-bottom: 8px; } .sek + .sek { border-top: 1px solid var(--nit-lekki); padding-top: var(--o-5); } .crew-siatka { display: grid; grid-template-columns: minmax(0, 1fr) var(--insp-szer); gap: var(--o-6); align-items: start; } .crew-siatka-rowna { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--o-5); align-items: start; } /* Edytor zespołu: prawa kolumna nie jest przypiskiem, tylko miejscem pracy — mieszczą się w niej formularze bloku i przewodu, więc jest szersza. */ .crew-siatka-edytor { grid-template-columns: minmax(0, 1fr) 380px; } /* Lista projektów: karta obok karty. Jedna kolumna na szerokim ekranie robiła z każdego projektu pas przez cały pulpit, z metadanymi odjeżdżającymi kilkadziesiąt centymetrów od nazwy. */ .crew-siatka-projekty { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--o-5); align-items: start; } .insp { position: sticky; top: 12px; display: grid; gap: var(--o-5); } .insp .karta { margin: 0; } .insp dl, .karta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--t-nota); } .insp dt, .karta dt { color: var(--grafit-lekki); } .insp dd, .karta dd { margin: 0; font-family: var(--mono); font-size: var(--t-nota); overflow-wrap: anywhere; } /* ── listy pozycji ──────────────────────────────────────────────────────── */ .crew-lista { display: grid; gap: var(--o-4); } .crew-poz { display: grid; gap: var(--o-2); padding: var(--o-4) var(--o-5); background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r); text-decoration: none; color: inherit; box-shadow: var(--cien); } a.crew-poz:hover { border-color: var(--petrol); } .crew-poz-glowa { display: flex; align-items: baseline; gap: var(--o-4); flex-wrap: wrap; } .crew-poz-tytul { font-weight: 600; font-size: var(--t-baza); } .crew-poz-meta { font-size: var(--t-plakietka); color: var(--grafit-lekki); font-family: var(--mono); } .crew-poz-opis { font-size: var(--t-baza); color: var(--grafit); } .crew-poz-prawo { margin-left: auto; display: flex; gap: var(--o-3); align-items: center; } .crew-pusto { padding: 22px 14px; color: var(--grafit); font-size: var(--t-baza); text-align: center; line-height: 1.5; border: 1px dashed var(--nit); border-radius: var(--r); background: transparent; } .crew-pusto b { color: var(--atrament); } .crew-pusto a { color: var(--petrol); } .crew-blad { padding: 12px 14px; border: 1px solid #e6bfba; background: var(--poprawka-mgla); color: var(--poprawka); border-radius: var(--r); font-size: var(--t-baza); } .crew-nota { font-size: var(--t-nota); color: var(--grafit); line-height: 1.5; margin: 0 0 10px; } .crew-nota:last-child { margin-bottom: 0; } /* ── repozytorium projektu ─────────────────────────────────────────────── Gałąź i stan czystości to pierwsze dwie rzeczy, więc stoją w jednym wierszu nad ścieżką. Lista zmian jest przycięta: karta ma powiedzieć „są zmiany i jakiego rodzaju", a nie zastąpić `git status` w terminalu. */ .repo-glowa { display: flex; align-items: center; gap: var(--o-4); flex-wrap: wrap; margin-bottom: 6px; } .repo-galaz { font-size: var(--t-baza); font-weight: 600; color: var(--atrament); background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 2px 7px; } .repo-sciezka { font-size: var(--t-plakietka); margin-bottom: 8px; } .repo-etykieta { margin: 10px 0 4px; } .repo-zmiany, .repo-commity { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: var(--t-nota); } .repo-zmiany li { display: flex; gap: var(--o-3); align-items: baseline; } .repo-znacznik { color: var(--pracuje); font-weight: 600; flex: none; min-width: 18px; } .repo-commity li { display: grid; grid-template-columns: auto 1fr; gap: var(--o-1) var(--o-4); align-items: baseline; } .repo-skrot { color: var(--petrol); grid-row: span 2; } .repo-tytul { color: var(--atrament); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .repo-kto { font-size: var(--t-plakietka); } /* Adres publiczny: sam adres jest tu treścią, więc dostaje własny wiersz i pełną szerokość karty — nie chowamy go w zdaniu. */ .pub-adres { margin: 0 0 var(--o-4); font-size: var(--t-baza); } .pub-adres a { color: var(--petrol); } .pub-katalog { margin-top: var(--o-4); font-size: var(--t-nota); } /* Karta „Kto to czyta": przynależność rozmowy do projektu w jednym wierszu — etykieta, nazwa, akcja. Fakt i czynność stoją obok siebie, bo pytanie „gdzie ta rozmowa jest" i „jak to zmienić" pada w tej samej sekundzie. */ .dostep-wiersz { display: flex; align-items: baseline; gap: var(--o-3); margin-bottom: var(--o-4); font-size: var(--t-baza); } .dostep-wiersz a { color: var(--petrol); } .dostep-wiersz .crew-nota { margin: 0; } /* Projekty hosta: nazwa i odpięcie w jednym wierszu, katalog pod spodem. Wcześniej wszystko trzy stały w jednym zdaniu rozdzielone kropką — fakt (katalog) i akcja (odepnij) czytały się jak jedno. */ .host-projekty { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: var(--o-4); } .host-projekty li { display: grid; grid-template-columns: 1fr auto; gap: var(--o-1) var(--o-4); align-items: baseline; } .host-projekty-nazwa { font-size: var(--t-baza); } .host-projekty-katalog { grid-column: 1 / -1; font-size: var(--t-nota); } /* Kroki procesu: numer NIE jest ozdobą — rejestracja hosta ma kolejność, której nie da się przestawić (token → wklejenie w workerze → meldunek). */ .kroki { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: var(--t-baza); color: var(--grafit); } .kroki li { line-height: 1.5; } .kroki b { color: var(--atrament); } /* Pozycja listy z własnymi akcjami: cały wiersz nie jest już odnośnikiem, bo odnośnik w odnośniku nie istnieje — tytuł prowadzi do szczegółów, akcje robią swoje. */ /* Pozycja listy z paskiem narzedzi POD spodem (pliki projektu). Nazwa musi sie roznic od `.crew-poz-akcje`, ktora znaczy co innego — pas akcji OBOK karty, nizej w tym arkuszu. Obie klasy nazywaly sie tak samo i ta druga wygrywala kaskade: wiersz pliku zwijal sie w jedna linie i uciekal na srodek. */ .crew-poz-narzedziowa { display: grid; gap: var(--o-3); } .crew-poz-narzedziowa .crew-poz-tytul { text-decoration: none; color: var(--atrament); } .crew-poz-narzedziowa .crew-poz-tytul:hover { color: var(--petrol); text-decoration: underline; } .crew-poz-narzedzia { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--t-nota); } /* Zdanie zamykające listę: należy do niej, więc dostaje linię, która to mówi, zamiast wisieć samotnie pod ostatnią kartą. */ .crew-stopka-nota { margin-top: 16px; padding-top: var(--o-5); border-top: 1px solid var(--nit-lekki); } .crew-nota code, .crew-kod { font-family: var(--mono); font-size: var(--t-nota); background: var(--panel-cien); padding: 1px 5px; border-radius: 3px; } pre.crew-kod { padding: var(--o-4) var(--o-5); overflow: auto; white-space: pre-wrap; margin: 0; line-height: 1.5; max-height: 360px; border: 1px solid var(--nit-lekki); } /* ── plakietki stanu i chipy ────────────────────────────────────────────── */ .stan-plakietka { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font: 600 var(--t-plakietka) var(--mono); letter-spacing: .02em; white-space: nowrap; } .stan-plakietka::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .stan-szept { background: var(--panel-cien); color: var(--grafit); } .stan-pracuje { background: var(--pracuje-mgla); color: var(--pracuje); } .stan-zdane { background: var(--zdane-mgla); color: var(--zdane); } .stan-poprawka { background: var(--poprawka-mgla); color: var(--poprawka); } .stan-blokada { background: var(--blokada-mgla); color: var(--blokada); } .stan-sygnal { background: var(--sygnal-mgla); color: var(--sygnal); } .stan-pracuje::before { animation: puls 1.6s ease-in-out infinite; } .chip { display: inline-block; padding: 1px 7px; border-radius: 10px; font: 600 var(--t-plakietka) var(--mono); background: var(--panel-cien); color: var(--grafit); border: 1px solid var(--nit-lekki); white-space: nowrap; } .chip-rola { background: var(--petrol-mgla); color: var(--petrol); border-color: transparent; } .chip-admin { background: var(--blokada-mgla); color: var(--blokada); border-color: transparent; } .chip-sygnal { background: var(--sygnal-mgla); color: var(--sygnal); border-color: transparent; } /* ── przyciski ──────────────────────────────────────────────────────────── */ .przycisk { appearance: none; display: inline-flex; align-items: center; gap: var(--o-3); cursor: pointer; text-decoration: none; font: 600 var(--t-baza) var(--sans); color: var(--atrament); background: var(--panel); border: 1px solid var(--nit); border-radius: var(--r); padding: var(--o-3) var(--o-5); line-height: 1.2; } .przycisk:hover { border-color: var(--grafit); } .przycisk:disabled { opacity: .5; cursor: progress; } .przycisk-glowny { background: var(--petrol); color: #fff; border-color: var(--petrol); } .przycisk-glowny:hover { background: var(--petrol-ciemny); border-color: var(--petrol-ciemny); } .przycisk-sygnal { background: var(--sygnal); color: #fff; border-color: var(--sygnal); } .przycisk-sygnal:hover { background: #bd5118; border-color: #bd5118; } .przycisk-ostry { color: var(--poprawka); border-color: #e6bfba; } .przycisk-ostry:hover { border-color: var(--poprawka); background: var(--poprawka-mgla); } .przycisk-drobny { padding: 3px 9px; font-size: var(--t-nota); } button.link { appearance: none; border: 0; background: none; padding: 0; color: var(--petrol); cursor: pointer; font: inherit; font-size: var(--t-nota); } button.link:hover { text-decoration: underline; } button.link.ostry { color: var(--poprawka); } .crew-tabela button.link { font-size: var(--t-nota); } /* ── formularze ─────────────────────────────────────────────────────────── */ .pole { display: grid; gap: var(--o-2); margin-bottom: 12px; } .pole > span { font-size: var(--t-nota); color: var(--grafit); } .pole select, .pole input, .pole textarea, .crew-form textarea, .crew-form select, .crew-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font: 400 var(--t-baza) var(--sans); color: var(--atrament); background: var(--panel); border: 1px solid var(--nit); border-radius: var(--r); padding: var(--o-4) var(--o-4); width: 100%; min-width: 0; } .crew-form input[type="text"].mono, .crew-form textarea.crew-json, .crew-form input[name$="Id"], .crew-form input[name="key"] { font-family: var(--mono); font-size: var(--t-baza); } .crew-form textarea { min-height: 80px; resize: vertical; line-height: 1.45; } .crew-form textarea.crew-json { min-height: 320px; font-size: var(--t-nota); } .crew-form input:focus, .crew-form select:focus, .crew-form textarea:focus, .pole input:focus, .pole select:focus { outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol); } .crew-form { display: grid; gap: var(--o-4); } .crew-form .pole { margin-bottom: 0; } /* Odstępy w formularzu robi `gap` siatki — własny margines grupy dokładałby do niego drugi i wybór osób odstawałby od reszty pól. */ .crew-form .pole-grupa { margin-bottom: 0; } .crew-form .pole-wiersz { display: flex; gap: var(--o-4); align-items: end; flex-wrap: wrap; } .crew-form .pole-wiersz .pole { flex: 1 1 160px; } .crew-form .crew-przyciski { display: flex; gap: var(--o-4); align-items: center; flex-wrap: wrap; } .crew-inline { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-nota); } .crew-inline select, .crew-inline input:not([type="checkbox"]) { font: 400 var(--t-nota) var(--sans); padding: 4px 7px; border: 1px solid var(--nit); border-radius: var(--r); background: var(--panel); } .crew-form-blad { color: var(--poprawka); font-size: var(--t-nota); min-height: 1em; } .crew-form-blad:empty { display: none; } .crew-form-wynik { font-family: var(--mono); font-size: var(--t-nota); background: var(--panel-cien); padding: 8px 10px; border-radius: var(--r); word-break: break-all; white-space: pre-wrap; } .crew-form-wynik:empty { display: none; } input[type="checkbox"] { accent-color: var(--petrol); width: 14px; height: 14px; } select[multiple] { min-height: 92px; } /* ── tabele ─────────────────────────────────────────────────────────────── */ /* Kolumny tabeli są WŁASNOŚCIĄ TABELI, nie każdego wiersza z osobna. Wcześniej `.tab-glowa` i każdy `.tab-w` miały własny grid z tym samym `--kol` — a to nie wystarcza: kolumna `auto` mierzy się treścią SWOJEGO wiersza, więc „unieważnij" i „—" dawały różne szerokości, a `fr` rozdzielało resztę inaczej w każdym wierszu. Nagłówek stał wtedy obok swojej kolumny. `subgrid` sprawia, że wiersze dziedziczą ścieżki tabeli — jedna miara dla wszystkich. Ujemny margines z powrotnym paddingiem trzyma tło nagłówka i kreskę wiersza na pełnej szerokości, mimo że ścieżki liczy się od treści. */ .tabela { display: grid; grid-template-columns: var(--kol, 1fr); column-gap: var(--o-5); padding-inline: var(--o-5); border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); overflow: hidden; } .tabela > * { grid-column: 1 / -1; } .tab-glowa, .tab-w { display: grid; grid-template-columns: subgrid; align-items: center; padding: var(--o-4) 0; margin-inline: -12px; padding-inline: var(--o-5); } .tab-glowa { font: 600 var(--t-etykieta) var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--grafit-lekki); background: var(--panel-cien); } .tab-w { border-top: 1px solid var(--nit-lekki); font-size: var(--t-baza); } .tab-w > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .crew-tabela a { color: var(--petrol); text-decoration: none; } .crew-tabela a:hover { text-decoration: underline; } .konta-tabela { --kol: 1.2fr .7fr 1fr 1.1fr auto; } details.crew-szczegoly > summary { cursor: pointer; font-size: var(--t-baza); color: var(--petrol); } .kopiuj { cursor: pointer; } /* ── miary (tablica liczb) ──────────────────────────────────────────────── */ dl.miary { display: flex; grid-template-columns: none; gap: 22px 28px; flex-wrap: wrap; margin: 0; } .miary div { display: grid; gap: var(--o-1); } dl.miary dt { font: 600 var(--t-etykieta) var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--grafit-lekki); } dl.miary dd { margin: 0; font: 600 var(--t-naglowek)/1.1 var(--display); word-break: normal; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .miary dd .stan-plakietka { font-size: var(--t-plakietka); vertical-align: middle; } .miary dd.miara-sygnal { color: var(--sygnal); } /* ── rozmowa ────────────────────────────────────────────────────────────── */ /* ── transkrypt sesji agenta ──────────────────────────────────────────────── To jest zapis pracy agenta w terminalu, a nie rozmowa dwóch osób w czacie. Dymek z etykietą USER/ASSISTANT kłamał o naturze tej treści: tu lecą ścieżki, polecenia, diffy i wyjścia narzędzi — więc jedna kolumna, krój maszynowy i hierarchia z prefiksu, nie z ramki. Tury oddziela włos, nie odstęp: sesja jest ciągła, a przerwy między turami nic nie znaczą. */ .rozmowa-lista { display: grid; gap: 0; border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); overflow: hidden; } .wiad { display: grid; gap: 2px; padding: 9px 14px 11px; background: none; scroll-margin-top: 12px; } .wiad + .wiad { border-top: 1px solid var(--nit-lekki); } /* Wejście człowieka jest w tym strumieniu rzadkie i to ono ma się rzucać w oczy — nie odpowiedź agenta, której jest 90%. */ .wiad-user { background: var(--panel-cien); } .wiad-system, .wiad-tool { background: var(--panel-cien); } .wiad:target { box-shadow: inset 2px 0 0 var(--sygnal); } .wiad-glowa { display: flex; gap: 8px; align-items: baseline; font-size: var(--t-plakietka); color: var(--grafit-lekki); font-family: var(--mono); } .wiad-glowa .wiad-rola { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: var(--t-plakietka); } .wiad-user .wiad-rola { color: var(--petrol); } .wiad-assistant .wiad-rola { color: var(--zdane); } .wiad-tool .wiad-rola { color: var(--pracuje); } .wiad-system .wiad-rola { color: var(--grafit-lekki); } .wiad-znak { font-family: var(--mono); color: inherit; } .wiad-glowa a { color: inherit; margin-left: auto; text-decoration: none; } .wiad-glowa a:hover { text-decoration: underline; } .wiad-tresc { white-space: pre-wrap; font-size: var(--t-baza); line-height: 1.5; word-break: break-word; } /* Treść tur w kroju maszynowym: w zapisie sesji nazwa pliku i wcięcie kodu niosą znaczenie, którego proporcjonalny krój nie utrzyma. */ .rozmowa-lista .wiad-tresc { font-family: var(--mono); font-size: var(--t-nota); line-height: 1.6; } /* Wyjście narzędzia bywa na tysiąc linii i nie jest treścią, tylko dowodem — dostaje własne okno z suwakiem, zamiast spychać resztę sesji poza ekran. */ .wiad-tool .wiad-tresc { max-height: 16em; overflow: auto; color: var(--grafit); } /* Klapka wywołania: zwinięta pokazuje polecenie i rozmiar wyjścia, więc daje się przelecieć wzrokiem całą sesję, nie rozwijając niczego. Trójkąt po lewej zamiast domyślnego znacznika listy — ten sam kierunek co w drzewie plików. */ .wiad-klapka > summary { display: flex; align-items: baseline; gap: var(--o-3); cursor: pointer; list-style: none; font-family: var(--mono); font-size: var(--t-nota); color: var(--grafit); } .wiad-klapka > summary::-webkit-details-marker { display: none; } .wiad-klapka > summary::before { content: '▸'; color: var(--grafit-lekki); flex: none; } .wiad-klapka[open] > summary::before { content: '▾'; } .wiad-klapka > summary:hover { color: var(--atrament); } .wiad-klapka > summary:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; border-radius: 2px; } .wiad-klapka-tresc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wiad-klapka-miara { margin-left: auto; flex: none; color: var(--grafit-lekki); font-size: var(--t-plakietka); } .wiad-klapka > .wiad-tresc { margin-top: var(--o-3); } .wiad-niepelna { font-style: italic; color: var(--grafit-lekki); } /* ── forum ──────────────────────────────────────────────────────────────── */ .wpis { display: grid; gap: var(--o-2); padding: var(--o-4) var(--o-5); border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); scroll-margin-top: 12px; } .wpis:target { box-shadow: 0 0 0 2px var(--sygnal); } .wpis-question { border-left: 3px solid var(--sygnal); } .wpis-decision { border-left: 3px solid var(--petrol); } .wpis-result { border-left: 3px solid var(--zdane); } .wpis-blocker { border-left: 3px solid var(--poprawka); } .wpis-information { border-left: 3px solid var(--nit); } .wpis-glowa { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--t-plakietka); color: var(--grafit-lekki); font-family: var(--mono); } .wpis-rodzaj { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-etykieta); } .wpis-question .wpis-rodzaj { color: var(--sygnal); } .wpis-adresaci { display: flex; gap: 5px; flex-wrap: wrap; font-size: var(--t-plakietka); } .wpis-akcje { display: flex; gap: var(--o-3); flex-wrap: wrap; margin-top: 3px; } .wpis .wiad-tresc { font-size: var(--t-baza); } /* ── zadania przebiegu ──────────────────────────────────────────────────── */ .zad { display: grid; gap: var(--o-2); padding: var(--o-4) var(--o-5); border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); scroll-margin-top: 12px; } .zad:target, .zad.zad-ognisko { box-shadow: 0 0 0 2px var(--petrol); } .zad-czlowiek { border-left: 3px solid var(--sygnal); } .zad-glowa { display: flex; gap: var(--o-4); align-items: center; flex-wrap: wrap; } .zad-klucz { font: 600 var(--t-baza) var(--mono); } .zad-meta { font-size: var(--t-plakietka); color: var(--grafit-lekki); font-family: var(--mono); } .zad-wyw { font-size: var(--t-nota); color: var(--grafit); padding-left: 10px; border-left: 2px solid var(--nit-lekki); } .zad-decyzja { display: flex; gap: var(--o-3); align-items: center; flex-wrap: wrap; margin-top: 4px; } /* Przyczyna, dla której zadanie nie przeszło. Nie jest metadaną — to jedyna rzecz, po którą operator tu przychodzi, więc dostaje wagę tekstu treści. */ .zad-powod { font-size: var(--t-baza); line-height: 1.5; padding: 7px 10px; border-radius: var(--r); background: var(--panel-cien); border-left: 3px solid var(--nit); } .zad-powod-blad { background: var(--poprawka-mgla); border-left-color: var(--poprawka); } .zad-powod b { font-weight: 600; } .zad-powod details { margin-top: 4px; } .zad-powod summary { cursor: pointer; font-size: var(--t-nota); color: var(--grafit); } .zad-powod ul { margin: 4px 0 0; padding-left: 16px; font-size: var(--t-nota); color: var(--grafit); } /* ── edytor zespołu: stan pracy i wynik preflightu ─────────────────────── „Niezapisane zmiany" nie jest ozdobą: formularze edytora ruszają tylko dokument w przeglądarce, więc człowiek musi widzieć, że serwer jeszcze o tym nie wie. Preflight z tego samego powodu jest listą zdań, nie blokiem tekstu — każde zdanie to jedna rzecz do naprawienia. */ .stan-szkicu { align-self: center; padding: 3px 9px; border-radius: 999px; font: 600 var(--t-plakietka) var(--mono); color: var(--pracuje); background: var(--pracuje-mgla); border: 1px solid #eddcb8; } .preflight-wynik { font-size: var(--t-baza); line-height: 1.5; margin-top: 6px; padding: 7px 10px; border-radius: var(--r); background: var(--panel-cien); color: var(--grafit); } .preflight-wynik b { display: block; color: var(--atrament); font-weight: 600; margin-bottom: 2px; } .preflight-wynik ul { margin: 0 0 6px; padding-left: var(--o-6); } .preflight-wynik li { margin: 2px 0; } .preflight-ok { background: var(--zdane-mgla); color: var(--zdane); } .preflight-blad { background: var(--poprawka-mgla); color: var(--poprawka); } .preflight-uwaga { background: var(--pracuje-mgla); color: var(--pracuje); } .preflight-ostrzezenia { color: var(--grafit); } .rewizja-poz { display: flex; gap: var(--o-4); align-items: baseline; width: 100%; text-align: left; padding: var(--o-3) var(--o-4); border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); cursor: pointer; font: inherit; } .rewizja-poz:hover { border-color: var(--petrol); } .rewizja-podglad { margin-left: auto; font-size: var(--t-plakietka); color: var(--petrol); } /* ═══ SYGNATURA: SCHEMAT OKABLOWANIA ═════════════════════════════════════ */ .pw-graf { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 0 112px; overflow-x: auto; padding: var(--o-5) var(--o-3) var(--o-5); align-items: start; --pw-linia: var(--nit); } .pw-graf-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .pw-graf-svg path { fill: none; stroke: var(--pw-linia); stroke-width: 1.5; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; } .pw-graf-svg path.pw-kabel-tlo { stroke: transparent; stroke-width: 10; } .pw-graf-svg path.pw-kabel-fix { stroke: var(--poprawka); stroke-dasharray: 5 4; } .pw-graf-svg path.pw-kabel-zywy { stroke: var(--petrol); stroke-width: 2; } .pw-graf-svg path.pw-kabel-zdany { stroke: var(--zdane); stroke-width: 2; } .pw-graf-svg path.pw-kabel-zazn { stroke: var(--petrol); stroke-width: 2.5; stroke-dasharray: none; } .pw-graf-svg text { font: 600 var(--t-etykieta) var(--mono); fill: var(--grafit-lekki); paint-order: stroke; stroke: var(--panel); stroke-width: 3; } .pw-graf-svg .pw-port { fill: var(--panel); stroke: var(--pw-linia); stroke-width: 1.5; } .pw-poziom { display: grid; gap: var(--o-5); position: relative; z-index: 1; } .pw-poziom-tytul { font: 600 var(--t-etykieta) var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--grafit-lekki); padding-left: 2px; } .pw-wezel { display: grid; gap: var(--o-2); padding: var(--o-4) var(--o-4) var(--o-4) var(--o-5); border: 1px solid var(--nit); border-radius: var(--r); background: var(--panel); cursor: pointer; text-align: left; font: inherit; color: inherit; position: relative; box-shadow: var(--cien); width: 100%; } .pw-wezel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r) 0 0 var(--r); background: var(--grafit-lekki); } .pw-wezel-agentTask::before { background: var(--petrol); } .pw-wezel-humanGate::before { background: var(--sygnal); } .pw-wezel-check::before { background: var(--pracuje); } .pw-wezel-join::before { background: var(--nit); } .pw-wezel:hover { border-color: var(--grafit); } .pw-wezel[aria-pressed="true"] { border-color: var(--petrol); box-shadow: 0 0 0 2px var(--petrol-mgla), var(--cien); } .pw-wezel-klucz { font: 600 var(--t-baza) var(--mono); display: flex; align-items: center; gap: 6px; } .pw-wezel-klucz .stan-plakietka { margin-left: auto; font-size: var(--t-etykieta); padding: 1px 6px; } .pw-wezel-info { font-size: var(--t-plakietka); color: var(--grafit); line-height: 1.35; } .pw-wezel-rodzaj { font: 600 var(--t-etykieta) var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--grafit-lekki); } .pw-wezel-humanGate .pw-wezel-rodzaj { color: var(--sygnal); } /* stany na przebiegu: blok świeci stanem */ .pw-wezel[data-stan="running"], .pw-wezel[data-stan="assigned"] { border-color: var(--pracuje); background: var(--pracuje-mgla); } .pw-wezel[data-stan="running"]::after { content: ""; position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--pracuje); animation: puls 1.4s ease-in-out infinite; } .pw-wezel[data-stan="succeeded"] { border-color: #b7d9c9; background: var(--zdane-mgla); } .pw-wezel[data-stan="failed"] { border-color: #e6bfba; background: var(--poprawka-mgla); } .pw-wezel[data-stan="waiting_human"] { border-color: var(--sygnal); background: var(--sygnal-mgla); box-shadow: 0 0 0 3px var(--sygnal-mgla); } .pw-wezel[data-stan="waiting_human"]::after { content: "Ty"; position: absolute; right: 8px; top: 6px; font: 700 var(--t-etykieta) var(--display); color: var(--sygnal); letter-spacing: .1em; } .pw-wezel[data-stan="skipped"], .pw-wezel[data-stan="canceled"] { opacity: .55; } .pw-wezel[data-stan="pending"] { color: var(--grafit); } .pw-graf-legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-plakietka); color: var(--grafit); padding: 0 6px; } .pw-graf-legenda span::before { content: ""; display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--nit); vertical-align: middle; margin-right: 5px; } .pw-graf-legenda .l-nota::before { display: none; } .pw-graf-legenda .l-fix::before { border-top-color: var(--poprawka); border-top-style: dashed; } .pw-graf-legenda .l-zywy::before { border-top-color: var(--petrol); } .pw-graf-legenda .l-zdany::before { border-top-color: var(--zdane); } .pw-graf-mini { padding: var(--o-4) var(--o-1); gap: 0 28px; grid-auto-columns: minmax(96px, 1fr); } .pw-graf-mini .pw-wezel { padding: var(--o-2) var(--o-4) var(--o-2) var(--o-4); gap: var(--o-1); } .pw-graf-mini .pw-wezel-klucz { font-size: var(--t-plakietka); } .pw-graf-mini .pw-wezel-info, .pw-graf-mini .pw-poziom-tytul { display: none; } .pw-graf-mini .pw-wezel[data-stan="waiting_human"]::after { font-size: var(--t-etykieta); top: 4px; right: 6px; } /* ── PULPIT: tablica hostów ─────────────────────────────────────────────── */ .tablica { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--o-4); } .lampa { display: grid; grid-template-columns: auto 1fr; gap: var(--o-1) var(--o-4); align-items: center; padding: var(--o-4) var(--o-5); background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); text-decoration: none; color: inherit; box-shadow: var(--cien); } .lampa:hover { border-color: var(--petrol); } .lampa-swiatlo { grid-row: 1 / 3; width: 14px; height: 14px; border-radius: 50%; background: var(--nit); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--nit); } .lampa-online .lampa-swiatlo { background: var(--zdane); box-shadow: 0 0 0 1px var(--zdane), 0 0 10px rgba(18, 105, 74, .45); animation: lampa 2.4s ease-in-out infinite; } .lampa-unreachable .lampa-swiatlo { background: var(--blokada); box-shadow: 0 0 0 1px var(--blokada); } .lampa-nazwa { font: 600 var(--t-baza) var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lampa-meta { font: 400 var(--t-plakietka) var(--mono); color: var(--grafit-lekki); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lampa-pusta { grid-column: 1 / -1; } .pulpit-siatka { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--o-6); align-items: start; } .pulpit-glowa { display: flex; align-items: baseline; gap: var(--o-5); margin: 0 0 10px; } .pulpit-glowa h2 { font-size: var(--t-tytul); } .pulpit-glowa .karta-nota, .pulpit-glowa .przycisk { margin-left: auto; } .pulpit-glowa .sek-tytul { margin-bottom: 0; } .czeka-poz { display: grid; gap: var(--o-2); padding: var(--o-4) var(--o-5) var(--o-4) var(--o-5); border: 1px solid var(--nit-lekki); border-left: 3px solid var(--sygnal); border-radius: var(--r); background: var(--panel); text-decoration: none; color: inherit; } .czeka-poz:hover { border-color: var(--sygnal); } .czeka-poz .crew-poz-tytul { font-size: var(--t-baza); } .przebieg-poz { display: grid; gap: var(--o-3); padding: var(--o-4) var(--o-5); border: 1px solid var(--nit-lekki); border-radius: var(--r); background: var(--panel); } .przebieg-poz .pw-graf { overflow: hidden; } .pulpit-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--o-4); margin: 0 0 16px; } .pulpit-liczby a, .pulpit-liczby div { display: grid; gap: var(--o-1); padding: var(--o-4) var(--o-5); background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); text-decoration: none; color: inherit; box-shadow: var(--cien); } .pulpit-liczby div:hover { border-color: var(--petrol); } .pulpit-liczby dt a { color: inherit; text-decoration: none; } .pulpit-liczby div:hover dt a { color: var(--petrol); } .pulpit-liczby dt { font: 600 var(--t-etykieta) var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--grafit-lekki); } .pulpit-liczby dd { margin: 0; font: 600 var(--t-miara)/1.05 var(--display); font-variant-numeric: tabular-nums; } .pulpit-liczby dd.miara-sygnal { color: var(--sygnal); } .pulpit-liczby dd small { font: 400 var(--t-plakietka) var(--mono); color: var(--grafit-lekki); margin-left: 6px; } /* ── szept systemu ──────────────────────────────────────────────────────── */ .szept-systemu { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 8px); z-index: 50; background: var(--atrament); color: #fff; padding: 8px 14px; border-radius: var(--r); font-size: var(--t-baza); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; max-width: min(92vw, 560px); } .szept-systemu.widoczny { opacity: 1; transform: translate(-50%, 0); } .szept-systemu.szept-blad { background: var(--poprawka); } /* ── ruch ───────────────────────────────────────────────────────────────── */ /* ═══ HIERARCHIA: trzy stopnie tytułów ═══════════════════════════════════ Do tej pory każdy tytuł na ekranie był `.etykieta` — 9,5 px, wersaliki, ten sam stopień dla sekcji, karty i wiersza tabeli. Strona czytała się jak jedna szara ściana, bo nic nie było ważniejsze od niczego. Trzy stopnie: sekcja (h2), karta (h3), nadpis (`.etykieta`, wraca do roli podpisu nad nagłówkiem, nie tytułu). */ .sek-tytul { font: 600 var(--t-tytul)/1.25 var(--display); letter-spacing: -.012em; margin: 0 0 2px; } .sek-opis { margin: 0 0 10px; font-size: var(--t-nota); color: var(--grafit); } .sek > .sek-tytul { margin-bottom: 8px; } .karta-tytul { font: 600 var(--t-baza)/1.3 var(--display); letter-spacing: 0; margin: 0; color: var(--atrament); } .karta-glowa .karta-tytul + .karta-nota { margin-left: auto; } .karta-sygnal .karta-tytul, .karta-tytul-sygnal { color: var(--sygnal); } /* ═══ WARSTWA: tworzenie bytu nie jest kolumną obok listy ════════════════ Formularze „nowy projekt”, „nowy szablon”, „nowy wątek” stały na stałe w prawej kolumnie i zabierały jej trzecią część zawsze — także wtedy, gdy człowiek przyszedł tylko popatrzeć na listę. Tworzenie to czynność, nie widok: idzie do warstwy otwieranej przyciskiem z nagłówka. ``, bo daje pułapkę fokusu, Escape i tło za darmo. */ dialog.warstwa { border: 0; padding: 0; margin: auto; color: var(--atrament); background: var(--panel); border-radius: var(--r-duze); box-shadow: 0 12px 40px rgba(15, 31, 34, .22), 0 2px 6px rgba(15, 31, 34, .12); width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 48px); overflow: visible; } dialog.warstwa::backdrop { background: rgba(15, 31, 34, .44); } dialog.warstwa[open] { animation: warstwa-wejscie .16s ease-out; } .warstwa-glowa { display: flex; align-items: baseline; gap: var(--o-4); padding: var(--o-5) var(--o-6) var(--o-5); border-bottom: 1px solid var(--nit-lekki); } .warstwa-tytul { font: 600 var(--t-tytul) var(--display); margin: 0; } .warstwa-opis { font-size: var(--t-nota); color: var(--grafit-lekki); } .warstwa-x { margin-left: auto; appearance: none; border: 0; background: none; cursor: pointer; color: var(--grafit); font-size: var(--t-tytul); line-height: 1; padding: 2px 6px; border-radius: var(--r); } .warstwa-x:hover { background: var(--panel-cien); color: var(--atrament); } .warstwa-cialo { padding: var(--o-5) var(--o-6) var(--o-6); max-height: min(70dvh, 620px); overflow-y: auto; } .warstwa-szeroka { width: min(880px, calc(100vw - 28px)); } @keyframes warstwa-wejscie { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ═══ FORUM: rozmowa, nie lista kafelków ═════════════════════════════════ Wpisy były osobnymi kafelkami w tym samym gridzie co formularz nowego wpisu — kompozytor wyglądał jak kolejna wypowiedź. Teraz wpis ma znacznik autora po lewej i ciągły tor po środku, odpowiedź jest wcięta pod tym, na co odpowiada, a kompozytor stoi osobno na dole kolumny. */ .forum-strumien { display: grid; gap: var(--o-2); } .wpis { grid-template-columns: 28px minmax(0, 1fr); gap: var(--o-2) var(--o-4); padding: var(--o-5) var(--o-5) var(--o-5) var(--o-5); } .wpis-znak { grid-row: 1 / span 4; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 var(--t-plakietka) var(--mono); color: #fff; background: var(--petrol); letter-spacing: .02em; user-select: none; } .wpis-znak-agent { background: var(--blokada); border-radius: var(--r); } .wpis-znak-ja { background: var(--atrament); } .wpis-glowa, .wpis-adresaci, .wpis-akcje, .wpis .wiad-tresc, .wpis-odpowiedz-do { grid-column: 2; } .wpis-autor { font: 600 var(--t-nota) var(--sans); color: var(--atrament); letter-spacing: 0; } .wpis-czas { color: var(--grafit-lekki); } .wpis-glowa > .stan-plakietka { margin-left: auto; } .wpis-odpowiedz { margin-left: 26px; border-left-width: 3px; } .wpis-odpowiedz-do { font-size: var(--t-nota); color: var(--grafit-lekki); text-decoration: none; border-left: 2px solid var(--nit); padding-left: 8px; } .wpis-odpowiedz-do:hover { border-left-color: var(--petrol); color: var(--petrol); } .wpis .wiad-tresc { margin-top: 1px; } .wpis .wiad-tresc code { font-family: var(--mono); font-size: var(--t-nota); background: var(--panel-cien); padding: 1px 4px; border-radius: 3px; } .wpis .wiad-tresc pre { font-family: var(--mono); font-size: var(--t-nota); background: var(--panel-cien); border: 1px solid var(--nit-lekki); border-radius: var(--r); padding: 9px 11px; overflow-x: auto; margin: 6px 0; white-space: pre; } .wpis-adresaci .chip { display: inline-flex; align-items: center; gap: var(--o-2); } .adr-stan { width: 6px; height: 6px; border-radius: 50%; background: var(--nit); flex: none; } .adr-odczyt { background: var(--pracuje); } .adr-odpowiedz { background: var(--zdane); } .forum-kompozytor { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; background: var(--panel); border: 1px solid var(--nit); border-radius: var(--r-duze); box-shadow: 0 -3px 14px rgba(15, 31, 34, .07); padding: var(--o-5) var(--o-5); } .forum-kompozytor .karta-tytul { margin-bottom: 8px; } .forum-kompozytor-cel { font-size: var(--t-nota); color: var(--grafit); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .forum-kompozytor-cel button.link { font-size: var(--t-nota); } /* ── wybór osób i rodzaju: zaznaczenie zamiast listy rozwijanej ────────── `select multiple` wymagał wiedzy o klawiszu Ctrl i malował przez formularz systemowy niebieski pasek. Tu widać wszystkie możliwości naraz, a stan zaznaczenia jest cechą pozycji, nie koloru tła narzuconego przez system. */ .pole-grupa { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; } .pole-grupa legend { padding: 0; margin-bottom: 6px; font-size: var(--t-nota); color: var(--grafit); display: flex; align-items: center; gap: 6px; } .pole-wymog { font: 600 var(--t-etykieta) var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sygnal); background: var(--sygnal-mgla); padding: 1px 5px; border-radius: 3px; } .wybor-rodzaju { display: flex; flex-wrap: wrap; gap: var(--o-3); } .wybor-osob { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--o-3); } .wybor-poz { display: flex; align-items: center; gap: var(--o-4); padding: var(--o-4) var(--o-4); cursor: pointer; background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r); font-size: var(--t-baza); } .wybor-poz:hover { border-color: var(--petrol); } .wybor-poz:has(input:checked) { border-color: var(--petrol); background: var(--petrol-mgla); } .wybor-poz:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 1px; } .wybor-poz input { accent-color: var(--petrol); margin: 0; } .wybor-rola { margin-left: auto; font: var(--t-plakietka) var(--mono); color: var(--grafit-lekki); } /* Wybór wielokrotny jest wyższy od zwykłego pola — wyrównanie do dołu zostawiało dziurę pod etykietą rodzaju. */ .forum-kompozytor .pole-wiersz { align-items: start; } .forum-kompozytor .pole-wiersz .pole:first-child { flex: 0 1 180px; } /* ═══ EDYTOR PRZEPŁYWU: płótno ══════════════════════════════════════════ */ /* W trybie płótna bloki są ustawiane bezwzględnie — siatka nic tu nie układa, a jako blok element poprawnie przewija swoją zawartość. */ .pw-graf-plotno { display: block; scrollbar-width: thin; scrollbar-color: var(--nit) transparent; } .pw-graf-plotno::-webkit-scrollbar { height: 8px; } .pw-graf-plotno::-webkit-scrollbar-thumb { background: var(--nit); border-radius: 4px; } .pw-graf-plotno::-webkit-scrollbar-track { background: transparent; } .pw-rozpychacz { height: 1px; } .pw-graf-plotno .pw-wezel { cursor: grab; touch-action: none; } .pw-graf-plotno .pw-wezel:active { cursor: grabbing; } .pw-wezel-ciagniety { opacity: .5; } .pw-wezel-cel { outline: 2px dashed var(--petrol); outline-offset: 2px; } .pw-uchwyt { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--nit); background: var(--panel); cursor: crosshair; z-index: 3; padding: 0; } .pw-uchwyt:hover, .pw-uchwyt:focus-visible { border-color: var(--petrol); background: var(--petrol-mgla); } .pw-graf-svg path.pw-kabel-rysowany { stroke: var(--petrol); stroke-dasharray: 4 3; stroke-width: 2; } .pw-pomoc { font-size: var(--t-nota); color: var(--grafit-lekki); padding: 2px 6px 8px; } /* Płótno przewija się w poziomie, bo przepływ bywa dłuższy niż kolumna. Bez znaku na krawędzi wygląda to jak ucięty blok, a nie jak „jest dalej": cień przy krawędzi pojawia się dokładnie wtedy, gdy jest co przewijać (tło przypięte `local` odjeżdża razem z treścią, `scroll` zostaje). */ .pw-graf-plotno { background: linear-gradient(to right, var(--panel), rgba(255, 255, 255, 0)) 0 0 / 24px 100% no-repeat local, linear-gradient(to left, var(--panel), rgba(255, 255, 255, 0)) 100% 0 / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(15, 31, 34, .11), rgba(15, 31, 34, 0)) 0 0 / 11px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(15, 31, 34, .11), rgba(15, 31, 34, 0)) 100% 0 / 11px 100% no-repeat scroll; } /* ═══ DROBIAZGI ═════════════════════════════════════════════════════════ */ .tabela .crew-pusto { border: 0; border-top: 1px solid var(--nit-lekki); border-radius: 0; } .karta dl.miary dd, dl.miary dd { font-family: var(--display); word-break: normal; } /* ═══ BRAMA (logowanie) ═════════════════════════════════════════════════ Jedyny ekran bez szyny — bo za bramą nie ma jeszcze aplikacji. Ten sam arkusz co reszta Crew, żeby wejście nie wyglądało jak inny program. */ body.brama-cialo { display: block; background: var(--emalia); } .brama { min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--o-6); } .brama-karta { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: 0 4px 24px rgba(15, 31, 34, .08); padding: 24px 26px 22px; } .brama-znak { display: flex; align-items: center; gap: var(--o-4); margin-bottom: 20px; --znak-blok: var(--petrol); --znak-przewod: var(--grafit); --znak-czlowiek: var(--sygnal); } .brama-nazwa { font: 600 var(--t-tytul) var(--display); letter-spacing: -.01em; } .brama-nazwa b { color: var(--sygnal); } .brama-tytul { font-size: var(--t-naglowek); margin: 2px 0 10px; } .brama-nota { font-size: var(--t-baza); color: var(--grafit); line-height: 1.55; margin: 0 0 12px; } .brama-nota code { font-family: var(--mono); font-size: var(--t-nota); background: var(--panel-cien); padding: 1px 5px; border-radius: 3px; } .brama-karta .crew-form { margin-top: 16px; } .brama-karta .przycisk-glowny { justify-content: center; padding: var(--o-4) var(--o-6); } .brama-stopka { margin: 18px 0 0; font-size: var(--t-plakietka); color: var(--grafit-lekki); line-height: 1.5; } /* ═══ FILTR LISTY ═══════════════════════════════════════════════════════ Listy globalne czytały `?projectId`, ale nie dawały jak go ustawić ani zdjąć — filtr istniał wyłącznie dla kogoś, kto edytuje adres ręcznie. */ .filtr { display: flex; align-items: center; gap: var(--o-4); flex-wrap: wrap; margin: 0 0 12px; } .filtr-etykieta { font: 600 var(--t-etykieta)/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--grafit-lekki); } .filtr select { font: 400 var(--t-baza) var(--sans); padding: 5px 8px; border: 1px solid var(--nit); border-radius: var(--r); background: var(--panel); color: var(--atrament); max-width: 260px; } @keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes lampa { 0%, 100% { box-shadow: 0 0 0 1px var(--zdane), 0 0 10px rgba(18, 105, 74, .45); } 50% { box-shadow: 0 0 0 1px var(--zdane), 0 0 3px rgba(18, 105, 74, .2); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Podpis pod polem: mówi, co się stanie z wartością. Nie placeholder, bo ten znika przy pierwszym znaku — a to jest właśnie moment, w którym człowiek potrzebuje wiedzieć, czy wpisuje to, co myśli. */ .pole-podpis { display: block; margin-top: 3px; font-size: var(--t-nota); line-height: 1.4; color: var(--grafit); font-weight: 400; } /* ── długość wiersza ───────────────────────────────────────────────────── Treść czytana zdaniami (wiadomości, wpisy forum, uzasadnienia) dostaje sufit szerokości. Tabele, grafy i listy zostają szerokie — tam skanuje się wzrokiem kolumny, a nie czyta akapitami. */ .wiad-tresc, .wpis > .wiad-tresc, .crew-nota, .zad-powod, .blad-powod { max-width: 74ch; } .forum-strumien .wpis { max-width: 92ch; } /* Ta sama miara co wpisy: pole, w którym piszę, i wpisy, które czytam, to jedna kolumna rozmowy — dwie różne prawe krawędzie czytały się jak dwa panele. */ .forum-kompozytor { max-width: 92ch; } .crew-pusto { max-width: 68ch; margin-inline: auto; } /* ── strona błędu ──────────────────────────────────────────────────────── Bez szyny (nie wiemy, czy człowiek ma prawo do czegokolwiek poza pulpitem), ale z drogą powrotu — surowy `text/plain` zostawiał tylko przycisk wstecz. */ .crew-blad-strona { display: block; background: var(--emalia); } .blad-scena { max-width: 62ch; margin: 12vh auto 0; padding: 24px 28px; background: var(--panel); border: 1px solid var(--nit-lekki); border-radius: var(--r-duze); box-shadow: var(--cien); } .blad-scena h1 { font-size: var(--t-naglowek); margin: 4px 0 10px; } .blad-powod { margin: 0 0 10px; font-size: var(--t-tytul); line-height: 1.55; } .blad-tresc { margin: 0 0 18px; font-size: var(--t-baza); color: var(--grafit); background: var(--panel-cien); padding: 8px 10px; border-radius: var(--r); overflow-wrap: anywhere; } .blad-akcje { display: flex; gap: var(--o-4); flex-wrap: wrap; margin: 0; } /* ── wpis bramki na forum ──────────────────────────────────────────────── Odpowiedź na forum nie wznawia przebiegu — decyzja jest strukturalna i podejmuje się jej w karcie zadania. Dlatego to jest główna akcja wpisu. */ .wpis-bramka { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; padding: 7px 10px; border-radius: var(--r); background: var(--sygnal-mgla); font-size: var(--t-baza); color: var(--sygnal); } .wpis-bramka span { flex: 1 1 220px; } /* ── pierwsze kroki ────────────────────────────────────────────────────── Jedyna ścieżka, jaką ma pusta instalacja: projekt → host → zespół. */ .start-karta { max-width: 72ch; } .start-kroki { margin: 0; padding-left: 22px; display: grid; gap: var(--o-6); } .start-kroki li { line-height: 1.55; } .start-kroki li::marker { font: 600 var(--t-baza) var(--mono); color: var(--petrol); } .start-kroki b { display: block; font-family: var(--display); font-size: var(--t-tytul); } .start-kroki p { margin: 6px 0 0; } /* ═══ AKCJE PRZY POZYCJI: usuwanie i edycja ══════════════════════════════ Karta listy jest odnośnikiem do szczegółów, a `