:root {
--app-bg: #0b1117;
--app-bg-soft: #0f1722;
--app-surface: #151f2c;
--app-surface-2: #1a2736;
--app-border: #2a3c52;
--app-border-strong: #3a5675;
--app-text: #d9e6f3;
--app-text-muted: #9eb1c6;
/* Trzeci ton tekstu: podpowiedź i zdanie o skutku. Prymitywy `App*` nie wpisują go u siebie. */
--app-text-dim: #71879f;
/* Powierzchnia pola: ciemniejsza od formatki, żeby wpis był wgłębieniem, a nie pudełkiem. */
--app-field-bg: #0d1722;
--app-accent: #37b6e8;
--app-accent-strong: #2597d1;
--app-success: #47d18c;
--app-warning: #f0b64c;
/* Symbole wyszukiwarki listy wartości („?” i „*”) w objaśnieniu „Jak szukać”: inny odcień niż akcent i ostrzeżenie,
żeby nie ginęły w zwykłym tekście. Aplikacja ma jeden (ciemny) motyw — dla jasnego trzeba by tu dodać drugą wartość. */
--app-wildcard: #ff9a5c;
--app-danger: #f06f7f;
/* Barwy czynności na zapytaniu (U39, makieta docs/design/query-actions-colour): jedna tabela dla
przycisków wiersza listy i nagłówka wyników, żeby ta sama czynność miała ten sam kolor wszędzie.
Nie zależą od trybu DP4/DP5 — tryb ma własny akcent, a czynność ma znaczyć to samo w obu.
Usuń = --app-danger: to ta sama czerwień, nie druga podobna.
Jeden system przycisków (S5, A70): „udostępnij” to TURKUS, celowo odsunięty i od zieleni „oznacz”
(--act-mark = --app-success), i od błękitu trybu DP5 (#58c7df); „czat” jest neutralny jasny (kolor tekstu),
bo czat nie zmienia ani zapytania, ani danych — róż z U39 zniknął. Klasy, które te tokeny składają
w przycisk, stoją niżej w bloku „System przycisków”. */
--act-edit: #4fb3ff;
--act-copy: #b39cff;
--act-share: #22cdc6;
--act-rename: #d7b56d;
--act-chat: var(--app-text);
--act-delete: var(--app-danger);
--act-neutral: #9eb1c6;
--act-mark: var(--app-success);
/* Rozjaśnienie w systemie przycisków (mieszanie barwy rodziny, tekst pod kursorem): jedno źródło zamiast surowego `white`. */
--act-light: #fff;
--app-ui-font: "Noto Sans", "Segoe UI", "Segoe UI Variable", "Trebuchet MS", "Liberation Sans", sans-serif;
/* Wysuwane listy w module filtrów: wybór pola, wybór operatora, wybór wartości, podpowiedzi
z indeksu, wynik odpowiedzi ECU. Wartości są DOKŁADNIE takie, jakie miał wybór pola — to
przeniesienie jednego wyglądu w jedno miejsce, nie zmiana wyglądu.
Świadomie NIE wiążemy tego z --mode-accent: QueryEditorPage nie ma mode-accent-scope, więc
zmienna byłaby tam pusta, a połowiczny retrofit dałby bursztynową listę z cyjanowymi
segmentami w jednej szufladzie. */
--picker-surface: #16273a;
--picker-border: rgba(120, 180, 215, 0.40);
--picker-radius: 12px;
--picker-shadow: 0 22px 48px rgba(2, 10, 18, 0.55);
--picker-rule: rgba(110, 165, 200, 0.22);
--picker-bar: rgba(10, 20, 30, 0.5);
--picker-bar-soft: rgba(10, 20, 30, 0.35);
--picker-label: #93b2cd;
--picker-desc: #8aa6bd;
--picker-item-text: #c7ddf0;
--picker-item-text-hover: #e6f3ff;
--picker-item-text-selected: #eaf6ff;
--picker-item-hover: rgba(127, 196, 230, 0.07);
--picker-item-selected: rgba(127, 196, 230, 0.16);
--picker-item-radius: 7px;
--picker-tick: #7fc4e6;
--picker-empty: #6f92ac;
/* Sufit listy w szufladach. 22 rem wiązało ZAWSZE — 45vh na typowym ekranie to grubo ponad
500 px, więc o wysokości rozstrzygała stała, a nie miejsce, które faktycznie jest. Przy
pozycji ~26 px daje to około dwudziestu widocznych naraz zamiast dziesięciu, a 62vh dalej
zostawia szufladzie zapas na pasek szukania i stopkę. */
--picker-max-height: min(34rem, 68vh);
}
.mode-accent-scope {
--mode-accent: var(--app-accent);
--mode-accent-strong: #4fc7ef;
--mode-accent-soft: rgba(55, 182, 232, 0.1);
--mode-accent-soft-strong: rgba(55, 182, 232, 0.18);
--mode-accent-border: rgba(88, 189, 223, 0.5);
--mode-accent-shadow: rgba(16, 88, 117, 0.42);
--mode-accent-text-dark: #102335;
}
.mode-accent-dp4 {
--mode-accent: #e0ae4c;
--mode-accent-strong: #f0ca76;
--mode-accent-soft: rgba(220, 168, 71, 0.12);
--mode-accent-soft-strong: rgba(220, 168, 71, 0.22);
--mode-accent-border: rgba(234, 189, 97, 0.52);
--mode-accent-shadow: rgba(108, 74, 20, 0.42);
--mode-accent-text-dark: #2c2108;
}
.mode-accent-dp5 {
--mode-accent: #58c7df;
--mode-accent-strong: #92e3f2;
--mode-accent-soft: rgba(88, 199, 223, 0.12);
--mode-accent-soft-strong: rgba(88, 199, 223, 0.22);
--mode-accent-border: rgba(109, 214, 234, 0.5);
--mode-accent-shadow: rgba(20, 89, 109, 0.42);
--mode-accent-text-dark: #102335;
}
html,
body {
font-family: var(--app-ui-font);
background: radial-gradient(circle at 8% 0%, #172536 0%, transparent 48%),
radial-gradient(circle at 92% 12%, #152134 0%, transparent 42%),
linear-gradient(180deg, var(--app-bg) 0%, #0a1016 100%);
color: var(--app-text);
min-height: 100%;
max-width: 100%;
overflow-x: hidden;
}
html {
scrollbar-gutter: stable both-edges;
}
body {
--bs-body-bg: transparent;
--bs-body-color: var(--app-text);
--bs-border-color: var(--app-border);
--bs-secondary-color: var(--app-text-muted);
--bs-heading-color: #f2f7fc;
margin: 0;
}
/* Keep readability consistent on dark surfaces. */
body,
.card,
.table,
.alert,
.form-label,
.form-text,
.dropdown-item,
.nav-link,
.navbar-text,
.list-group-item {
color: var(--app-text);
}
a,
.btn-link {
color: #72cef0;
}
a:hover,
.btn-link:hover {
color: #9bdef5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #eff6fe;
letter-spacing: 0.01em;
}
hr {
border-color: var(--app-border);
opacity: 1;
}
p,
label,
small,
span,
text {
color: inherit;
}
.text-dark,
.text-black,
.text-body,
.text-body-emphasis {
color: var(--app-text) !important;
}
.text-muted,
.text-secondary,
.text-body-secondary {
color: var(--app-text-muted) !important;
}
.text-light {
color: #eef6ff !important;
}
.btn {
font-family: var(--app-ui-font);
border-radius: 10px;
border-width: 1px;
font-weight: 600;
letter-spacing: 0;
font-kerning: normal;
text-rendering: optimizeLegibility;
transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 14px rgba(2, 8, 16, 0.35);
}
.btn:active {
transform: translateY(0);
}
.btn-primary,
.btn-info {
color: #102335;
background: linear-gradient(180deg, var(--app-accent) 0%, var(--app-accent-strong) 100%);
border-color: #4fc7ef;
box-shadow: 0 3px 0 rgba(16, 88, 117, 0.5);
}
.mode-accent-scope .btn-primary,
.mode-accent-scope .btn-info {
color: var(--mode-accent-text-dark);
background: linear-gradient(180deg, var(--mode-accent-strong) 0%, var(--mode-accent) 100%);
border-color: var(--mode-accent-strong);
box-shadow: 0 3px 0 var(--mode-accent-shadow);
}
.mode-accent-scope .btn-primary:hover,
.mode-accent-scope .btn-info:hover {
color: var(--mode-accent-text-dark);
background: linear-gradient(180deg, color-mix(in srgb, var(--mode-accent-strong) 88%, white) 0%, color-mix(in srgb, var(--mode-accent) 92%, white) 100%);
border-color: color-mix(in srgb, var(--mode-accent-strong) 88%, white);
}
.btn-primary:hover,
.btn-info:hover {
color: #0c1f2f;
background: linear-gradient(180deg, #54c7f1 0%, #2da5df 100%);
border-color: #83d8f3;
}
.btn-outline-secondary {
color: var(--app-text);
border-color: var(--app-border-strong);
background: rgba(255, 255, 255, 0.02);
}
.btn-outline-secondary:hover {
background: rgba(86, 111, 139, 0.35);
border-color: #6d89a9;
color: #fff;
}
.btn-outline-primary,
.btn-outline-info {
color: #8bd9f4;
border-color: #58bddf;
background: rgba(55, 182, 232, 0.08);
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
background: rgba(55, 182, 232, 0.24);
border-color: #83d7f3;
color: #e8f8ff;
}
.mode-accent-scope .btn-outline-primary,
.mode-accent-scope .btn-outline-info {
color: color-mix(in srgb, var(--mode-accent-strong) 92%, white);
border-color: var(--mode-accent-border);
background: var(--mode-accent-soft);
}
.mode-accent-scope .btn-outline-primary:hover,
.mode-accent-scope .btn-outline-info:hover {
background: var(--mode-accent-soft-strong);
border-color: color-mix(in srgb, var(--mode-accent-strong) 88%, white);
color: #f6fbff;
}
.btn-outline-warning {
color: #f7cc7b;
border-color: #d59d36;
background: rgba(213, 157, 54, 0.12);
}
.btn-outline-warning:hover {
color: #fff2db;
border-color: #efbc63;
background: rgba(213, 157, 54, 0.27);
}
.btn-outline-danger {
color: #ffb2bc;
border-color: #d65e70;
background: rgba(214, 94, 112, 0.12);
}
.btn-outline-danger:hover {
color: #fff0f2;
border-color: #eb7d8f;
background: rgba(214, 94, 112, 0.27);
}
.btn-warning {
color: #102335;
background: linear-gradient(180deg, #f2bf5b 0%, #dca241 100%);
border-color: #f0c570;
}
.btn-warning:hover {
color: #0c1b29;
background: linear-gradient(180deg, #f6cb75 0%, #e2ad51 100%);
border-color: #f6d38c;
}
.btn-success {
color: #082317;
background: linear-gradient(180deg, #66d89e 0%, #43be82 100%);
border-color: #7de0ae;
}
.btn-success:hover {
color: #061d13;
background: linear-gradient(180deg, #78e2ad 0%, #4dc98b 100%);
border-color: #95e8bd;
}
.app-toolbar-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.58rem;
min-height: 2.35rem;
padding: 0.48rem 0.88rem;
border-radius: 13px;
line-height: 1.1;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 10px 18px rgba(3, 10, 19, 0.14);
}
.app-toolbar-button:hover:not(:disabled) {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 14px 24px rgba(3, 10, 19, 0.2);
}
.app-toolbar-button-label {
white-space: nowrap;
}
.app-toolbar-button-icon {
width: 1rem;
height: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.app-toolbar-button-icon svg {
width: 1rem;
height: 1rem;
display: block;
}
.app-toolbar-button-meta {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.3rem;
padding: 0.12rem 0.42rem;
border-radius: 999px;
background: rgba(7, 15, 24, 0.24);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.04em;
white-space: nowrap;
}
.form-control,
.form-select,
.form-check-input {
background-color: var(--app-surface-2);
border-color: var(--app-border);
color: var(--app-text);
}
.form-select option {
background: #142233;
color: #e5f1fd;
}
.form-control::placeholder,
.form-select::placeholder {
color: #7f96af;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
border-color: #7fcff0;
box-shadow: 0 0 0 0.18rem rgba(84, 187, 223, 0.25);
}
.form-check-input:checked {
background-color: #38b4e4;
border-color: #38b4e4;
}
.mode-accent-scope .form-control:focus,
.mode-accent-scope .form-select:focus,
.mode-accent-scope .form-check-input:focus,
.mode-accent-scope .btn:focus,
.mode-accent-scope .btn:active:focus {
border-color: var(--mode-accent-border);
box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--mode-accent) 35%, transparent);
}
.mode-accent-scope .form-check-input:checked {
background-color: var(--mode-accent);
border-color: var(--mode-accent);
}
.card,
.border,
.rounded {
border-color: var(--app-border) !important;
}
.card {
background: linear-gradient(180deg, #152130 0%, #111c2a 100%);
box-shadow: 0 14px 24px rgba(3, 10, 19, 0.35);
}
.table {
--bs-table-bg: var(--app-surface);
--bs-table-striped-bg: #122131;
--bs-table-striped-color: var(--app-text);
--bs-table-hover-bg: #1c3046;
--bs-table-hover-color: #e9f3fd;
--bs-table-active-bg: #233b56;
--bs-table-active-color: #eef7ff;
--bs-table-color: var(--app-text);
--bs-table-border-color: var(--app-border);
margin-bottom: 0;
border-color: var(--app-border);
}
.table > thead {
background: #132233;
}
.table > :not(caption) > * > * {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.table thead th {
color: #d8ebfa;
font-size: 0.82rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom-color: #3a5675;
}
.table > tbody > tr > th,
.table > tbody > tr > td {
color: var(--app-text);
}
.alert {
border-width: 1px;
border-radius: 12px;
}
.alert-danger {
color: #ffd6dc;
background: rgba(174, 47, 74, 0.2);
border-color: rgba(215, 96, 122, 0.45);
}
.alert-success {
color: #d3f9e4;
background: rgba(35, 132, 84, 0.22);
border-color: rgba(80, 197, 136, 0.45);
}
.alert-warning {
color: #ffebc7;
background: rgba(162, 114, 19, 0.24);
border-color: rgba(232, 178, 75, 0.46);
}
.alert-info {
color: #dff4ff;
background: rgba(24, 120, 160, 0.24);
border-color: rgba(88, 183, 223, 0.45);
}
.alert-secondary {
color: #e8f3ff;
background: rgba(61, 82, 107, 0.34);
border-color: rgba(111, 141, 172, 0.46);
}
.alert-primary {
color: #e5f4ff;
background: rgba(34, 103, 150, 0.26);
border-color: rgba(93, 170, 220, 0.45);
}
.alert-light {
color: #142638;
background: #dbe7f3;
border-color: #b9ccde;
}
.alert a {
color: inherit;
font-weight: 700;
text-decoration: underline;
}
/* Blazor reconnect modal is rendered outside component scoped CSS. */
#components-reconnect-modal {
background: linear-gradient(180deg, rgba(18, 30, 44, 0.96) 0%, rgba(14, 24, 36, 0.96) 100%) !important;
color: #e5f2ff !important;
border: 1px solid rgba(92, 133, 169, 0.55) !important;
border-radius: 12px !important;
box-shadow: 0 16px 34px rgba(2, 10, 20, 0.52) !important;
}
#components-reconnect-modal *,
#components-reconnect-modal a {
color: inherit !important;
background: transparent !important;
}
.badge {
letter-spacing: 0.02em;
}
.badge.text-bg-secondary,
.badge.text-bg-info {
color: #102335 !important;
}
.mode-accent-scope .badge.text-bg-info {
background: linear-gradient(180deg, var(--mode-accent-strong) 0%, var(--mode-accent) 100%) !important;
border: 1px solid color-mix(in srgb, var(--mode-accent-strong) 84%, rgba(0, 0, 0, 0.1)) !important;
color: var(--mode-accent-text-dark) !important;
}
.text-bg-info {
color: #102335 !important;
}
.text-bg-info a {
color: inherit !important;
}
.badge.text-bg-warning {
color: #2b1d00 !important;
}
.badge.text-bg-success {
color: #072216 !important;
}
.text-bg-light,
.bg-light {
color: #132538 !important;
}
.content {
padding-top: 1.1rem;
}
.toolbar-row {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0.75rem 0;
flex-wrap: wrap;
}
.index-hint-panel {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin: 0.4rem 0 0.8rem;
}
.index-hint {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid #35516d;
border-radius: 999px;
padding: 0.2rem 0.55rem;
background: rgba(20, 34, 50, 0.72);
color: #cfe4f8;
font-size: 0.78rem;
line-height: 1.2;
}
.mode-accent-scope .index-hint {
border-color: var(--mode-accent-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--mode-accent-soft) 88%, rgba(20, 34, 50, 0.72)) 0%, rgba(20, 34, 50, 0.72) 100%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mode-accent-border) 45%, transparent);
}
.index-hint code {
color: #e9f5ff;
font-size: 0.78rem;
}
.app-loading-shell {
position: relative;
min-height: 180px;
}
.app-loading-content {
transition: opacity 140ms ease-in-out, filter 140ms ease-in-out;
}
.app-loading-content.is-loading {
opacity: 0.45;
filter: saturate(0.8);
pointer-events: none;
}
.app-loading-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
align-items: center;
justify-content: center;
background: rgba(9, 18, 27, 0.45);
backdrop-filter: blur(1px);
z-index: 5;
color: #d8ebff;
font-weight: 600;
}
.app-spinner {
position: relative;
width: 3.6rem;
height: 3.6rem;
display: grid;
place-items: center;
}
.app-spinner-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid rgba(126, 168, 200, 0.22);
border-top-color: #59c6ee;
border-right-color: #46b7e6;
animation: app-spin 900ms linear infinite;
}
.app-spinner-logo {
width: 1.65rem;
height: 1.65rem;
display: block;
filter: drop-shadow(0 0 5px rgba(90, 204, 241, 0.34));
animation: app-pulse 1100ms ease-in-out infinite;
}
@keyframes app-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes app-pulse {
0% {
transform: scale(0.94);
opacity: 0.86;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.94);
opacity: 0.86;
}
}
.actions-cell {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.mode-badge {
display: inline-block;
background: linear-gradient(180deg, #53bee7 0%, #38a6d5 100%);
color: #f3fbff;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
}
pre {
white-space: pre-wrap;
word-break: break-word;
margin: 0;
background: rgba(9, 17, 27, 0.55);
border: 1px solid var(--app-border);
border-radius: 10px;
padding: 0.7rem;
}
/* Trafienie szukanej frazy: przemycie i podkreślenie, nie ramka. Ramka zamyka słowo w pudełku i przy
kilku trafieniach w jednej linii zrzut zaczynał wyglądać jak formularz; przemycie prowadzi wzrok
po linii, a pełne pudełko rywalizowało o uwagę z pasmem komendy leżącym pod spodem.
Podkreślenie jest tym, co niesie kolor — i dlatego ma 2px: przemycie bywa nie do odróżnienia od
pasma, gdy oba leżą na sobie, a kreska pod tekstem zostaje czytelna zawsze. Ujemny margines znosi
padding, żeby trafienie nie rozpychało tekstu (tak samo jak przy `.log-seq-hit`).
Barwa: amber, ta sama, co ostrzeżenia w aplikacji. Wcześniej stała tu neutralna szarość, żeby nie
kolidować z niczym — i nie kolidowała, ale też nie było jej widać: na granacie zrzutu przygaszony
błękit różni się od tekstu za słabo, a trafienie jest tym, czego się w zrzucie SZUKA.
Kolizja z „miejscem ③" łańcucha (`--log-seq-c2`) i z werdyktem „urwaniem" jest realna i przyjęta
świadomie, bo rozstrzyga ją GEST, nie barwa: człon łańcucha prowadzi kreskę w rynnie obok,
zakończenie ma kreskę przerywaną, a zwykłe trafienie nie ma ani jednego, ani drugiego. */
mark {
background: color-mix(in srgb, var(--log-hit) 22%, transparent);
color: #f8f4ea;
border: 0;
border-bottom: 2px solid color-mix(in srgb, var(--log-hit) 80%, transparent);
border-radius: 3px 3px 0 0;
padding: 0.04rem 0.16rem 0;
margin: 0 -0.16rem;
}
/* Bez `color-mix` trafienie ma zniknąć najmniej ze wszystkiego — to ono jest tu odpowiedzią. */
@supports not (background: color-mix(in srgb, red 22%, transparent)) {
mark {
background: rgba(240, 182, 76, 0.22);
border-bottom-color: rgba(240, 182, 76, 0.8);
}
}
/* Oba oznaczenia się ZAGNIEŻDŻAJĄ: `UdsLogAnnotator.HighlightWithMarks` wkłada podświetlenie do
środka obwódki członu pary, więc powstaje `…`.
Oba są dziś przemyciem z podkreśleniem, więc nałożone dałyby podwójną barwę i podwójną kreskę.
Wewnętrzne znika — o tym, że to trafienie, i tak mówi zewnętrzne, a ono dodatkowo niesie kolor
miejsca i prowadzi kreskę w rynnie. */
.log-seq-hit mark {
background: transparent;
border-bottom-color: transparent;
}
/* Badge „×N" — liczba identycznych wystąpień komendy zwiniętych w jeden wiersz. */
.query-results-occurrence-badge {
display: inline-block;
margin-left: 0.4rem;
padding: 0.05rem 0.4rem;
border-radius: 999px;
background: rgba(99, 194, 215, 0.16);
border: 1px solid rgba(99, 194, 215, 0.42);
color: rgba(178, 227, 240, 0.95);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: middle;
}
/* Pełny log programu — kontekst przygaszony, żeby aktywna komenda odcinała się samym kolorem.
Widok tabeli ma własną, mocniejszą regułę w QueryResultsTable.razor.css (scoped bije globalne);
ta obsługuje pozostałe układy, m.in. karty mobilne. */
pre.log-full-view {
color: #7e93aa;
}
/* Fragment aktywnej komendy w pełnym logu. Wstawiany jako MarkupString, więc poza izolacją CSS.
Wyróżnienie niesie sam tekst — jaśniejszy i półgruby — plus cienki pasek na marginesie; bez tła.
Ujemny margines znosi padding co do piksela, więc pasek wchodzi w padding
, a treść stoi
w tej samej kolumnie co reszta loga i nie wygląda na wstawkę spoza niego. */
/* ── Rynna: numery linii i łączniki warunków kolejności ─────────────────────────────────────────
Wiersz jest siatką, a numer jego komórką. Osobna kolumna numerów obok całego bloku rozjechałaby
się z liniami na pierwszej zawiniętej — a treść logu zawija się (`white-space: pre-wrap`), i tym
częściej, im węższy ekran. */
.log-line {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
column-gap: 0.4rem;
}
/* Kolumna numerów dochodzi tylko wtedy, gdy numery są włączone. Pusta kolumna zostawiona na zapas
przesuwałaby całą treść w prawo bez powodu. */
.log-line-numbered {
grid-template-columns: auto auto 1fr auto;
}
/* Kolumna łączników KOMEND — po prawej stronie treści, nie w rynnie po lewej. Etykieta („3 cmd")
jest kilka razy szersza od toru, więc w rynnie wychodziła z niej na numery linii. Tutaj miejsce
jest i nikomu go nie odbiera; łącznik komend mówi o rzeczy najogólniejszej, więc ma prawo stać
najdalej od treści.
Szerokość rośnie z liczbą torów, ale ma sufit: przy wielu parach naraz kolumna nie może zjeść
połowy ekranu. Powyżej sufitu kreski nachodzą na siebie — a i tak każda ma inną barwę. */
.log-line-cmdrail {
position: relative;
align-self: stretch;
/* Miejsce na etykietę PLUS tory. Sama szerokość torów nie wystarczy: liczba z jednostką ma
kilkadziesiąt pikseli i wychodziła poza krawędź zrzutu, gdzie ucinał ją kontener — na ekranie
zostawało „3 ⌐md". Sufit torów jest po to, żeby przy wielu parach kolumna nie zjadła treści. */
width: calc(2.6rem + min(var(--cmd-lanes, 0), 4) * 0.75rem);
min-width: 0;
}
/* ——— kolumna po prawej jest LUSTREM rynny po lewej ———
Kreski wiszą przy PRAWEJ krawędzi, wąsy klamry wychodzą w lewo, etykieta rośnie w lewo. Skopiowane
wprost z rynny wyglądałyby jak wyrwane ze swojego miejsca: klamra otwierałaby się od treści,
zamiast ją obejmować. */
.log-line-cmdrail .log-rail {
left: auto;
right: calc(var(--lane, 0) * 0.75rem + 0.22rem);
}
/* Kropka końca wyśrodkowana na SWOJEJ kresce — liczona z jej grubości, nie zgadywana.
`left` odnosi się do PADDING BOXA, a kreska jest borderem leżącym na LEWO od niego: środek kreski
wypada więc na minus połowie jej grubości. Wpisywane na oko wartości siadały obok, nie na niej,
i na ekranie wyglądało to jak kreska doklejona z boku kropki. Zmienna trzyma obie liczby razem,
więc zmiana grubości klamry nie wymaga pamiętania o drugim miejscu. */
.log-line-cmdrail .log-rail {
--rail-width: 1px;
}
.log-line-cmdrail .log-rail.is-anchor {
--rail-width: 3px;
}
.log-line-cmdrail .log-rail.is-start::before,
.log-line-cmdrail .log-rail.is-end::after {
left: calc(-0.15rem - var(--rail-width) / 2);
}
/* `white-space: nowrap` z tego samego powodu, co przy odstępie w rynnie: kolumna numerów jest `auto`,
czyli może zejść do min-content, a `pre` wyżej dziedziczy `word-break: break-word`. Numer trzycyfrowy
miał więc prawo złamać się między cyframi w ciasnym układzie — a numer linii złamany na dwie linie
przestaje być numerem linii. */
.log-line-no {
color: #55708c;
text-align: right;
min-width: 2.2ch;
user-select: none;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.log-line-text {
white-space: pre-wrap;
word-break: break-word;
min-width: 0;
}
/* Pusta linia logu ma zachować wysokość — bez tego siatka zjada odstępy w treści. */
.log-line-text:empty::after {
content: "\00a0";
}
/* Rynna rozsuwa łączniki na osobne tory. Dwa warunki obejmujące te same linie rysowałyby kreski
jedna na drugiej i widać byłoby tylko tę narysowaną później.
Rozstaw 0,75 rem, nie 0,5 rem. Przy 0,5 rem (8 px) na tor kropki końców — 0,4 rem, czyli 6,4 px —
zostawiały między sąsiednimi torami 1,6 px prześwitu, więc dwa łączniki obok siebie czytały się
jak jeden gruby. Kropki przy okazji schodzą do 0,3 rem: znak końca ma być widoczny, a nie ciężki. */
.log-line-rail {
position: relative;
align-self: stretch;
width: calc(var(--seq-lanes, 0) * 0.75rem);
}
/* Bez przygaszenia. Barwa toru niesie NUMER miejsca w łańcuchu (ten sam, co numer w panelu), więc
przezroczystość zbliżała do siebie kolory, które mają się od siebie różnić — a to jedyna rzecz,
po której da się rozpoznać, który łącznik jest który. */
.log-rail {
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--lane, 0) * 0.75rem + 0.22rem);
width: 0;
border-left: 2px dashed currentColor;
}
/* Pierwszy i ostatni człon: kreska zaczyna się (kończy) w połowie wysokości swojej linii, żeby
wychodziła z tekstu, a nie zza niego. */
.log-rail.is-start { top: 0.75em; }
.log-rail.is-end { bottom: calc(100% - 0.75em); }
.log-rail.is-start::before,
.log-rail.is-end::after {
content: "";
position: absolute;
left: -0.16rem;
width: 0.3rem;
height: 0.3rem;
border-radius: 50%;
background: currentColor;
}
.log-rail.is-start::before { top: -0.15rem; }
.log-rail.is-end::after { bottom: -0.15rem; }
/* Zmierzony odstęp, wypisany raz — w środku przebiegu łącznika.
`user-select: none` jak przy numerach linii: to realny tekst w DOM, stojący absolutnie obok
treści, więc zaznaczenie myszą wciągało go w losowym miejscu i do schowka wpadała liczba
przeskoczonych linii wklejona w środek loga.
`white-space: nowrap` NIE jest ozdobą — bez niego dwucyfrowy odstęp rozpadał się na dwie linie
(„12" czytane jako „1" i pod spodem „2"). Element stoi absolutnie w rynnie szerokiej na jeden tor,
czyli kilkanaście pikseli, a `pre` wyżej dziedziczy `word-break: break-word`, więc liczba łamała
się MIĘDZY CYFRAMI. Tor jest wąski z założenia i taki zostaje — to liczba ma prawo z niego wyjść,
dlatego rysuje się nad kreską (`z-index`) na własnym tle. */
.log-rail-gap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
padding: 0 0.15rem;
user-select: none;
white-space: nowrap;
border-radius: 3px;
background: rgba(14, 24, 35, 0.98);
font-size: 0.66rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.35;
}
/* Człon dopasowanej pary. Gest jest wspólny ze zwykłym trafieniem (`mark` wyżej) — przemycie
i podkreślenie — a różnią je dwie rzeczy: barwa niosąca numer MIEJSCA i kreska prowadzona
w rynnie obok, której zwykłe trafienie nie dostaje.
Barwa idzie zmienną `--seq`, a nie `currentColor`, bo tekst członu jest jasny, nie kolorowy:
przy `currentColor` przemycie wyszłoby białe i cały kolor zostałby w rynnie. */
.log-seq-hit {
background: color-mix(in srgb, var(--seq, #b8cde4) 24%, transparent);
border: 0;
border-bottom: 2px solid var(--seq, #b8cde4);
border-radius: 3px 3px 0 0;
padding: 0.04rem 0.2rem 0;
margin: 0 -0.2rem;
color: #f6faff;
}
/* Kolor niesie MIEJSCE łańcucha, nie warunek: w panelu miejsca są ponumerowane, więc obwódka „②"
w zrzucie ma być tego samego koloru, co „②" nad polem wartości — i wzrok zestawia jedno z drugim
bez czytania. Warunki dalej rozróżnia rynna: każdy prowadzi własny tor.
Barwy stoją w zmiennych, bo czyta je też panel (query-panel.css). Dwie kopie tej samej palety
rozjechałyby się przy pierwszej zmianie, a rozjazd znaczyłby, że numer w panelu wskazuje na inny
kolor niż obwódka w zrzucie — czyli dokładnie to, czemu ta paleta ma zapobiegać.
Sześć odcieni wyraźnie różnych, bo pomylenie miejsc między sobą jest kosztowniejsze niż pomylenie
któregoś ze zwykłym trafieniem — to ostatnie stoi w neutralnej, przygaszonej ramce. */
:root {
--log-seq-c0: #37b6e8;
--log-seq-c1: #47d18c;
--log-seq-c2: #f0b64c;
--log-seq-c3: #b79be8;
--log-seq-c4: #f06f7f;
--log-seq-c5: #7fd4d0;
/* Zakończenie — świadomie POZA paletą miejsc łańcucha. Miejsca są ponumerowane w panelu i ich
kolory mają się z tymi numerami zestawiać; zakończenie numeru nie ma, bo wybiera się je
przyciskiem pod osią, a nie wpisuje jako krok. Biel odróżnia je od każdego z sześciu, nie
udając siódmego. */
--log-seq-outcome: #e8eef5;
/* Barwy ZAKOŃCZEŃ komendy — jedno źródło dla przycisku w panelu i dla obwódki w zrzucie.
Dopóki stały tylko w `query-panel.css`, zrzut nie miał ich skąd wziąć i zakończenie rysowało
się neutralnie, choć przycisk obok świecił zielenią albo czerwienią.
Wartości są tymi samymi, co odpowiednie miejsca łańcucha, i to jest zbieg okoliczności do
zniesienia, a nie reguła: gdyby paleta miejsc się zmieniła, werdykty mają zostać. Dlatego
wpisane wprost, a nie przez `var(--log-seq-c1)`. */
/* Zwykłe trafienie frazy — nazwane rolą, nie odcieniem, bo o odcień toczy się tu spór, a rola
jest stała. Podmiana na teal to jedna linia: #7fd4d0. */
--log-hit: #f0b64c;
/* Miejsce, z którego warunek „Wartość w logu” wziął wartość — fraza i wartość do końca linii. Własna
barwa, bo to inne trafienie niż fraza „Treść zawiera”: świeci cała linia wartości, a nie szukany
napis. Turkus jest poza barwami zakończeń (zieleń, czerwień, amber, fiolet); kolizja z „miejscem ⑥"
łańcucha (`--log-seq-c5`) jest przyjęta z tego samego powodu, co amber przy ③ — rozstrzyga ją gest:
człon łańcucha prowadzi kreskę w rynnie, wartość nie. */
--log-hit-val: #7fd4d0;
--cmd-end-ok: #47d18c;
--cmd-end-err: #f06f7f;
--cmd-end-cut: #f0b64c;
--cmd-end-msg: #b79be8;
}
/* Każda klasa miejsca ustawia DWIE rzeczy: `color` dla kreski w rynnie (ta rysuje się
`currentColor`) i `--seq` dla przemycia w treści (tam tekst musi zostać jasny, więc barwy nie da
się wziąć z `currentColor`). Jedna wartość w dwóch rolach, a nie dwie listy do zsynchronizowania. */
.log-seq-c0 { color: var(--log-seq-c0); --seq: var(--log-seq-c0); }
.log-seq-c1 { color: var(--log-seq-c1); --seq: var(--log-seq-c1); }
.log-seq-c2 { color: var(--log-seq-c2); --seq: var(--log-seq-c2); }
.log-seq-c3 { color: var(--log-seq-c3); --seq: var(--log-seq-c3); }
.log-seq-c4 { color: var(--log-seq-c4); --seq: var(--log-seq-c4); }
.log-seq-c5 { color: var(--log-seq-c5); --seq: var(--log-seq-c5); }
/* Zakończenie bierze barwę SWOJEGO werdyktu — tę samą, w której świeci wciśnięty przycisk
„zakończona …" w panelu. Wcześniej wszystkie cztery werdykty miały jeden neutralny kolor, więc
trzeba było przeczytać linię, żeby wiedzieć, czy komenda skończyła się dobrze — choć to jest
dokładnie ta rzecz, o którą zapytano.
Werdykt bez wybranej barwy (`any`) zostaje przy dawnej bieli: „nieważne, czym" nie jest ani
sukcesem, ani błędem, i udawanie któregoś byłoby kłamstwem o pytaniu. */
/* Rodzaj zdarzenia bije numer miejsca — ale tylko o BARWĘ samego trafienia. Numer miejsca zostaje
na elemencie i dalej rozstrzyga o kolorze kreski w rynnie, więc „①" w panelu ma z czym się
zestawić. Reguła stoi PO `.log-seq-c*`, bo ma tę samą specyficzność i wygrywa kolejnością.
Szukany błąd świecił dotąd barwą miejsca ① — a ten sam błąd wybrany jako zakończenie komendy był
czerwony. Jedna rzecz w dwóch barwach na jednym ekranie kazała się zastanawiać, czy to na pewno
ta sama rzecz. */
/* To samo dla zwykłego trafienia frazy: pytanie o JEDNO zdarzenie nie tworzy łańcucha, więc nie
idzie przez nakładkę — schodzi płaskim warunkiem i rysuje się zwykłym `mark`. Barwa nadpisuje się
przez `--log-hit`, bo to z niego `mark` bierze i tło, i kreskę. */
mark.log-hit-err { --log-hit: var(--cmd-end-err); }
mark.log-hit-msg { --log-hit: var(--cmd-end-msg); }
mark.log-hit-val { --log-hit: var(--log-hit-val); }
.log-seq-kind-err { --seq: var(--cmd-end-err); }
.log-seq-kind-msg { --seq: var(--cmd-end-msg); }
.log-seq-end-ok { --seq: var(--cmd-end-ok); }
.log-seq-end-err { --seq: var(--cmd-end-err); }
.log-seq-end-cut { --seq: var(--cmd-end-cut); }
.log-seq-end-msg { --seq: var(--cmd-end-msg); }
.log-seq-end-any { --seq: var(--log-seq-outcome); }
/* ── Pasmo komendy, która odpowiedziała ─────────────────────────────────────────────────────────
Pytanie o komendę odpowiada CAŁYM blokiem, a nie jedną linią, więc zaznaczamy cały blok. Obwódka
wokół samego `CMD=0x2D` mówiła tylko tyle, że blok się tam zaczyna — a to jego pierwsza linia
i widać ją gołym okiem; przy okazji zabierała gest zarezerwowany dla trafienia w TREŚĆ.
Tło jest mocno przezroczyste świadomie: pod nim leżą podświetlenia frazy i obwódki członów pary,
i to one mają zostać czytelne. Pasmo mówi „ta komenda odpowiedziała", a nie „tu jest trafienie" —
więc ma być widoczne kątem oka, a nie przykrywać cokolwiek.
Barwa idzie za NUMEREM BLOKU z panelu, tą samą paletą, co obwódki miejsc osi. Dzięki temu blok „②"
po lewej i pasmo w zrzucie zestawia się wzrokiem, bez czytania. */
/* Łącznik mierzący KOMENDY, nie linie. Kreskowany, bo mierzy inną jednostkę niż łączniki zdarzeń
stojące w tej samej rynnie — a liczba przy nim („3") wygląda identycznie w obu wypadkach. Pasmo
mówi „ta komenda odpowiedziała", ale nie mówi, która z którą tworzy parę; dopiero ta kreska łączy
je w odpowiedź, którą dało się przeczytać bez liczenia bloków wzrokiem. */
/* Łącznik między komendami: cienki i przygaszony na odcinku MIĘDZY blokami. Cała jego robota to
dojście od jednej klamry do drugiej. */
.log-rail.is-commands {
border-left-style: solid;
border-left-width: 1px;
opacity: 0.55;
}
/* Klamra obejmująca komendę — tyle wierszy, ile ich ma. To ona odpowiada na zgłoszenie „to zawsze
będzie wyglądać jak od linii do linii": pionowa kreska biegnąca od wiersza do wiersza czyta się
jak odstęp liniowy, gdziekolwiek się zaczyna. Klamra ma widoczną długość równą komendzie, więc
widać, że trzyma BLOK, a nie punkt w tekście; odcinek między komendami zostaje przy jednym pikselu. */
.log-rail.is-commands.is-anchor {
border-left-width: 3px;
opacity: 1;
}
/* Wąsów klamra nie ma świadomie: `::before` i `::after` są już zajęte przez KROPKI na końcach kreski,
wspólne dla obu rodzajów łączników. Dokładanie do nich poprzeczek znaczyło walkę dwóch reguł o ten
sam pseudo-element — a klamrę i tak odróżnia grubość: trzy piksele na komendzie, jeden na odcinku
między nimi. */
/* Liczba przy kresce komend stoi PIONOWO i to nie jest ozdoba: rynna ma kilkanaście pikseli
szerokości, a pozioma etykieta („3 kom.") wychodziła z niej na treść logu i zasłaniała wiersz,
przy którym akurat wypadła. Pionowa mieści się w swoim torze i nie zabiera nic treści.
Obwódka w kolorze pary, a nie samo tło — żeby dwie liczby stojące obok siebie w rynnie dało się
rozróżnić kątem oka, bez czytania jednostki. */
/* Liczba stoi POZIOMO, ale w przerwie między blokami — tam, gdzie w logu nie ma treści, więc nie ma
czego zasłonić. Pionowa mieściła się w rynnie, ale była nieczytelna („za bardzo nie widać ile
komend").
Wyrównana do LEWEJ krawędzi swojego toru, a nie wyśrodkowana: tor komend stoi na zewnątrz rynny,
więc etykieta rośnie w lewo, z dala od liczb odstępu liniowego. Wyśrodkowane nachodziły na siebie,
bo obie są szersze od toru (kilkanaście pikseli), a stały w sąsiednich. Nieprzezroczyste tło
i wyższa warstwa domykają sprawę tam, gdzie mimo wszystko się spotkają. */
.log-rail.is-commands .log-rail-gap {
/* Na LEWO od swojej kreski, w wolnym miejscu kolumny — nie na niej i nie za nią. Wyśrodkowana na
kresce wychodziła poza zrzut i była ucinana. */
left: auto;
right: 0.5rem;
transform: translateY(-50%);
z-index: 2;
border: 1px solid currentColor;
background: var(--app-surface);
padding: 0 0.28rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.01em;
}
.log-rail.is-commands .log-rail-gap::after {
/* Spacja po escapie jest OBOWIĄZKOWA: bez niej parser czyta „\00a0c" jako jeden znak (escape bierze
do sześciu cyfr szesnastkowych), pochłania „c" z „cmd" i wstawia znak, którego nie ma — na
ekranie zostawał kwadracik i „md". */
content: "\00a0 cmd";
opacity: 0.9;
font-weight: 700;
font-size: 0.88em;
}
/* Wąski ekran: kolumna zwęża się do samych kresek, a liczba schodzi im nad głowę zamiast obok.
Rozsuwanie w bok kosztowałoby treść, a to ona jest tu najważniejsza. */
@media (max-width: 900px) {
.log-line-cmdrail {
width: calc(1.7rem + min(var(--cmd-lanes, 0), 2) * 0.6rem);
}
.log-rail.is-commands .log-rail-gap {
font-size: 0.55rem;
padding: 0 0.12rem;
}
.log-rail.is-commands .log-rail-gap::after {
content: none;
}
}
.log-cmd-band {
border-radius: 3px;
}
/* Granica komendy w widoku programu — cienka, przerywana, rysowana ZAWSZE, nie tylko przy pytaniu.
Program to kilkadziesiąt komend sklejonych w jeden zrzut i bez niej trzeba szukać wierszy
„CMD=0x…" wzrokiem. Przygaszona świadomie: ma dzielić, a nie dzielić uwagę z treścią — pasmo
i obwódki leżą wyżej i to one mówią, co odpowiedziało. */
.log-cmd-edge {
border-top: 1px dashed rgba(158, 177, 198, 0.28);
}
/* Pasmo ma własną, mocniejszą kreskę startu; gdy obie wypadają na tym samym wierszu, zostaje ta
od pasma — mówi więcej. */
.log-cmd-edge.log-cmd-band-start {
border-top-color: transparent;
}
/* Granica między sąsiadującymi komendami. Kolor rozdziela je wszędzie tam, gdzie komenda ma wybór
roli — ale pytanie o JEDNO miejsce ma z definicji jeden kolor, więc dwie takie komendy stojące
obok siebie zlewałyby się w jeden blok. Kreska jest cienka i przygaszona: ma rozdzielać, a nie
dzielić uwagę z treścią. */
.log-cmd-band-start {
/* Wyraźniejsza, niż była (16% białego), bo to ona niesie CAŁĄ granicę między komendami
o tym samym kolorze — a takie stoją obok siebie regularnie, odkąd barwa idzie za numerem bloku
i przestała się zmieniać „byle jak". Zgłoszone z ekranu: „to się zlewa". */
box-shadow: inset 0 1px 0 rgba(233, 242, 255, 0.4);
}
.log-cmd-band-0 { background: color-mix(in srgb, var(--log-seq-c0) 13%, transparent); }
.log-cmd-band-1 { background: color-mix(in srgb, var(--log-seq-c1) 13%, transparent); }
.log-cmd-band-2 { background: color-mix(in srgb, var(--log-seq-c2) 13%, transparent); }
.log-cmd-band-3 { background: color-mix(in srgb, var(--log-seq-c3) 13%, transparent); }
.log-cmd-band-4 { background: color-mix(in srgb, var(--log-seq-c4) 13%, transparent); }
.log-cmd-band-5 { background: color-mix(in srgb, var(--log-seq-c5) 13%, transparent); }
/* Przeglądarka bez `color-mix` dostaje to samo w rgba — pasmo jest informacją, nie ozdobą, więc nie
ma prawa zniknąć po cichu. Wartości odpowiadają barwom wyżej przy 13% krycia. */
@supports not (background: color-mix(in srgb, red 13%, transparent)) {
.log-cmd-band-0 { background: rgba(55, 182, 232, 0.13); }
.log-cmd-band-1 { background: rgba(71, 209, 140, 0.13); }
.log-cmd-band-2 { background: rgba(240, 182, 76, 0.13); }
.log-cmd-band-3 { background: rgba(183, 155, 232, 0.13); }
.log-cmd-band-4 { background: rgba(240, 111, 127, 0.13); }
.log-cmd-band-5 { background: rgba(127, 212, 208, 0.13); }
}
/* Zakończenie: kreska przerywana, bo to nie jest krok, który ktoś wpisał — jest tym, o co pytał
przycisk pod osią. Ciągła czytałaby się jak kolejne miejsce łańcucha i kazała szukać w panelu
numeru, którego tam nie ma. Barwę niesie `--seq` ustawione przez `.log-seq-end-*` wyżej. */
.log-seq-outcome.log-seq-hit {
border-bottom-style: dashed;
}
/* ── Kopiowanie do schowka ──────────────────────────────────────────────────────────────────── */
.copy-button-wrap {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.copy-button {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.45rem;
border: 1px solid var(--app-border-strong);
border-radius: 7px;
background: transparent;
color: var(--app-text-muted);
font: inherit;
font-size: 0.74rem;
cursor: pointer;
}
.copy-button:hover {
border-color: var(--app-accent);
color: var(--app-accent);
}
.copy-button-icon {
width: 0.9rem;
height: 0.9rem;
flex: 0 0 auto;
}
.copy-button-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* Potwierdzenie gaśnie samo — pozostawione na stałe zaczyna być tłem i przestaje cokolwiek znaczyć.
Stoi POZA układem wiersza. Doklejone w nim rozpychało sąsiadów w chwili kliknięcia: przyciski
odskakiwały w bok i wracały po zgaśnięciu potwierdzenia, więc każde kopiowanie ruszało pół
nagłówka. Wyrównane do prawej krawędzi swojego przycisku, żeby nie wyjechało poza kartę. */
.copy-button-ok {
position: absolute;
top: calc(100% + 0.2rem);
right: 0;
white-space: nowrap;
pointer-events: none;
z-index: 2;
color: var(--app-success);
font-size: 0.72rem;
animation: copy-button-fade 2.4s ease forwards;
}
@keyframes copy-button-fade {
0%, 70% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.copy-button-ok {
animation: none;
}
}
/* Czynności na treści logu stoją W bloku, w jego prawym górnym rogu: udostępnij, omów, kopiuj.
W pasku nad treścią czytały się jak przyciski widoku, a nie jak czynności na tym, co pod spodem;
we własnych kolumnach tabeli zabierały szerokość każdemu wierszowi, choć klika się je dopiero po
rozwinięciu. Pozycjonowanie musi zostać tutaj, bo `.copy-button-wrap` należy do CopyButton
i nie dostaje znacznika izolacji — kontener jest jeden, więc przyciski nie leżą jeden na drugim. */
.query-detail-actions {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
gap: 0.35rem;
/* Nad treścią i nad plakietką numeru wystąpienia („2/5"), która zajmuje ten sam róg swojego
bloku. Zderzają się tylko wtedy, gdy aktywna komenda zaczyna się w pierwszej linii pliku —
wtedy wygrywają czynności, bo numer wystąpienia powtarza się przy każdym kolejnym bloku. */
z-index: 3;
}
.query-detail-actions .copy-button-wrap {
position: static;
}
/* Przyciski w tym rogu leżą na tekście (udostępnij, kopiuj, omów) i mają ten sam kształt: wspólne klasy systemu przycisków
(`act-btn is-sm`, S5/A72). Ich tło jest nieprzezroczyste (gradient z `--app-bg-soft`), więc odcinają się od treści
bez własnych reguł. */
/* Kropka koloru przy chipie warunku nad wynikami — ta sama barwa co obwódka w treści. */
.query-filter-chip-seq-dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
margin-right: 0.3rem;
border-radius: 50%;
vertical-align: baseline;
}
/* Aktywna komenda w widoku pełnego logu. Dawniej: pogrubiona czcionka i rozjaśniony tekst — czyli
gest zarezerwowany dla TRAFIENIA, użyty do powiedzenia „to jest ta komenda". Fragment potrafi mieć
kilkadziesiąt linii, więc pogrubienie krzyczało przez pół ekranu i przykrywało to, czego człowiek
naprawdę szukał. Dziś to samo mówi przezroczyste pasmo — a treść zostaje taka, jaka jest w logu.
Barwa jest ta sama, co pasmo PIERWSZEGO miejsca pytania — i to nie jest kolizja, tylko ten sam
gest w dwóch trybach, które się nie spotykają. Pasma komend powstają wyłącznie przy wyniku
„programy" (tam pyta o nie przebieg), a ten segment wyłącznie w widoku „Pełny log" przy wyniku
„komendy". Człowiek uczy się więc jednego znaczenia: „to jest ta komenda, o którą chodzi".
Krecha z lewej zostaje jako różnica dla tych, którzy widzą oba widoki obok siebie. */
.log-command-segment {
display: block;
position: relative;
margin-left: -0.45rem;
padding-left: calc(0.45rem - 2px);
border-left: 2px solid color-mix(in srgb, var(--log-seq-c0) 55%, transparent);
border-radius: 0 3px 3px 0;
background: color-mix(in srgb, var(--log-seq-c0) 13%, transparent);
}
@supports not (background: color-mix(in srgb, red 13%, transparent)) {
.log-command-segment {
border-left-color: rgba(55, 182, 232, 0.55);
background: rgba(55, 182, 232, 0.13);
}
}
/* Odstęp tylko MIĘDZY stykającymi się wystąpieniami (ta sama komenda kilka razy pod rząd).
Przerwa w pasku jest wtedy jedyną, ale wystarczającą granicą — pojedyncze wystąpienie
nie dostaje marginesu, więc log nie rozjeżdża się bez potrzeby. */
.log-command-segment + .log-command-segment {
margin-top: 0.35rem;
}
/* Numer wystąpienia („2/5”) — renderowany tylko gdy wystąpień jest więcej niż jedno. */
.log-command-segment[data-occ]::after {
content: attr(data-occ);
position: absolute;
top: 0;
right: 0;
padding: 0 0.25rem;
border-radius: 4px;
background: var(--app-surface);
color: rgba(158, 177, 198, 0.7);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Adnotacje dekodera UDS. Wstawiane jako MarkupString, więc poza izolacją CSS komponentu. */
.uds-decode-line {
display: block;
padding-left: 2.2ch;
font-size: 0.92em;
white-space: pre-wrap;
}
.uds-decode-line::before {
content: "└─ ";
color: rgba(178, 197, 216, 0.55);
}
.uds-decode--bad {
color: #ff9aa6;
}
.uds-decode--pending {
color: #f7c260;
}
.uds-decode--ok {
color: #86c9ae;
}
.uds-decode--unknown {
color: #8fa3b5;
}
/* Plakietka licznika powtórzeń zwiniętych linii (run-length). Waga rośnie z krotnością.
Wstrzykiwana JEST w treść linii, więc bez `user-select: none` zaznaczenie myszą kleiło ją
z tekstem („…linia×17") i taka postać trafiała do schowka. Numer wystąpienia „2/5" i prefiks
adnotacji tego nie potrzebują — to pseudo-elementy, których zaznaczenie nie obejmuje. */
.log-fold-badge {
display: inline-block;
user-select: none;
margin-left: 0.9ch;
padding: 0 0.55em;
border-radius: 999px;
font-size: 0.82em;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.02em;
vertical-align: baseline;
border: 1px solid transparent;
white-space: nowrap;
}
.log-fold-badge--low {
color: #cdd9e5;
background: rgba(143, 163, 181, 0.18);
border-color: rgba(143, 163, 181, 0.35);
}
.log-fold-badge--mid {
color: #ffd98a;
background: rgba(247, 194, 96, 0.16);
border-color: rgba(247, 194, 96, 0.5);
}
.log-fold-badge--high {
color: #1a1216;
background: #ff9aa6;
border-color: #ff9aa6;
font-weight: 800;
box-shadow: 0 0 0 1px rgba(255, 154, 166, 0.35);
}
.new_result {
font-weight: 700;
color: #71e4a5;
}
.sevendays_result {
font-weight: 700;
color: #f5c567;
}
/* Wspólny wygląd paska pod wynikami; różni je wyłącznie to, DO CZEGO są przyklejone. */
.query-results-fixed-paginator,
.query-results-inline-paginator {
z-index: 1030;
margin: 0;
/* Poziomy padding dosuwa strefy do wycentrowanego pasma ~1320px zamiast do krawędzi ekranu. */
padding: 0.22rem max(0.9rem, calc((100% - 1320px) / 2)) calc(0.22rem + env(safe-area-inset-bottom));
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0.8rem;
align-items: center;
background: rgba(12, 19, 29, 0.94);
border-top: 1px solid var(--app-border);
backdrop-filter: blur(8px);
}
/* Do okna — pasek dotyczy CAŁEJ strony wyników i nie ma obok siebie nic innego. */
.query-results-fixed-paginator {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
/* Do kolumny wyników — w widoku dzielonym pasek należy do odpowiedzi, a nie do okna. Przyklejony do
okna ciągnął tło pod panelem budowania pytania i zabierał 6 rem pionu wszystkiemu, także panelowi,
którego nie dotyczy. Że stoi na ekranie zawsze, załatwia układ kolumny (query-editor.css): to ona
ma wysokość ekranu, przewija się lista nad paskiem, a nie pasek razem z nią. */
.query-results-inline-paginator {
/* Pas i szelki: układ kolumny stawia pasek pod listą, a `sticky` trzyma go przy dolnej krawędzi
także wtedy, gdy przewija się samo ciało kolumny. Jedno bez drugiego już raz zawiodło. */
position: sticky;
bottom: 0;
z-index: 5;
border-top: 1px solid var(--app-border);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
/* Bez dosuwania do wycentrowanego pasma strony — pasmem jest tutaj sama kolumna. */
padding: 0.25rem 0.55rem;
}
.query-results-bar-meta {
justify-self: start;
display: inline-flex;
align-items: center;
}
.query-results-bar-tools {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.query-sticky-controls {
position: sticky;
top: 0.5rem;
z-index: 900;
background: rgba(11, 18, 28, 0.9);
backdrop-filter: blur(8px);
padding: 0.75rem 0.7rem 0.35rem;
margin-bottom: 0.75rem;
border: 1px solid #2d4258;
border-radius: 12px;
}
/* Widok na cały ekran (edytor zapytania) dostaje dokładnie wysokość okna: treść strony zwykle rośnie
z zawartością i to `.main-content` się przewija — ale tam, gdzie widok ma własne przewijane kolumny,
rosnąć nie może, bo wtedy dół kolumny (z paskiem pod wynikami) wypada poza oknem.
Reguła stoi tutaj, a nie w arkuszu zakresowym układu: `.query-editor-shell` należy do strony, a
`.content` do układu — dwa różne zakresy, więc selektor musi być globalny. */
.main-content:has(.query-editor-shell) > .content {
flex: 1 1 auto;
min-height: 0;
}
.query-module-shell {
background: linear-gradient(180deg, rgba(16, 26, 38, 0.9) 0%, rgba(12, 20, 30, 0.85) 100%);
border: 1px solid #2d4258;
border-radius: 14px;
padding: 0.9rem 0.9rem 1rem;
}
.query-module-shell.mode-accent-scope {
border-color: var(--mode-accent-border);
background:
radial-gradient(circle at top left, var(--mode-accent-soft), transparent 32%),
linear-gradient(180deg, rgba(16, 26, 38, 0.9) 0%, rgba(12, 20, 30, 0.85) 100%);
box-shadow: 0 14px 28px rgba(3, 10, 19, 0.3), inset 0 0 0 1px color-mix(in srgb, var(--mode-accent-border) 28%, transparent);
}
.mode-accent-scope .query-sticky-controls {
border-color: var(--mode-accent-border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--mode-accent-soft) 68%, rgba(11, 18, 28, 0.9)) 0%, rgba(11, 18, 28, 0.92) 100%);
}
.mode-accent-scope .query-filter-editor-panel,
.mode-accent-scope .query-results-query-summary,
.mode-accent-scope .query-results-scroll-area,
.mode-accent-scope .query-results-paging-controls {
border-color: color-mix(in srgb, var(--mode-accent-border) 55%, transparent);
}
.mode-accent-scope .query-results-query-summary {
background:
linear-gradient(180deg, color-mix(in srgb, var(--mode-accent-soft) 64%, rgba(28, 43, 61, 0.92)) 0%, rgba(22, 34, 49, 0.92) 100%);
}
.query-filter-editor-panel {
background: linear-gradient(180deg, #152434 0%, #112031 100%);
}
.draft-value-wrap {
position: relative;
}
.draft-value-chips {
display: flex;
flex-wrap: wrap;
gap: 0.38rem;
margin-top: 0.55rem;
}
.draft-value-chip {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: rgba(30, 56, 78, 0.72);
color: #ddebf8;
font-size: 0.92rem;
line-height: 1.2;
box-shadow: inset 0 0 0 1px rgba(102, 137, 168, 0.22);
}
.draft-value-chip-remove {
border: none;
background: transparent;
color: #9dbdd8;
padding: 0;
width: 1rem;
height: 1rem;
line-height: 1;
font-size: 0.95rem;
cursor: pointer;
}
.draft-value-chip-remove:hover {
color: #edf7ff;
}
/* Powierzchnia podpowiedzi z indeksu — te same tokeny co wysuwana lista wartości i wysuwany wybór
pola. Wcześniej miała własne tło (#142536), własny promień (8px) i brak cienia, więc w jednym
wierszu edytora sąsiadowały ze sobą trzy różne szuflady. Treść rysuje FilterValueList. */
.draft-suggestions-surface {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 0.35rem);
z-index: 1200;
background: var(--picker-surface);
border: 1px solid var(--picker-border);
border-radius: var(--picker-radius);
box-shadow: var(--picker-shadow);
overflow: hidden;
}
.query-module-shell a {
color: #8ddff9;
font-weight: 700;
text-decoration-color: rgba(141, 223, 249, 0.5);
}
.query-module-shell a:hover {
color: #b4ecff;
}
.query-results-scroll-area {
border: 1px solid #2e415a;
border-radius: 12px;
background: var(--app-surface);
overflow: auto;
}
.query-results-scroll-area-paged {
margin-bottom: 6rem;
}
.query-results-scroll-area .table {
margin-bottom: 0;
}
.query-results-scroll-area .table thead th {
position: sticky;
top: 0;
z-index: 2;
}
.query-results-query-summary {
background: linear-gradient(180deg, rgba(28, 43, 61, 0.92) 0%, rgba(22, 34, 49, 0.92) 100%);
color: #d7e7f7;
border: 1px solid rgba(105, 139, 171, 0.5);
border-radius: 10px;
padding: 0.55rem 0.75rem;
}
.query-results-query-summary strong {
color: #eaf4ff;
}
.query-results-summary-row {
display: flex;
align-items: flex-start;
gap: 0.45rem;
flex-wrap: wrap;
}
.query-results-summary-row + .query-results-summary-row {
margin-top: 0.35rem;
}
/* Kształt przycisku akcji w module zapytań — wspólny dla listy zapytań i nagłówka wyników.
Dlaczego globalnie, a nie w `.razor.css` obok komponentu: te klasy renderują DWA komponenty
(QueryActionButtons i wydzielony z niego QueryEditIconButton). Blazor dokleja do reguł
z pliku `.razor.css` znacznik zakresu komponentu, który ten plik posiada, więc reguła
z jednego komponentu nie dosięga znacznika drugiego — przycisk wychodzi wtedy zupełnie bez
stylu i po prostu znika z ekranu, bez błędu i bez śladu w logu. Tak zniknął ołówek „Edytuj".
Kolory konkretnej akcji zostają przy komponencie, który ją rysuje; tutaj stoi tylko to,
co jest wspólne. */
/* Czynność przy zapytaniu to ikona, nie klawisz: płaska powierzchnia, cienka obwódka, żadnych
cieni pod spodem i żadnego podnoszenia się pod kursorem. Siedem takich klawiszy w każdym wierszu
listy ważyło więcej niż samo pytanie, o które w tym wierszu chodzi. */
.query-action-btn {
position: relative;
width: 1.85rem;
min-width: 1.85rem;
height: 1.85rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-width: 1px;
border-radius: 8px;
box-shadow: none;
transition:
border-color 140ms ease,
background-color 140ms ease,
color 140ms ease;
}
.query-action-btn:focus-visible {
outline: 2px solid var(--c, var(--act-neutral));
outline-offset: 2px;
}
.query-action-btn:disabled {
opacity: 0.68;
transform: none;
cursor: not-allowed;
}
.query-action-icon {
width: 1rem;
height: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Rysunek bez wymiaru rozciąga się do domyślnych 300×150 piksela — to ta reguła trzyma
ikonę w rozmiarze przycisku, a nie sam plik SVG. */
.query-action-icon svg {
width: 1rem;
height: 1rem;
display: block;
}
/* Ołówek stoi w rzędzie z podpisem „Filtry:", więc równa się do jego linii bazowej, a nie do
chipów, które potrafią zawinąć się na kilka wierszy. */
.query-results-summary-row .query-action-btn {
flex: 0 0 auto;
margin-top: -0.15rem;
}
/* =========================================================================================
System przycisków modułu zapytań i wyników (S5, A70) — JEDNO źródło.
Makieta: docs/design/query-actions-colour/module.html; strój wzięty z linków górnego paska
(NavMenu.razor.css `.top-link`): promień 10 px, lekki gradient, 12 px pogrubione, obrys.
ZASADA: kolor = RODZAJ czynności (tabela `--act-*` na początku pliku), ważność = WYPEŁNIENIE.
Barwa trybu DP4/DP5 NIE oznacza przycisku — tylko tryb i stan (włączony przełącznik, wybrany segment).
UŻYCIE (dla komponentów; nie piszemy własnych stylów przycisku w `.razor.css`):
pełny — JEDEN główny w miejscu (stały przycisk strony, główny przycisk okna);
zwykły — obrys i lekkie tło w barwie rodziny (paski kontekstowe);
nawigacja i zamykanie (Wróć, Anuluj, Zamknij, Zostań, Pełny widok) — zawsze neutralny, z pełnym
widocznym obrysem i znakiem kierunku; skrót klawisza w ;
odwracalne „zabieranie”: neutralne, czerwień dopiero pod kursorem (czerwień w spoczynku tylko
dla nieodwracalnych: `act-delete`).
Rodzina (ustawia `--c`): act-edit (niebieski) · act-copy (fiolet) · act-share (turkus) · act-rename (piasek)
· act-mark (zieleń) · act-chat (neutralny jasny) · act-delete (czerwień) · act-warn (bursztyn, znacznik)
· act-neutral (domyślna). `is-nav` zawsze jest neutralny, niezależnie od rodziny.
Modyfikatory: is-primary · is-nav · is-revoke · is-sm (11 px, niższy) · is-icon (sam znak, kwadrat).
Stany: :disabled / .is-disabled / aria-disabled="true" (martwy, bez barwy rodziny), :hover, :focus-visible.
przełącznik-pigułka z kropką: wyłączony — neutralny obrys i pusta kropka; włączony (`.is-on` albo
aria-pressed="true") — barwa trybu i pełna kropka. Pigułka jest TYLKO dla przełączników;
…
grupa „jedno z kilku” jak przełącznik DP4/DP5 na górnym pasku: wspólna pigułka, wybrany segment
(`.is-on`, aria-pressed="true" albo aria-checked="true") wypełniony barwą trybu.
BARWA TRYBU poza `.mode-accent-scope`: `--mode-accent*` ustawia dopiero zakres trybu na powłoce strony
(`.query-module-shell`). Okna (QueryRenameDialog, okno kopiowania…) stoją POZA powłoką, więc zmienne
tam nie istnieją. Przełącznik i segment mają dlatego zapas: bez zakresu włączony stan bierze
błękit aplikacji `--app-accent` (ten sam, który zakres DP5 nosi jako domyślny). Klasy czynności (`act-*`)
trybu w ogóle nie używają — okna dostają pełny przycisk w barwie swojej czynności, więc nie potrzebują zakresu.
Rozmiary pisma w px (12 / 11 / 11,5) są ŚWIADOMIE takie jak `.top-link` w `NavMenu.razor.css` (strój linków górnego
paska, decyzja 4 specyfikacji), a nie ze skali `--ui-fs-*`: przycisk ma wyglądać jak link paska, nie jak pole formularza.
Reguła dla `.razor.css`: arkusz komponentu dokłada znacznik zakresu do każdej reguły, więc jego selektor byłby
cięższy od tych z app.css i cicho je nadpisał — nie wolno mu ruszać koloru, tła, obrysu, promienia, cienia ani `--c`
tych klas, tylko układ (margines, gap, order, align, szerokość, display). Pilnuje tego `ButtonSystemCssTests`.
Wszystko na tokenach. */
.act-btn {
--c: var(--act-neutral);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: var(--ui-h-field, 30px);
margin: 0;
padding: 0 0.8rem;
border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
border-radius: 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, var(--app-bg-soft)) 0%, color-mix(in srgb, var(--c) 9%, var(--app-bg-soft)) 100%);
color: color-mix(in srgb, var(--c) 85%, var(--act-light));
font: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform 130ms ease, background 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.act-btn:hover {
color: var(--act-light);
text-decoration: none;
}
.act-btn svg {
flex: 0 0 auto;
width: 0.9rem;
height: 0.9rem;
}
/* Skrót klawisza w przycisku (Esc, Alt+S, Alt+Q): cichy, w barwie tekstu przycisku. */
.act-btn kbd {
padding: 0 0.28rem;
border: 1px solid currentColor;
border-radius: 4px;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.6rem;
line-height: 1.4;
opacity: 0.7;
}
.act-btn.is-sm {
min-height: var(--ui-h-chip, 26px);
padding: 0 0.6rem;
font-size: 11px;
}
.act-btn.is-icon {
min-width: var(--ui-h-field, 30px);
padding: 0 0.55rem;
}
.act-btn.is-sm.is-icon {
min-width: var(--ui-h-chip, 26px);
padding: 0 0.4rem;
}
/* Rodziny: barwa czynności wchodzi przez `--c`. */
.act-edit { --c: var(--act-edit); }
.act-copy { --c: var(--act-copy); }
.act-share { --c: var(--act-share); }
.act-rename { --c: var(--act-rename); }
.act-mark { --c: var(--act-mark); }
.act-chat { --c: var(--act-chat); }
.act-delete { --c: var(--act-delete); }
.act-warn { --c: var(--app-warning); }
.act-neutral { --c: var(--act-neutral); }
.act-btn:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: var(--c);
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, var(--app-bg-soft)) 0%, color-mix(in srgb, var(--c) 20%, var(--app-bg-soft)) 100%);
transform: translateY(-1px);
}
/* Pełny: jedyny główny w miejscu. Tekst ciemny (barwy rodzin są jasne). */
.act-btn.is-primary {
border-color: color-mix(in srgb, var(--c) 70%, var(--act-light));
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, var(--act-light)) 0%, var(--c) 100%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
color: var(--app-bg);
}
.act-btn.is-primary:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: color-mix(in srgb, var(--c) 70%, var(--act-light));
background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, var(--act-light)) 0%, color-mix(in srgb, var(--c) 90%, var(--act-light)) 100%);
color: var(--app-bg);
}
/* Nawigacja i zamykanie: zawsze neutralna, z pełnym widocznym obrysem (nigdy „duch”). */
.act-btn.is-nav {
--c: var(--act-neutral);
border-color: color-mix(in srgb, var(--c) 45%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--app-border-strong) 55%, var(--app-surface-2)) 0%, var(--app-surface-2) 100%);
color: var(--app-text);
}
.act-btn.is-nav:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: color-mix(in srgb, var(--c) 75%, transparent);
color: var(--act-light);
background: linear-gradient(180deg, color-mix(in srgb, var(--app-border-strong) 85%, var(--app-surface-2)) 0%, color-mix(in srgb, var(--app-border-strong) 45%, var(--app-surface-2)) 100%);
}
/* Odwracalne „zabieranie” (Wyczyść zawężenie, ✕ zdejmij warunek, Usuń nazwę): czerwień dopiero pod kursorem.
2026-10-15: autor prosił o stonowanie — także „Wyjdź bez zapisu” w oknie niezapisanych zmian jest czerwone dopiero pod kursorem. */
.act-btn.is-revoke:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: var(--act-delete);
background: color-mix(in srgb, var(--act-delete) 18%, var(--app-bg-soft));
color: color-mix(in srgb, var(--act-delete) 35%, var(--act-light));
}
.act-btn:focus-visible {
outline: 2px solid color-mix(in srgb, var(--c) 70%, var(--act-light));
outline-offset: 2px;
}
/* Martwy wygląda na martwego od pierwszego spojrzenia: bez barwy rodziny, bez cienia i bez podnoszenia. */
.act-btn:disabled,
.act-btn.is-disabled,
.act-btn[aria-disabled="true"] {
border-color: color-mix(in srgb, var(--act-neutral) 22%, transparent);
background: var(--app-bg-soft);
box-shadow: none;
color: var(--app-text-dim);
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* =========================================================================================
Okna dialogowe (modalne) — JEDEN standard (2026-10-15).
Markup:
…
treść …
przyciski
Tło, obramowanie, cień, promień i odstępy stoją tutaj (tokeny `--app-*`), a nie w arkuszach komponentów; komponent dokłada
tylko układ swojej treści i ewentualnie szerokość (`--app-dialog-w`). Stopka: przyciski w prawo, odstęp .5 rem, ta sama
wysokość; akcja główna (`is-primary`) stoi ostatnia (po prawej), odrzucająca/niszcząca jest `is-nav is-revoke` (czerwień dopiero pod kursorem, decyzja autora 2026-10-15), „Zostań/Anuluj” to `is-nav`.
Zamykanie i Esc to logika komponentów; fokus startowy, pułapkę Tab i powrót fokusu daje atrybut `data-query-dialog`
(+ `data-return-focus`) z list-shortcuts.js — okno bez niego tego nie ma. Tu tylko wygląd. */
.app-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 2100;
display: grid;
place-items: center;
padding: 1rem;
background: color-mix(in srgb, black 60%, transparent);
}
.app-dialog {
width: min(100%, var(--app-dialog-w, 34rem));
max-height: 90dvh;
overflow: auto;
padding: 1.2rem 1.4rem;
border: 1px solid var(--app-border-strong);
border-radius: 12px;
background: var(--app-surface);
color: var(--app-text);
box-shadow: 0 18px 60px color-mix(in srgb, black 55%, transparent);
}
.app-dialog-title {
margin: 0 0 0.7rem;
color: var(--app-text);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.app-dialog-text {
margin: 0 0 0.4rem;
color: var(--app-text-muted);
font-size: 0.85rem;
}
.app-dialog-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1.1rem;
}
/* ---- przełącznik i grupa segmentowa: tylko tu pigułka; barwa TRYBU z zapasem poza zakresem (patrz wyżej) ---- */
.app-toggle,
.app-seg {
--tg-accent: var(--mode-accent, var(--app-accent));
--tg-accent-strong: var(--mode-accent-strong, var(--app-accent));
--tg-border: var(--mode-accent-border, color-mix(in srgb, var(--tg-accent) 50%, transparent));
--tg-soft: var(--mode-accent-soft-strong, color-mix(in srgb, var(--tg-accent) 22%, transparent));
--tg-ink: var(--mode-accent-text-dark, var(--app-bg));
}
.app-toggle {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0;
padding: 0.36rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--act-neutral) 38%, transparent);
border-radius: 999px;
background: transparent;
color: var(--app-text-muted);
font: inherit;
font-size: 11.5px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
cursor: pointer;
transition: color 130ms ease, background 130ms ease, border-color 130ms ease;
}
.app-toggle::before {
content: "";
flex: 0 0 auto;
width: 0.5rem;
height: 0.5rem;
border: 1.5px solid currentColor;
border-radius: 50%;
}
.app-toggle:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: var(--tg-border);
color: var(--app-text);
}
.app-toggle.is-on,
.app-toggle[aria-pressed="true"] {
border-color: var(--tg-border);
background: var(--tg-soft);
color: var(--app-text);
}
.app-toggle.is-on::before,
.app-toggle[aria-pressed="true"]::before {
border-color: var(--tg-accent);
background: var(--tg-accent);
}
.app-toggle:focus-visible,
.app-seg-btn:focus-visible {
outline: 2px solid var(--tg-accent-strong);
outline-offset: 2px;
}
.app-toggle:disabled,
.app-toggle.is-disabled,
.app-toggle[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
.app-seg {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.12rem;
border: 1px solid color-mix(in srgb, var(--act-neutral) 34%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--app-bg) 75%, transparent);
}
.app-seg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-width: 2.2rem;
margin: 0;
padding: 0.3rem 0.7rem;
border: 0;
border-radius: 999px;
background: transparent;
color: color-mix(in srgb, var(--app-text) 85%, var(--act-neutral));
font: inherit;
font-size: 11.5px;
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
cursor: pointer;
transition: color 130ms ease, background 130ms ease;
}
.app-seg-btn:hover:not(:disabled, .is-disabled, [aria-disabled="true"], .is-on, [aria-pressed="true"], [aria-checked="true"]) {
background: color-mix(in srgb, var(--tg-accent) 14%, transparent);
color: var(--act-light);
}
.app-seg-btn.is-on,
.app-seg-btn[aria-pressed="true"],
.app-seg-btn[aria-checked="true"] {
background: linear-gradient(180deg, var(--tg-accent-strong) 0%, var(--tg-accent) 100%);
color: var(--tg-ink);
}
.app-seg-btn:disabled,
.app-seg-btn.is-disabled,
.app-seg-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
.app-seg-n {
font-size: 0.66rem;
font-variant-numeric: tabular-nums;
opacity: 0.8;
}
.query-results-share-feedback {
display: grid;
gap: 0.38rem;
margin-top: 0.6rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(104, 141, 171, 0.42);
border-radius: 10px;
background: rgba(12, 23, 34, 0.72);
color: #deecf8;
}
.query-results-share-feedback.is-success {
border-color: rgba(84, 199, 145, 0.42);
background: rgba(12, 33, 27, 0.76);
color: #d9ffee;
}
.query-results-share-feedback.is-error {
border-color: rgba(224, 120, 138, 0.42);
background: rgba(41, 18, 25, 0.78);
color: #ffe3e9;
}
.query-results-share-url {
display: block;
overflow-wrap: anywhere;
padding: 0.4rem 0.52rem;
border-radius: 8px;
background: rgba(5, 11, 18, 0.46);
color: #f3f9ff;
font-size: 0.85rem;
}
.query-filter-chips {
display: inline-flex;
align-items: center;
gap: 0.32rem;
flex-wrap: wrap;
}
.query-filter-chip-global {
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.28rem 0.72rem;
border: 1px solid rgba(104, 141, 171, 0.4);
border-radius: 999px;
background: rgba(16, 29, 42, 0.7);
color: #dce9f5;
font-size: 0.88rem;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.query-filter-chip-field-global {
color: #edf6ff;
font-weight: 700;
}
.query-filter-chip-operator-global {
color: #8fb8d8;
font-size: 0.8em;
font-weight: 700;
letter-spacing: 0.01em;
text-transform: lowercase;
}
.query-filter-chip-value-global {
color: #d8e7f6;
font-weight: 600;
}
.query-filter-chip-value-list-global {
display: inline-flex;
align-items: center;
gap: 0.28rem;
flex-wrap: wrap;
}
.query-filter-chip-value-token-global {
display: inline-flex;
align-items: center;
padding: 0.08rem 0.42rem;
border-radius: 999px;
background: rgba(101, 145, 183, 0.16);
color: #e8f3fd;
font-weight: 650;
letter-spacing: 0.01em;
}
.query-view-toggle {
display: inline-flex;
align-items: center;
gap: 0.28rem;
padding: 0.15rem;
border: 1px solid rgba(104, 141, 171, 0.45);
border-radius: 10px;
background: rgba(18, 30, 43, 0.7);
}
.query-view-toggle .btn {
padding: 0.18rem 0.62rem;
line-height: 1.1;
}
.results-action-back,
.results-action-share,
.results-action-mark,
.results-action-page,
.results-action-all {
border-width: 1px;
font-weight: 700;
transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.results-action-back {
background: linear-gradient(180deg, #3f596d 0%, #334a5d 100%);
color: #e7f2fb;
border-color: #5f7f98;
}
.results-action-back:hover:not(:disabled) {
filter: brightness(1.08);
box-shadow: 0 6px 14px rgba(9, 17, 29, 0.35);
}
.results-action-share {
background: linear-gradient(180deg, #4a6872 0%, #3b5560 100%);
color: #eefaff;
border-color: #78a8b6;
box-shadow: 0 0 0 1px rgba(120, 168, 182, 0.18) inset;
}
.results-action-share:hover:not(:disabled) {
filter: brightness(1.08);
box-shadow: 0 8px 18px rgba(20, 41, 51, 0.38);
}
.results-action-mark {
background: linear-gradient(180deg, #2f7f8e 0%, #286f7d 100%);
color: #e9fbff;
border-color: #4ea0b0;
}
.results-action-mark:hover:not(:disabled) {
filter: brightness(1.06);
box-shadow: 0 7px 16px rgba(21, 63, 74, 0.38);
}
.results-action-page {
background: linear-gradient(180deg, #447c9f 0%, #3a6a88 100%);
color: #eff8ff;
border-color: #669bc2;
}
.results-action-page:hover:not(:disabled) {
filter: brightness(1.06);
box-shadow: 0 7px 16px rgba(22, 47, 69, 0.4);
}
.results-action-all {
background: linear-gradient(180deg, #b58a4f 0%, #9f7540 100%);
color: #fff5e7;
border-color: #d2aa72;
box-shadow: 0 0 0 1px rgba(210, 170, 114, 0.24) inset;
}
.results-action-all:hover:not(:disabled) {
filter: brightness(1.08);
box-shadow: 0 8px 18px rgba(57, 34, 13, 0.38);
}
.results-action-back:disabled,
.results-action-share:disabled,
.results-action-mark:disabled,
.results-action-page:disabled,
.results-action-all:disabled {
opacity: 0.56;
box-shadow: none;
}
.query-results-scroll-area .table tbody tr {
cursor: pointer;
}
.row-expander-col {
width: 1%;
min-width: 2rem;
}
.query-select-col {
width: 1%;
min-width: 3.1rem;
}
.query-select-hit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin: 0;
cursor: pointer;
border-radius: 8px;
}
.query-select-hit:hover {
background: rgba(129, 187, 223, 0.14);
}
.query-select-checkbox {
width: 1.2rem;
height: 1.2rem;
accent-color: #63c8ed;
cursor: pointer;
}
.row-expander {
border: none;
background: transparent;
color: #8fd7f2;
font-size: 0.95rem;
line-height: 1;
padding: 0 0.35rem 0 0;
margin: 0;
cursor: pointer;
}
.row-expander:hover {
color: #b7ebff;
}
.row-expander:focus-visible {
outline: 1px solid #8fd7f2;
outline-offset: 2px;
border-radius: 4px;
}
.query-results-scroll-area .table tbody tr.query-read-row {
--bs-table-bg: rgba(55, 75, 99, 0.36);
--bs-table-accent-bg: rgba(62, 86, 113, 0.42);
--bs-table-striped-bg: rgba(60, 82, 108, 0.4);
--bs-table-hover-bg: rgba(74, 101, 130, 0.5);
--bs-table-color: #c6d8ea;
--bs-table-striped-color: #ccdded;
--bs-table-hover-color: #ddeaf7;
}
.query-results-scroll-area .table tbody tr.query-read-row > td:first-child {
box-shadow: inset 3px 0 0 rgba(120, 173, 220, 0.38);
}
.query-results-scroll-area .table tbody tr.query-read-row a,
.query-results-scroll-area .table tbody tr.query-read-row span,
.query-results-scroll-area .table tbody tr.query-read-row div {
color: inherit;
}
/* Licznik trafień: liczba zostaje najważniejszą rzeczą w pasku, ale przestaje być plakatem.
1,42 rem z poświatą czytało się jak nagłówek strony, a to jest jedna dana pod tabelą. */
.query-results-meta-block {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
background: transparent;
border: 0;
padding: 0;
}
.query-results-meta-label {
color: #8fa9c0;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.62rem;
font-weight: 600;
}
/* „na żywo" zamiast „Znaleziono" — w podglądzie edytora liczba przelicza się sama przy każdej
zmianie pytania, a kropka mówi to bez zdania. Ten sam znak, co nosił zdjęty pasek nad tabelą.
Przy „ograniczonym ruchu" kropka nie pulsuje: migotanie w rogu ekranu bywa nie do zniesienia. */
.query-results-meta-live {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #8fa9c0;
font-size: 0.68rem;
}
.query-results-meta-live::before {
content: "";
width: 0.38rem;
height: 0.38rem;
border-radius: 50%;
background: var(--app-success);
animation: query-results-live-pulse 2.4s ease-in-out infinite;
}
@keyframes query-results-live-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.query-results-meta-live::before { animation: none; opacity: 0.8; }
}
.query-results-meta-value {
color: #eaf6ff;
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.query-results-meta-suffix {
color: #a9c2d8;
font-size: 0.72rem;
font-weight: 500;
}
/* Stronicowanie to listwa pod listą, nie druga belka nad nią: cieńsza obwódka, mniejsze strzałki
i numer strony w tej samej wadze, co reszta paska. */
.query-results-paging-controls {
display: inline-flex;
align-items: center;
font-size: var(--ui-fs-note);
gap: 0.1rem;
height: var(--ui-h-chip);
padding: 0 0.25rem;
border: 1px solid var(--app-border);
border-radius: var(--ui-radius-pill);
background: transparent;
}
.query-page-btn {
min-width: 1.4rem;
height: 1.4rem;
padding: 0;
border: none;
border-radius: var(--ui-radius-pill);
background: transparent;
color: var(--app-text-muted);
line-height: 1;
font-size: 0.82rem;
transition: color 120ms ease, background-color 120ms ease;
}
.query-page-btn:hover:not(:disabled) {
color: var(--app-text);
background: color-mix(in srgb, var(--app-text) 10%, transparent);
}
.query-page-btn:disabled {
color: color-mix(in srgb, var(--app-text-dim) 55%, transparent);
}
.query-page-indicator {
color: var(--app-text-muted);
font-size: var(--ui-fs-note);
font-weight: 600;
font-variant-numeric: tabular-nums;
min-width: 6.4rem;
text-align: center;
}
@media (max-width: 768px) {
.query-results-fixed-paginator {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.45rem 0.6rem;
padding-left: 0.52rem;
padding-right: 0.52rem;
}
.query-results-meta-value {
font-size: 1.16rem;
}
.query-results-paging-controls {
font-size: 0.86rem;
}
.query-page-indicator {
min-width: 6.8rem;
font-size: 0.79rem;
}
.query-results-bar-tools {
flex: 1 1 100%;
justify-content: flex-end;
}
}
.valid.modified:not([type="checkbox"]) {
outline: 1px solid #2ec17d;
}
.invalid {
outline: 1px solid #e66779;
}
.validation-message {
color: #ff9fac;
}
.blazor-error-boundary {
background: #a0203d;
padding: 1rem 1rem 1rem 1.2rem;
color: #fff;
border-radius: 10px;
}
.blazor-error-boundary::after {
content: "An error has occurred.";
}
.darker-border-checkbox.form-check-input {
border-color: #7c92ab;
}
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
text-align: start;
}
* {
scrollbar-width: auto;
scrollbar-color: #4f789f #152436;
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-track {
background: #142334;
border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #467ba4 0%, #335f80 100%);
border: 2px solid #142334;
border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #5692be 0%, #42759a 100%);
}
*::-webkit-scrollbar-corner {
background: #142334;
}
.top-nav .app-top-link,
.top-nav .app-top-link:link,
.top-nav .app-top-link:visited {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.34rem 0.78rem !important;
border-radius: 10px !important;
border: 1px solid rgba(160, 194, 223, 0.24) !important;
background: linear-gradient(180deg, #1e3146 0%, #19283a 100%) !important;
box-shadow: 0 5px 10px rgba(5, 13, 22, 0.35) !important;
color: #dceeff !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
line-height: 1 !important;
text-decoration: none !important;
transition: transform 130ms ease, background-color 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease !important;
}
.top-nav .app-top-link:hover {
background: linear-gradient(180deg, #29405a 0%, #1f344b 100%) !important;
border-color: rgba(172, 211, 239, 0.42) !important;
transform: translateY(-1px) !important;
color: #fff !important;
text-decoration: none !important;
}
.top-nav .app-top-link.active {
background: linear-gradient(180deg, #51c5ed 0%, #2da3d6 100%) !important;
border-color: #89dbf5 !important;
color: #082031 !important;
}
.top-nav .app-top-link:focus-visible {
outline: 2px solid #8ed7f2 !important;
outline-offset: 2px !important;
}
.mobile-only {
display: none !important;
}
@media (max-width: 760px) {
html {
scrollbar-gutter: auto;
}
.content {
padding-left: 0.7rem;
padding-right: 0.7rem;
padding-top: 0.55rem;
}
.toolbar-row {
align-items: stretch;
gap: 0.4rem;
margin: 0.55rem 0;
}
.toolbar-row > .query-preview-toggle-frame,
.toolbar-row > .form-control,
.toolbar-row > .form-select,
.toolbar-row > input,
.toolbar-row > select,
.toolbar-row > label {
width: 100%;
}
.toolbar-row > .btn,
.toolbar-row > a.btn {
width: auto;
max-width: 100%;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block !important;
}
.mobile-meta-panel {
margin: 0.25rem 0 0.6rem;
border: 1px solid rgba(76, 111, 140, 0.32);
border-radius: 12px;
background: rgba(15, 26, 39, 0.74);
overflow: hidden;
}
.mobile-meta-panel > summary {
list-style: none;
cursor: pointer;
padding: 0.58rem 0.72rem;
color: #e3f1ff;
font-size: 0.8rem;
font-weight: 700;
}
.mobile-meta-panel > summary::-webkit-details-marker {
display: none;
}
.mobile-meta-panel[open] > summary {
border-bottom: 1px solid rgba(66, 96, 121, 0.22);
background: rgba(24, 39, 56, 0.58);
}
.mobile-meta-panel .index-hint-panel {
margin: 0;
padding: 0.6rem;
}
.index-hint {
width: 100%;
justify-content: space-between;
padding: 0.16rem 0.46rem;
font-size: 0.72rem;
}
.query-module-shell {
padding: 0.62rem 0.62rem 0.75rem;
border-radius: 12px;
}
.query-sticky-controls {
top: 0;
padding: 0.58rem 0.58rem 0.35rem;
margin-bottom: 0.55rem;
}
.query-results-query-summary,
.query-results-meta-block {
width: 100%;
}
.query-view-toggle {
width: 100%;
}
.query-view-toggle .btn {
flex: 1 1 0;
}
.results-toolbar > .btn,
.results-toolbar > a.btn {
min-height: 2rem;
padding-top: 0.34rem;
padding-bottom: 0.34rem;
}
.btn,
.btn-sm {
font-size: 0.8rem;
}
.btn {
padding: 0.42rem 0.68rem;
}
.card-body {
padding: 0.75rem;
}
.alert {
padding: 0.6rem 0.72rem;
border-radius: 10px;
}
h4 {
font-size: 1.05rem;
margin-bottom: 0.45rem;
}
h5 {
font-size: 0.95rem;
margin-bottom: 0.4rem;
}
}
/* ---- Opis filtra w edytorze ----
Definicja i ograniczenie. Bez krzyku: ograniczenie jest częścią definicji, nie ostrzeżeniem. */
/* Półka kategorii. Stoi nad tabelą filtrów i bierze całą jej szerokość — w kolumnie „Nazwa"
sześć tabów zawijało się na trzy rzędy i rozpychało wiersz. Zawsze jakiś tab jest aktywny:
półka bez zaznaczenia kłamałaby, że lista pól pokazuje wszystko. */
.filter-shelf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin: 0 0 0.9rem;
padding: 0.35rem;
border: 1px solid var(--app-border);
border-radius: 15px;
background: var(--app-bg-soft);
}
/* Wyszukiwarka pól — wsparcie listy, nie jej zamiennik. Select zostaje na miejscu. */
.filter-field-search {
position: relative;
flex: 0 1 16rem;
}
.filter-field-search-input {
min-height: 2.35rem;
border-radius: 12px;
}
.filter-field-search-results {
position: absolute;
z-index: 20;
top: calc(100% + 0.3rem);
right: 0;
left: 0;
max-height: 20rem;
overflow-y: auto;
padding: 0.3rem;
border: 1px solid var(--app-border-strong);
border-radius: 12px;
background: var(--app-surface);
}
/* Trafienie z innej kategorii ma być PODPISANE — inaczej wygląda jak wynik z taba, na którym stoisz. */
.filter-field-search-section {
padding: 0.35rem 0.55rem 0.2rem;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--app-text-muted);
opacity: 0.8;
}
.filter-field-search-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
padding: 0.4rem 0.55rem;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--app-text);
font-size: 0.82rem;
text-align: left;
cursor: pointer;
}
.filter-field-search-item:hover {
background: var(--app-surface-2);
}
.filter-field-search-item-category {
flex: none;
font-size: 0.68rem;
color: var(--app-text-muted);
}
.filter-field-search-empty {
padding: 0.5rem 0.55rem;
color: var(--app-text-muted);
font-size: 0.82rem;
}
/* Nazwa pola i — dla „usługi odrzuconej kodem" — pierwsza połówka pary. Obie w jednej linii,
żeby wiersz dalej czytał się jak zdanie. */
.query-editor-draft-name-cell {
display: flex;
gap: 0.4rem;
align-items: center;
}
/* Para „usługa odrzucona kodem": usługa (SID) siedzi w wąskiej kolumnie NAZWA obok nazwy pola, a jej
etykiety bywają długie („StopDiagnosticSession (0x20)"). Bez własnej szerokości select ścinał tekst,
podczas gdy „Kod odmowy" w kolumnie WARTOŚĆ rozlewał się na pół szerokiego ekranu. Usłudze dajemy
minimum, kodowi sufit — kolumny (table-layout: auto) rebalansują się same. */
.query-editor-draft-name-cell .dialog-refusal-input {
flex: 1 1 16rem;
min-width: 0;
}
.query-editor-draft-name-cell .dialog-refusal-input .form-select {
min-width: 15rem;
}
.query-editor-draft-value-cell .dialog-refusal-input .form-select {
max-width: 20rem;
}
/* Filtr niekompletny nie wchodzi do zapytania. Musi to być widać w wierszu, a nie tylko w alercie
na górze strony — inaczej wyniki poniżej wyglądają na przefiltrowane, a są całym korpusem. */
.query-editor-draft-incomplete {
margin-top: 0.35rem;
font-size: 0.8rem;
line-height: 1.3;
color: var(--app-warning-text, #f0b429);
}
.filter-field-explain {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.4rem;
padding: 0.45rem 0.6rem;
border-left: 2px solid var(--app-border-strong);
border-radius: 0 4px 4px 0;
background: rgba(9, 17, 27, 0.35);
max-width: 46rem;
}
.filter-field-explain-category {
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--app-text-muted);
opacity: 0.75;
}
.filter-field-explain-meaning,
.filter-field-explain-caveat {
margin: 0;
font-size: 0.74rem;
line-height: 1.5;
}
.filter-field-explain-meaning {
color: var(--app-text);
}
/* Ograniczenie: mniejsze, wyciszone, z myślnikiem zamiast plakietki. */
.filter-field-explain-caveat {
color: var(--app-text-muted);
padding-left: 0.75rem;
text-indent: -0.75rem;
}
.filter-field-explain-caveat::before {
content: "— ";
opacity: 0.6;
}
.identification-input-field {
max-width: 20rem;
min-width: 0;
}
/* Usługa i kod odmowy idą tą samą kontrolką, co reszta wyborów wartości. Baza 10rem zamiast „auto":
inaczej najdłuższa pozycja („InputOutputControlByIdentifier (0x2F)") dyktowałaby szerokość całego
wiersza. Rośnie, gdy jest miejsce. */
.dialog-refusal-pick {
flex: 1 1 10rem;
min-width: 0;
}
/* ── Asystent (LogRobot) ────────────────────────────────────────────────────────────────────────
Panel dokowany, nie nakładka: sens tego ekranu polega na tym, że asystent buduje zapytanie,
a użytkownik widzi obok, co dzieje się w widoku. Odsunięcie treści robi `:has()` — przeglądarka
bez jego obsługi degraduje się do nakładki, co jest gorsze, ale nie psuje niczego trwale. */
.assistant-dock {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 2500;
display: flex;
align-items: stretch;
pointer-events: none;
}
.assistant-dock > * {
pointer-events: auto;
}
body:has(.assistant-dock-open) .main-content {
padding-right: 30rem;
}
/* Uchwyt: wąski pionowy pasek przy krawędzi, żeby panel nie znikał z oczu, gdy jest zwinięty. */
.assistant-handle {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.85rem 0.4rem;
border: 1px solid var(--app-border-strong);
border-right: none;
border-radius: 0.6rem 0 0 0.6rem;
background: linear-gradient(180deg, var(--app-surface-2) 0%, var(--app-surface) 100%);
color: var(--app-text);
cursor: pointer;
box-shadow: -6px 0 18px rgba(3, 9, 18, 0.42);
}
.assistant-handle:hover {
border-color: var(--app-accent);
color: var(--app-accent);
}
.assistant-handle-glyph {
font-size: 1.15rem;
}
.assistant-handle-label {
writing-mode: vertical-rl;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.assistant-panel {
display: flex;
flex-direction: column;
width: min(30rem, 100vw);
background: var(--app-bg-soft);
border-left: 1px solid var(--app-border-strong);
box-shadow: -14px 0 34px rgba(3, 9, 18, 0.5);
font-family: var(--app-ui-font);
color: var(--app-text);
}
.assistant-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--app-border);
background: var(--app-surface);
}
.assistant-brand {
display: flex;
align-items: baseline;
gap: 0.45rem;
min-width: 0;
}
.assistant-brand-glyph {
font-size: 1.05rem;
}
.assistant-brand-name {
font-weight: 600;
letter-spacing: 0.01em;
}
.assistant-brand-scope {
font-size: 0.72rem;
color: var(--app-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.assistant-head-actions {
display: flex;
gap: 0.25rem;
}
.assistant-icon-button {
width: 1.9rem;
height: 1.9rem;
border: 1px solid transparent;
border-radius: 0.4rem;
background: transparent;
color: var(--app-text-muted);
cursor: pointer;
line-height: 1;
}
/* Odnośnik w rzędzie przycisków ma wyglądać jak jego sąsiedzi, a nie jak link w zdaniu. */
a.assistant-icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--app-text-muted);
}
.assistant-icon-button:hover,
.assistant-icon-button.is-active {
border-color: var(--app-border-strong);
background: var(--app-surface-2);
color: var(--app-text);
}
.assistant-model-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--app-border);
font-size: 0.78rem;
color: var(--app-text-muted);
}
.assistant-profile {
min-width: 0;
overflow: hidden;
color: var(--app-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.assistant-tokens {
font-variant-numeric: tabular-nums;
}
/* Stan portfela w pasku nad wątkiem. Zwykle wyciszony — to nie jest ostrzeżenie, tylko licznik. */
.assistant-budget {
color: var(--app-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.assistant-model-used {
max-width: 100%;
color: var(--app-text-muted);
font-size: 0.68rem;
overflow-wrap: anywhere;
}
/* Ostrzegawczo dopiero przy końcówce środków: wtedy liczba przestaje być tłem, bo za chwilę
zdecyduje o tym, czy kolejne pytanie w ogóle ruszy. */
.assistant-budget.is-low {
color: var(--app-warning);
font-weight: 600;
}
/* Rezerwacja próby zakończonej bez znanego kosztu — osobno od „Pozostałe środki”, żeby nie wyglądało
jak kolejny wydatek: to ekspozycja w wyjaśnieniu, którą księga rozliczy albo wyzeruje sama (K20). */
.assistant-budget-pending {
color: var(--app-text-muted);
font-style: italic;
}
/* Zamaskowany identyfikator w treści odpowiedzi. Kropkowane podkreślenie mówi, że pod spodem coś
jest — po najechaniu widać pełny token, który rozstrzyga, czy to ten sam egzemplarz. Urządzenie
przypięte w rozmowie (A27) stoi prawdziwym numerem, a pseudonim zostaje w dymku. */
.masked-id,
.revealed-id {
border-bottom: 1px dotted var(--app-text-muted);
cursor: help;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* Cena pojedynczej odpowiedzi — nota na rachunku, nie sygnał. */
.assistant-cost {
margin-left: auto;
color: var(--app-text-muted);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.assistant-conversations {
max-height: 14rem;
overflow-y: auto;
border-bottom: 1px solid var(--app-border);
background: var(--app-bg);
}
.assistant-conversation {
display: flex;
flex-direction: column;
gap: 0.15rem;
width: 100%;
padding: 0.5rem 0.75rem;
border: none;
border-bottom: 1px solid rgba(42, 60, 82, 0.5);
background: transparent;
color: var(--app-text);
text-align: left;
cursor: pointer;
}
.assistant-conversation:hover {
background: var(--app-surface);
}
.assistant-conversation.is-current {
border-left: 3px solid var(--app-accent);
}
/* Tytuł i plakietka w jednym wierszu: tytuł się skraca, plakietka nigdy. */
.assistant-conversation-head {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.assistant-conversation-title {
min-width: 0;
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* „archiwalna” — rozmowa policzona wycofanym silnikiem, tylko do odczytu. Cicha: obrys i barwa
pomocnicza, bez wypełnienia, żeby nie konkurowała z tytułem. */
.assistant-conversation-archived {
flex: none;
padding: 0 0.4rem;
border: 1px solid var(--app-border-strong);
border-radius: 999px;
color: var(--app-text-dim);
font-size: 0.64rem;
font-weight: 700;
line-height: 1.5;
}
.assistant-conversation-date {
font-size: 0.7rem;
color: var(--app-text-muted);
font-variant-numeric: tabular-nums;
}
/* „liczę…" przy rozmowie, w której trwa tura puszczona z innego wątku. Akcentem, bo to jedyny
ślad po odpowiedzi, która powstaje poza ekranem. */
.assistant-conversation-working {
font-size: 0.7rem;
color: var(--app-accent);
}
.assistant-thread {
flex: 1;
overflow-y: auto;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.assistant-intro {
font-size: 0.85rem;
line-height: 1.5;
color: var(--app-text);
}
.assistant-intro-muted {
color: var(--app-text-muted);
font-size: 0.8rem;
}
.assistant-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.6rem;
}
.assistant-chip {
padding: 0.3rem 0.55rem;
border: 1px solid var(--app-border-strong);
border-radius: 999px;
background: var(--app-surface);
color: var(--app-text);
font-size: 0.76rem;
cursor: pointer;
}
.assistant-chip:hover {
border-color: var(--app-accent);
color: var(--app-accent);
}
.assistant-message {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.assistant-message-user {
align-items: flex-end;
}
.assistant-bubble-user {
max-width: 88%;
padding: 0.45rem 0.65rem;
border-radius: 0.7rem 0.7rem 0.15rem 0.7rem;
background: var(--app-surface-2);
font-size: 0.86rem;
white-space: pre-wrap;
}
/* Fragment pytania, który asystent dostał w innej postaci (znacznik redakcji „[VIN]”, pseudonim urządzenia). Ton
ostrzegawczy aplikacji, przytłumiony — to informacja, nie błąd; dymek i tekst dla czytnika mówią „dla asystenta: …”.
Długa wartość łamie się w środku, żeby wąski panel (320 px) nie przewijał się w bok. */
.assistant-question-hidden {
padding: 0 0.15em;
border-radius: 0.2em;
background: color-mix(in srgb, var(--app-warning) 16%, transparent);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--app-warning) 70%, transparent);
color: inherit;
cursor: help;
overflow-wrap: anywhere;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* Opis „(dla asystenta: …)” jest dla czytnika ekranu — nie wchodzi do zaznaczenia ani kopii pytania. */
.assistant-question-hidden .visually-hidden {
user-select: none;
}
/* Pytanie bez odpowiedzi (błąd, przerwanie) — notka pod dymkiem, odczytana z księgi etapu. */
.assistant-unanswered-note {
max-width: 88%;
color: var(--app-text-muted);
font-size: 0.76rem;
text-align: right;
}
/* VIN z pytania (wariant C): odnośnik do wyszukiwarki z liczbą komend, policzoną ścieżką człowieka. Stoi pod
dymkiem pytania, wyrównany do niego; w wąskim panelu (320–480 px) człony zawijają się, nic nie wystaje w bok. */
.assistant-vin-search {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
gap: 0.25rem 0.45rem;
max-width: 88%;
min-width: 0;
font-size: 0.76rem;
color: var(--app-text-muted);
text-align: right;
}
.assistant-vin-search-title {
color: var(--app-text);
font-weight: 600;
}
.assistant-vin-search-value {
font-family: var(--bs-font-monospace, monospace);
overflow-wrap: anywhere;
}
.assistant-vin-search-links,
.assistant-vin-search-masked {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.3rem;
min-width: 0;
}
.assistant-vin-search-masked {
flex-basis: 100%;
align-items: baseline;
}
.assistant-vin-search-masked-note {
overflow-wrap: anywhere;
}
.assistant-vin-search-link {
padding: 0.15rem 0.5rem;
border: 1px solid var(--app-border-strong);
border-radius: 999px;
background: var(--app-surface);
color: var(--app-text);
text-decoration: none;
white-space: nowrap;
}
.assistant-vin-search-link:hover {
border-color: var(--app-accent);
color: var(--app-accent);
}
.assistant-vin-search-link:focus-visible {
outline: 2px solid var(--app-accent);
outline-offset: 1px;
}
.assistant-vin-search-link-masked {
border-style: dashed;
}
/* „Policz” przy starszym pytaniu — ten sam kształt co odnośnik, ale przycisk. */
.assistant-vin-search-count {
font: inherit;
cursor: pointer;
}
.assistant-answer {
font-size: 0.87rem;
line-height: 1.55;
}
.assistant-answer p {
margin: 0 0 0.55rem;
}
/* Sekcje układu odpowiedzi (R3): „Co odstaje w przebiegu”, „Co z tego wynika”, „Gdzie występuje”. */
.assistant-answer h3 {
font-size: 0.9rem;
font-weight: 600;
margin: 0.85rem 0 0.4rem;
}
.assistant-answer h3:first-child {
margin-top: 0;
}
.assistant-answer ul,
.assistant-answer ol {
margin: 0 0 0.55rem;
padding-left: 1.15rem;
}
/* Panel ma stałą, wąską szerokość, więc tabela MUSI się w niej zmieścić. `table-layout: fixed`
rozdziela kolumny po równo, zamiast rozpychać je najdłuższą komórką — bez tego jedno długie
zdanie w kolumnie wyjeżdżało poza ekran i całą odpowiedź trzeba było przewijać w bok. */
.assistant-answer table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin: 0 0 0.6rem;
font-size: 0.8rem;
}
.assistant-answer th,
.assistant-answer td {
border: 1px solid var(--app-border);
padding: 0.25rem 0.4rem;
text-align: left;
/* Łamiemy także w środku wyrazu: w komórkach stoją ścieżki programów i frazy z logu, w których
nie ma ani jednej spacji na kilkadziesiąt znaków. */
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
/* Kolumna z liczbą ma zostać wąska — to jedna liczba i znacznik, a nie miejsce na zdanie. Która
to kolumna, rozstrzyga TREŚĆ (`AssistantAnswerTable`), nie numer porządkowy: numer był prawdziwy
dopóki „Ile" stało na końcu, a po dołożeniu kolumny „Od czego zależy" przestał (22.09.2026). */
.assistant-answer th.assistant-cell-count,
.assistant-answer td.assistant-cell-count {
width: 4.5rem;
white-space: normal;
font-variant-numeric: tabular-nums;
}
.assistant-answer th {
background: var(--app-surface);
}
/* Do trzech kolumn z „licznik / mianownik” (rozkład marek, TOM-140, odbiór 2026-10-14) tabela zostaje
tabelą także przy 320 px: szerokość wynika z treści, liczby się nie łamią i stoją do prawej,
a nazwa w pierwszej kolumnie zawija się w miejscu, które zostało. */
.assistant-answer table.assistant-answer-table-compact {
table-layout: auto;
}
.assistant-answer table.assistant-answer-table-compact th.assistant-cell-count,
.assistant-answer table.assistant-answer-table-compact td.assistant-cell-count,
.assistant-answer table.assistant-answer-table-compact td.assistant-cell-ratio {
width: 1%;
white-space: nowrap;
overflow-wrap: normal;
word-break: normal;
text-align: right;
font-variant-numeric: tabular-nums;
}
.assistant-answer table.assistant-answer-table-compact th.assistant-cell-ratio {
width: 1%;
text-align: right;
}
/* Ogólny widok tabeli (TOM-140, odbiór 2026-10-16): nagłówki i daty łamią się między słowami, nie w środku
(„Pierwsz y build”, „07.08.2 026”). */
.assistant-answer table.assistant-answer-table-compact th,
.assistant-answer table.assistant-answer-table-compact td.assistant-cell-date {
overflow-wrap: break-word;
word-break: normal;
hyphens: manual;
}
.assistant-answer table.assistant-answer-table-compact td.assistant-cell-date {
font-variant-numeric: tabular-nums;
}
/* Pozycje ponad czołówką: natywne rozwinięcie, bez skryptu. */
.assistant-answer details.assistant-answer-more {
margin: -0.3rem 0 0.6rem;
}
.assistant-answer details.assistant-answer-more > summary {
cursor: pointer;
color: var(--app-accent);
font-size: 0.8rem;
margin-bottom: 0.3rem;
}
/* Widok „Co odstaje” (TOM-140): dalsze pozycje listy pod rozwinięciem, numeracja ciągła. */
.assistant-answer details.assistant-answer-more > ol {
margin-top: 0;
}
/* Mała nota pod odpowiedzią rysowaną przez aplikację: powód zatrzymania etapu, gdzie są warunki grup
i „Jak szukałem: …” (TOM-140). */
.assistant-answer p.assistant-answer-note {
color: var(--app-text-muted);
font-size: 0.76rem;
line-height: 1.45;
}
/* „Otwórz to wyszukiwanie” czyta się jako jeden przycisk-odnośnik — nie dzielimy go między linie. */
.assistant-answer p.assistant-answer-note a {
white-space: nowrap;
}
/* Cztery i więcej kolumn w panelu 30rem ściskały opis do pojedynczych liter.
Każdy wiersz pozostaje tabelą semantyczną, lecz wizualnie jest kartą z podpisem każdego pola. */
.assistant-answer table.assistant-answer-table-stacked {
display: block;
position: relative;
}
.assistant-answer-table-stacked thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.assistant-answer-table-stacked tbody {
display: grid;
gap: 0.65rem;
min-width: 0;
}
.assistant-answer-table-stacked tbody tr {
display: block;
min-width: 0;
border: 1px solid var(--app-border);
border-radius: 0.4rem;
background: var(--app-surface);
}
.assistant-answer table.assistant-answer-table-stacked td {
display: block;
width: auto;
min-width: 0;
padding: 0.4rem 0.65rem;
border: 0;
white-space: normal;
}
.assistant-answer table.assistant-answer-table-stacked td + td {
border-top: 1px solid var(--app-border);
}
.assistant-answer-table-stacked td::before {
content: attr(data-label);
display: block;
margin-bottom: 0.15rem;
color: var(--app-text-muted);
font-size: 0.75rem;
font-weight: 600;
overflow-wrap: anywhere;
}
/* Kolor jawnie, bo bez niego wygrywa bootstrapowe `--bs-code-color` — róż, który nie występuje
nigdzie indziej w tej aplikacji. Wszystkie pozostałe miejsca z `code` mają go ustawiony. */
.assistant-answer code {
padding: 0.05rem 0.25rem;
border-radius: 0.25rem;
background: var(--app-surface-2);
color: var(--app-warning);
font-size: 0.82em;
}
/* Fraza z logu w czipie potrafi nie mieć ani jednej spacji — bez łamania rozpychała komórkę
i wypychała całą tabelę poza szerokość panelu. */
.assistant-answer code {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Nic w odpowiedzi nie ma prawa być szersze niż panel: przewijanie w bok gubi początek wiersza,
a przy tabeli z liczbami gubi to, czego liczba dotyczy. */
.assistant-answer {
overflow-wrap: anywhere;
}
.assistant-answer pre {
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
}
/* Blok kodu bierze kolor z otoczenia: w środku bloku wyróżnienie pojedynczego słowa nic nie znaczy. */
.assistant-answer pre code {
color: inherit;
}
/* Tabela wyjątków czyta się wzrokiem w dół po kilkunastu wierszach naraz — naprzemienne tło jest tu
funkcją, nie ozdobą: bez niego oko gubi wiersz przy przejściu do kolumny z liczbą. */
.assistant-answer tbody tr:nth-child(even) {
background: var(--app-bg-soft);
}
/* Rodzaj i sygnatura to etykiety, nie treść — mają porządkować wzrok, a nie zabierać uwagę frazie,
o którą pytano. Dlatego stonowane; akcent zostaje przy tym, co odstaje. */
.assistant-answer td:first-child code,
.assistant-answer td:nth-child(2) code {
color: var(--app-text-muted);
background: var(--app-surface);
font-family: var(--app-ui-font);
}
/* Długi przebieg to ciąg kilku zdarzeń. Bez własnego bloku i odstępu kolejne etapy zlewały się
w akapit, w którym nie widać, gdzie kończy się jedno zdarzenie, a zaczyna następne. */
.assistant-answer td code {
display: inline-block;
margin: 0.08rem 0;
line-height: 1.35;
}
/* Krotność stoi obok frazy, nie w niej — i ma być widoczna bez wypatrywania. */
.assistant-answer td strong {
color: var(--app-warning);
white-space: nowrap;
}
/* Ostatnia kolumna zawija się jak każda inna. Stało tu `white-space: nowrap` — pod liczbę
przypadków, która BYŁA ostatnia. Gdy składacz dołożył za nią „Od czego zależy", zakaz łamania
trafił w całe zdanie i tabela wyjechała poza panel; niełamana jest teraz kolumna rozpoznana po
treści, a nie ta, która akurat stoi na końcu. */
.assistant-answer td:last-child {
overflow-wrap: anywhere;
word-break: break-word;
}
.assistant-warning {
margin: 0;
padding: 0.35rem 0.5rem;
border-left: 3px solid var(--app-warning);
background: rgba(240, 182, 76, 0.1);
color: var(--app-text);
font-size: 0.78rem;
}
.assistant-examples {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.assistant-examples-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--app-text-muted);
}
/* Kafelek, nie linijka: klikalna jest cała karta, a treść ma pokazać przypadek, nie identyfikator. */
.assistant-example {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.45rem 0.55rem;
border: 1px solid var(--app-border);
border-left: 3px solid var(--app-border-strong);
border-radius: 0.35rem;
background: var(--app-bg);
color: var(--app-text-muted);
font-size: 0.76rem;
text-decoration: none;
}
.assistant-example:hover {
border-color: var(--app-accent);
border-left-color: var(--app-accent);
color: var(--app-text);
}
.assistant-example-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
}
.assistant-example-vehicle {
color: var(--app-text);
font-weight: 600;
}
.assistant-example-when {
flex: none;
color: var(--app-text-muted);
font-size: 0.7rem;
font-variant-numeric: tabular-nums;
}
.assistant-example-sub {
color: var(--app-text-muted);
font-size: 0.72rem;
}
.assistant-example-dot {
padding: 0 0.25rem;
opacity: 0.6;
}
.assistant-example-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.assistant-example-tag {
padding: 0.05rem 0.35rem;
border: 1px solid var(--app-border);
border-radius: 999px;
font-size: 0.68rem;
white-space: nowrap;
}
/* Treść może być długa i to jest jej zaleta — skracamy do dwóch linii, resztę pokazuje wyszukiwarka. */
.assistant-example-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--app-font-mono, ui-monospace, monospace);
font-size: 0.7rem;
line-height: 1.35;
opacity: 0.85;
}
/* Wartość w treści odpowiedzi, którą da się otworzyć — podkreślenie kropkowane, żeby tabela nie
zamieniła się w ścianę linków. */
.assistant-inline-link {
color: inherit;
text-decoration: underline dotted;
text-underline-offset: 0.15em;
}
.assistant-inline-link:hover {
color: var(--app-accent);
text-decoration: underline solid;
}
/* Zbiór tury — podpis nad przyciskami do wyszukiwarki, a nie osobny pasek nad odpowiedzią. Nad wątkiem
wisi już taca z materiałem wciągniętym do rozmowy; dwa podobne paski o podobnych podpisach czytały się
jak powtórzenie, choć mówią co innego (tam: na czym pracować, tu: na czym policzyłem). */
.assistant-set-body {
color: var(--app-text);
text-transform: none;
letter-spacing: normal;
}
.assistant-set-total {
color: var(--app-accent);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.assistant-results {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
/* Interpretacja jest wnioskiem, nie pomiarem — stoi pod liczbami, wyraźnie oddzielona lewą krawędzią. */
.assistant-interpretation {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin: 0.5rem 0 0.2rem;
padding-left: 0.6rem;
border-left: 2px solid var(--app-accent);
}
.assistant-results-row {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.assistant-action-primary {
border-color: var(--app-accent);
color: var(--app-accent);
font-weight: 600;
}
.assistant-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.assistant-action {
padding: 0.25rem 0.5rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.35rem;
background: var(--app-surface);
color: var(--app-text);
font-size: 0.76rem;
text-decoration: none;
cursor: pointer;
}
.assistant-action:hover {
border-color: var(--app-accent);
color: var(--app-accent);
}
.assistant-action-quiet {
border-color: transparent;
background: transparent;
color: var(--app-text-muted);
}
.assistant-rating {
margin-left: auto;
display: flex;
gap: 0.2rem;
}
.assistant-thumb {
padding: 0.15rem 0.35rem;
border: 1px solid transparent;
border-radius: 0.35rem;
background: transparent;
cursor: pointer;
filter: grayscale(1);
opacity: 0.65;
}
.assistant-thumb:hover,
.assistant-thumb.is-picked {
filter: none;
opacity: 1;
border-color: var(--app-border-strong);
}
.assistant-rating-form {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.assistant-rating-actions {
display: flex;
gap: 0.35rem;
}
.assistant-facts {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.assistant-count-cards {
display: grid;
gap: 0.45rem;
margin-top: 0.55rem;
}
.assistant-rule-checks {
display: grid;
gap: .75rem;
margin: .75rem 0;
}
.assistant-rule-check-card {
border: 1px solid var(--bs-border-color);
border-radius: .65rem;
padding: .85rem 1rem;
background: var(--bs-tertiary-bg);
}
.assistant-rule-check-card header {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: start;
}
.assistant-rule-check-card h4 {
font-size: .95rem;
margin: .15rem 0 .35rem;
}
.assistant-rule-check-name,
.assistant-rule-check-freshness {
color: var(--bs-secondary-color);
font-size: .78rem;
}
.assistant-rule-check-status {
font-size: .8rem;
white-space: nowrap;
}
.assistant-rule-check-card dl {
display: grid;
gap: .4rem;
margin: .65rem 0;
}
.assistant-rule-check-card dl > div {
display: grid;
grid-template-columns: minmax(9rem, 1fr) 2fr;
gap: .75rem;
}
.assistant-rule-check-card dt {
color: var(--bs-secondary-color);
font-weight: 600;
}
.assistant-rule-check-card dd {
margin: 0;
}
.assistant-rule-check-card dd a {
margin-left: .5rem;
}
.assistant-rule-check-conclusion,
.assistant-rule-check-context,
.assistant-rule-check-freshness {
margin: .45rem 0 0;
}
.assistant-fact-tables {
display: grid;
gap: 0.55rem;
margin-top: 0.55rem;
}
.assistant-fact-table {
border: 1px solid var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-surface);
overflow: hidden;
}
.assistant-fact-table h4 {
margin: 0;
padding: 0.55rem 0.65rem;
font-size: 0.82rem;
}
/* Scroller zostaje jako ostatnia deska ratunku dla naprawdę szerokiego pomiaru, ale przestaje być
jedyną: tabela zawija się tak samo jak tabela w odpowiedzi. Przy rozkładzie po programach
w komórkach stoją ścieżki bez ani jednej spacji na kilkadziesiąt znaków — `nowrap` robił z karty
pasek do przewijania w bok, na którym gubi się to, czego liczba dotyczy. */
.assistant-fact-table-scroll {
overflow-x: auto;
}
.assistant-fact-table table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.76rem;
}
.assistant-fact-table th,
.assistant-fact-table td {
padding: 0.4rem 0.5rem;
border-top: 1px solid var(--app-border);
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Tabela pomiarów stoi NAD prozą i jest odpowiedzią na pytanie; proza pod nią jest opisem.
Te same zasady co w tabeli odpowiedzi: stała szerokość kolumn i zawijanie, bo w komórce
„Czym" stoją kryteria, które bywają długie na dwa zdania. */
.assistant-measurements {
margin: 0 0 0.6rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-surface);
overflow: hidden;
}
/* A22: zwinięta domyślnie — jedna cienka linia, bez ramki tabeli pod spodem. */
.assistant-measurements.is-collapsed {
background: transparent;
border-color: transparent;
}
.assistant-measurements-toggle {
display: block;
width: 100%;
padding: 0.3rem 0.5rem;
border: 0;
background: none;
color: var(--app-text-muted);
font-size: 0.74rem;
text-align: left;
cursor: pointer;
}
.assistant-measurements.is-expanded .assistant-measurements-toggle {
border-bottom: 1px solid var(--app-border);
font-weight: 600;
}
.assistant-measurements table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.78rem;
}
.assistant-measurements th,
.assistant-measurements td {
padding: 0.35rem 0.5rem;
border-top: 1px solid var(--app-border);
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
.assistant-measurements thead th {
border-top: 0;
color: var(--app-text-muted);
font-weight: 600;
}
/* Wynik czyta się jako kolumnę liczb — wąsko, bez łamania i cyframi równej szerokości. */
.assistant-measurements th.assistant-cell-count,
.assistant-measurements td.assistant-cell-count {
width: 6rem;
white-space: nowrap;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* To, co wspólne wszystkim wierszom, stoi nad tabelą raz — jako podpis, a nie jako kolumna
powtarzająca dziesięć razy to samo zdanie. */
.assistant-fact-table-shared {
display: grid;
gap: 0.2rem;
margin: 0;
padding: 0 0.65rem 0.5rem;
font-size: 0.76rem;
}
.assistant-fact-table-shared > div {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.assistant-fact-table-shared dt {
margin: 0;
font-weight: 600;
color: var(--app-text-muted);
}
.assistant-fact-table-shared dt::after {
content: ":";
}
.assistant-fact-table-shared dd {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.assistant-count-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.15rem 0.45rem;
padding: 0.55rem 0.65rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-surface);
color: inherit;
text-decoration: none;
}
.assistant-count-card:hover {
border-color: var(--app-accent);
}
.assistant-count-card-label,
.assistant-count-card-proof {
grid-column: 1 / -1;
font-size: 0.75rem;
color: var(--app-text-muted);
}
.assistant-count-card-value {
font-size: 1.2rem;
line-height: 1;
}
.assistant-count-card-unit,
.assistant-count-card-meta {
align-self: end;
font-size: 0.82rem;
}
.assistant-fact {
border: 1px solid var(--app-border);
border-radius: 0.4rem;
background: var(--app-bg);
overflow: hidden;
}
.assistant-fact.is-failed {
border-color: rgba(240, 111, 127, 0.55);
}
.assistant-fact-head {
display: flex;
gap: 0.4rem;
padding: 0.3rem 0.45rem;
background: var(--app-surface);
font-size: 0.74rem;
}
.assistant-fact-skill {
font-weight: 600;
}
.assistant-fact-purpose {
color: var(--app-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.assistant-fact-body {
margin: 0;
padding: 0.4rem 0.45rem;
font-size: 0.74rem;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
color: var(--app-text-muted);
}
/* Argumenty kroku (A22): ten sam wygląd co treść wyniku, cieńsze, bo to mniej istotne od faktu. */
.assistant-fact-arguments {
margin: 0;
padding: 0.3rem 0.45rem 0;
font-size: 0.7rem;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
color: var(--app-text-muted);
opacity: 0.85;
}
.assistant-fact-numbers {
margin: 0;
padding: 0 0.45rem 0.4rem;
font-size: 0.72rem;
color: var(--app-text-muted);
}
/* A22, drugi wymóg autora: warstwa procesu ("Jak to policzono") — zwinięta domyślnie, tak jak karta
pomiarów. Jedna sekcja na odpowiedź, jednakowa dla każdego silnika. */
.assistant-process {
margin: 0.5rem 0 0;
border: 1px solid var(--app-border);
border-radius: 0.45rem;
background: var(--app-surface);
overflow: hidden;
}
.assistant-process.is-collapsed {
background: transparent;
border-color: transparent;
}
.assistant-process-toggle {
display: block;
width: 100%;
padding: 0.3rem 0.5rem;
border: 0;
background: none;
color: var(--app-text-muted);
font-size: 0.74rem;
text-align: left;
cursor: pointer;
}
.assistant-process.is-expanded .assistant-process-toggle {
border-bottom: 1px solid var(--app-border);
font-weight: 600;
}
.assistant-process-body {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.5rem;
}
.assistant-busy {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: var(--app-text-muted);
}
.assistant-busy-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--app-accent);
animation: assistant-pulse 1.1s ease-in-out infinite;
}
@keyframes assistant-pulse {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
.assistant-empty {
margin: 0;
padding: 0.6rem 0.75rem;
font-size: 0.8rem;
color: var(--app-text-muted);
}
.assistant-composer {
display: flex;
gap: 0.4rem;
padding: 0.6rem 0.75rem;
border-top: 1px solid var(--app-border);
background: var(--app-surface);
}
.assistant-input {
flex: 1;
resize: vertical;
padding: 0.4rem 0.5rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.4rem;
background: var(--app-bg);
color: var(--app-text);
font-family: inherit;
font-size: 0.85rem;
}
.assistant-input:focus {
outline: none;
border-color: var(--app-accent);
}
.assistant-send {
align-self: flex-end;
padding: 0.4rem 0.8rem;
border: 1px solid var(--app-accent);
border-radius: 0.4rem;
background: var(--app-accent);
color: #06131c;
font-weight: 600;
font-size: 0.82rem;
cursor: pointer;
}
.assistant-send:disabled {
opacity: 0.45;
cursor: default;
}
@media (max-width: 900px) {
body:has(.assistant-dock-open) .main-content {
padding-right: 0;
}
.assistant-panel {
width: 100vw;
}
}
/* ── Logi wciągnięte do rozmowy z asystentem ────────────────────────────────────────────────── */
/* „Omów” (S5, A72) to wspólne klasy systemu: `act-btn act-chat is-sm` — neutralny jasny z ikoną dymka. Klasy `query-talk-*`
zostały uchwytami dla testów i układu. Jedyne, co tu stoi, to stan: po kliknięciu log/wyniki są w rozmowie (`is-loaded`)
i przycisk bierze barwę trybu (tryb = stan, nie rodzaj czynności). */
.query-talk-btn.is-loaded {
border-color: var(--mode-accent-border, var(--app-accent));
background: var(--mode-accent-soft, color-mix(in srgb, var(--app-accent) 16%, var(--app-bg-soft)));
color: var(--app-text);
}
/* Pod kursorem „w rozmowie” zostaje widoczne: `.act-btn:hover:not(...)` ma wagę 0,3,0 i inaczej zgasiłoby wypełnienie. */
.query-talk-btn.is-loaded:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
border-color: var(--mode-accent, var(--app-accent));
background: var(--mode-accent-soft-strong, color-mix(in srgb, var(--app-accent) 26%, var(--app-bg-soft)));
color: var(--act-light);
}
/* Mignięcie po „pokaż ten log" — bez niego przewinięcie zostawia człowieka bez punktu zaczepienia. */
.query-results-row-revealed > td {
background: rgba(88, 199, 223, 0.26) !important;
transition: background 900ms ease;
}
.assistant-tray {
padding: 0.5rem 0.7rem;
border-bottom: 1px solid var(--app-border);
background: rgba(88, 199, 223, 0.05);
}
.assistant-tray-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.assistant-tray-title {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8acfeb;
}
.assistant-tray-clear {
appearance: none;
border: 0;
background: transparent;
color: var(--app-text-muted);
font: inherit;
font-size: 0.73rem;
cursor: pointer;
}
.assistant-tray-clear:hover {
color: var(--app-text);
}
/* Dziesięć logów to przypadek skrajny, ale realny — taca dostaje własny scroll, żeby nie zjadła rozmowy. */
.assistant-tray-chips {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
max-height: 9.5rem;
overflow-y: auto;
}
.assistant-chip {
display: inline-flex;
align-items: stretch;
border: 1px solid rgba(109, 214, 234, 0.4);
border-radius: 8px;
background: rgba(15, 28, 41, 0.85);
overflow: hidden;
}
.assistant-chip-open {
appearance: none;
display: grid;
gap: 0.05rem;
padding: 0.25rem 0.45rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.assistant-chip-open:hover {
background: rgba(88, 199, 223, 0.12);
}
.assistant-chip-open:focus-visible {
outline: 2px solid var(--app-accent);
outline-offset: -2px;
}
.assistant-chip-command {
font-size: 0.75rem;
font-weight: 600;
color: #d6ecf8;
line-height: 1.2;
}
.assistant-chip-meta {
font-size: 0.68rem;
color: var(--app-text-muted);
line-height: 1.2;
}
.assistant-chip-remove {
appearance: none;
padding: 0 0.4rem;
border: 0;
border-left: 1px solid rgba(109, 214, 234, 0.25);
background: transparent;
color: var(--app-text-muted);
font-size: 0.85rem;
cursor: pointer;
}
.assistant-chip-remove:hover {
color: var(--app-warning);
background: rgba(240, 182, 76, 0.1);
}
/* Chip logu spoza bieżących wyników — przerywana ramka mówi to samo, co dopisek w treści. */
.assistant-chip-open.is-offscreen {
border-left: 2px dashed rgba(240, 182, 76, 0.55);
}
/* Ślad po kliknięciu chipa: co się właśnie stało i jak to cofnąć. Stoi nad oknem wysyłki, poza
blokiem tacy — chip w historii wypowiedzi działa niezależnie od tego, czy w tacy coś leży. */
.assistant-chip-note {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin: 0 0.75rem 0.5rem;
padding: 0.4rem 0.55rem;
border-left: 3px solid var(--mode-accent, var(--app-accent));
border-radius: 0 7px 7px 0;
background: var(--app-surface);
color: var(--app-text-muted);
font-size: 0.76rem;
}
.assistant-chip-note span {
flex: 1;
}
.assistant-chip-note-close {
appearance: none;
padding: 0;
border: none;
background: transparent;
color: var(--app-text-muted);
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
}
.assistant-chip-note-close:hover {
color: var(--app-text);
}
/* Materiał przypięty do wypowiedzi. Wygląda jak taca, bo to ta sama rzecz — z tą różnicą, że stoi
pod pytaniem, którego dotyczy, i nie ma krzyżyka: wypowiedź jest zapisem, nie edytowalnym stanem. */
.assistant-message-attachments {
align-self: flex-end;
max-width: 88%;
margin-top: 0.3rem;
}
.assistant-message-attachments-title {
display: block;
margin-bottom: 0.2rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--app-text-muted);
}
.assistant-message-attachments .assistant-tray-chips {
justify-content: flex-end;
max-height: none;
overflow: visible;
}
/* Chip zapytania — inny kolor od chipów logów, bo to inna rzecz: warunki, nie treść. */
.assistant-chip-query {
border-color: rgba(71, 209, 140, 0.45);
}
.assistant-chip-query .assistant-chip-command {
color: #b7ecd1;
}
.assistant-tray-cost {
color: var(--app-warning);
font-size: 0.7rem;
}
/* Plan i przegląd odpowiedzi (TOM-140): warstwa procesu w „Jak to policzono”, ciszej niż karty pomiarów —
to zapis tego, jak asystent rozumiał pytanie i jak ocenił swoją odpowiedź, a nie wynik. */
.assistant-plan-review {
display: flex;
flex-direction: column;
gap: 0.45rem;
margin: 0.2rem 0 0.55rem;
font-size: 0.78rem;
}
.assistant-plan-review-block {
padding: 0.35rem 0.5rem;
border: 1px dashed var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-bg-soft);
overflow-wrap: anywhere;
}
.assistant-plan-review-block ul {
margin: 0.1rem 0 0.25rem;
padding-left: 1.1rem;
}
.assistant-plan-review-question,
.assistant-plan-review-verdict {
margin: 0.15rem 0;
font-weight: 600;
}
.assistant-plan-review-label,
.assistant-plan-review-reason {
margin: 0.15rem 0;
color: var(--app-text-muted);
}
.assistant-plan-review-mark {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--app-text-muted);
}
.assistant-plan-review-block li.is-missing .assistant-plan-review-mark {
font-weight: 700;
}
.assistant-plan-review-measure {
margin: 0.15rem 0;
}
.assistant-plan-review-remarks li {
color: var(--app-text-muted);
}
/* Podpowiedzi fraz (K12): pozycje słownika korpusu, o które pytał asystent. Wyglądają jak tabela
pomiarów, ale ciszej — obramowanie przerywane i liczba wyciszona, bo to orientacja z dnia budowy
słownika, a nie wynik. Klikalny jest zapis: otwiera wyszukiwanie z jego kryterium. */
.assistant-phrase-suggestions {
margin: 0.55rem 0 0.2rem;
border: 1px dashed var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-bg-soft);
overflow: hidden;
}
.assistant-phrase-suggestions-title,
.assistant-phrase-suggestions-note {
margin: 0;
padding: 0.35rem 0.5rem;
font-size: 0.74rem;
color: var(--app-text-muted);
overflow-wrap: anywhere;
}
.assistant-phrase-suggestions-title {
font-weight: 600;
}
.assistant-phrase-suggestions table {
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 0.78rem;
}
.assistant-phrase-suggestions th,
.assistant-phrase-suggestions td {
padding: 0.3rem 0.5rem;
border-top: 1px solid var(--app-border);
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
.assistant-phrase-suggestions thead th {
color: var(--app-text-muted);
font-weight: 600;
}
.assistant-phrase-suggestions th.assistant-cell-count,
.assistant-phrase-suggestions td.assistant-cell-count {
width: 7.5rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.assistant-phrase-suggestions td.assistant-phrase-count {
white-space: nowrap;
color: var(--app-text-muted);
}
.assistant-phrase-kind,
.assistant-phrase-label {
display: block;
font-size: 0.7rem;
color: var(--app-text-dim);
}
.assistant-phrase-link {
color: var(--app-accent);
text-decoration: none;
}
.assistant-phrase-link:hover,
.assistant-phrase-link:focus-visible {
text-decoration: underline;
}
.query-talk-results {
margin-left: 0.6rem;
}
/* „Omów zawężone (N)” z menu obok (A41): jedna pigułka przecięta na dwie części — główna omawia to, co widać,
strzałka otwiera „Omów wszystkie wyniki zapytania”. Zablokowana część zostaje w kolejności tabulacji, żeby dało się
dojść do powodu blokady; powód stoi obok, nie tylko w podpowiedzi. */
.query-talk-group {
position: relative;
display: inline-flex;
margin-left: 0.6rem;
}
.query-talk-group .query-talk-narrowed {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.query-talk-group .query-talk-caret {
margin-left: -1px;
padding: 0 0.5rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Obie połówki podnoszą się razem albo wcale: jedna uniesiona o 1 px rozrywałaby pigułkę. */
.query-talk-group .query-talk-btn:hover:not(:disabled, [aria-disabled="true"]) {
transform: none;
}
.query-talk-menu {
position: absolute;
bottom: calc(100% + 0.35rem);
left: 0;
z-index: 20;
display: flex;
flex-direction: column;
min-width: 16rem;
padding: 0.3rem;
border: 1px solid var(--app-border-strong);
border-radius: var(--ui-radius);
background: var(--app-surface);
}
.query-talk-item {
appearance: none;
display: flex;
flex-direction: column;
gap: 0.1rem;
width: 100%;
padding: 0.4rem 0.55rem;
border: 0;
border-radius: var(--ui-radius);
background: transparent;
color: var(--app-text);
font-size: var(--ui-fs-label);
text-align: left;
cursor: pointer;
}
.query-talk-item small {
color: var(--app-text-dim);
font-size: var(--ui-fs-note);
}
.query-talk-item:hover,
.query-talk-item:focus-visible {
background: var(--mode-accent-soft);
outline: none;
}
/* A42: „Omów oba” przy zablokowanym zawężeniu — w menu, ale bez działania; powód stoi przy przycisku. */
.query-talk-item[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
/* Powód, dla którego „Omów zawężone” jest zablokowane: stonowana ikona (i) obok przycisku — zdanie w `title`, a dla czytnika ekranu
w ukrytym tekście (cel `aria-describedby`). Nie jest błędem, więc nie ma barwy błędu. */
.query-talk-why {
display: inline-flex;
align-items: center;
margin-left: 0.35rem;
color: var(--app-text-dim);
cursor: help;
}
.query-talk-why:hover {
color: var(--app-text-muted);
}
.query-talk-why-icon {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 1rem;
height: 1rem;
border: 1px solid currentColor;
border-radius: var(--ui-radius-pill);
font-size: var(--ui-fs-eyebrow);
font-style: italic;
font-weight: 700;
line-height: 1;
}
.query-talk-why-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Krotność w filtrze treści („ile razy ma wystąpić").
Stan zwinięty pokazuje WYSZARZONY podgląd, a nie samą etykietę: widać granice, więc wiadomo, o co
chodzi, zanim się kliknie. Sama nazwa „ile razy" tego nie mówi, a ukrycie wszystkiego za
przełącznikiem sprawia, że funkcji nikt nie znajduje. */
.occurrence-count {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin-top: 0.3rem;
font-size: 0.78rem;
color: #ddebf8;
}
/* Kontrolki krotności o rozmiar niżej, tak jak reszta panelu — dzięki temu „ile razy ma wystąpić"
i „pod rząd" mieszczą się w JEDNYM wierszu zamiast łamać się na dwa. Zawijanie zostaje na wypadek
naprawdę wąskiej kolumny: lepiej złamane niż ucięte. */
.occurrence-count .form-select,
.occurrence-count .form-control {
min-height: 0;
height: auto;
padding-top: 0.14rem;
padding-bottom: 0.14rem;
font-size: 0.78rem;
line-height: 1.4;
border-radius: 7px;
}
.occurrence-count-off {
opacity: 0.55;
}
.occurrence-count-toggle,
.occurrence-count-run {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin: 0;
cursor: pointer;
}
/* Para pól granic — ta sama geometria, co przy odstępie w panelu budowania zapytań. Klasy są
WŁASNE, nie pożyczone: ta kontrolka stoi też poza panelem budowania zapytań i nie ma powodu wiązać
jej z arkuszem panelu — wiązanie znaczyłoby, że zmiana w panelu zmienia wygląd czegoś, czego panel
nie pokazuje. */
.occurrence-count-num {
width: 3.6rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
.occurrence-count-dash {
color: #9dbdd8;
}
.occurrence-count-unit {
color: #9dbdd8;
}
/* Zdanie o granicach na opak — cały wiersz dla siebie, bo inaczej rozpycha kontrolki obok.
Ta sama waga i barwa, co przy odstępie (`.qp-link-error`): to jest ta sama klasa odmowy. */
.occurrence-count-error {
flex: 1 1 100%;
margin: 0;
color: var(--app-warning);
font-size: 0.73rem;
}
/* Podpowiedź o kolejności pod listą filtrów.
Mieści się w jednej linii, a pionowa kreska w kolorze akcentu daje jej tyle wagi, żeby oko ją
złapało, i ani grama więcej. Zdanie mówi, co jest teraz, a nie co masz zrobić. */
.query-order-hint {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0 0.35rem 0.7rem;
border-left: 3px solid #4c9be8;
color: #b8cfe4;
font-size: 0.92rem;
}
.query-order-hint-action {
border: none;
background: transparent;
color: #7db8f0;
padding: 0;
text-decoration: underline;
cursor: pointer;
font-size: inherit;
}
.query-order-hint-action:hover {
color: #a8d2f7;
}
/* Wartości odczytane z treści logów (A117): pokrycie przy odpowiedzi i karta w „Jak to policzono”.
Kolory tylko z tokenów motywu, żeby oba motywy czytały się tak samo. */
.assistant-read-summary {
margin: 0.4rem 0;
padding: 0.35rem 0.55rem;
border-left: 3px solid var(--app-border-strong);
font-size: 0.78rem;
color: var(--app-text-muted);
}
.assistant-read-summary.is-partial {
border-left-color: var(--app-warning);
}
.assistant-read-summary p,
.assistant-read-card p {
margin: 0.15rem 0;
}
.assistant-read-summary.is-partial .assistant-read-summary-scan,
.assistant-read-scan.is-partial {
font-weight: 600;
color: var(--app-text);
}
.assistant-read-summary code,
.assistant-read-card code {
font-size: 0.74rem;
overflow-wrap: anywhere;
word-break: break-word;
}
.assistant-read-summary-label {
display: inline-block;
min-width: 1.1rem;
padding: 0 0.25rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.25rem;
font-weight: 600;
text-align: center;
}
.assistant-read-cards {
display: grid;
gap: 0.5rem;
margin: 0.4rem 0;
}
.assistant-read-card {
padding: 0.55rem 0.65rem;
border: 1px solid var(--app-border-strong);
border-radius: 0.45rem;
background: var(--app-surface);
font-size: 0.78rem;
}
.assistant-read-card h4 {
margin: 0 0 0.3rem;
font-size: 0.82rem;
}
.assistant-read-note,
.assistant-read-hint {
color: var(--app-text-muted);
}
.assistant-read-scroll {
overflow-x: auto;
margin: 0.4rem 0 0.2rem;
}
.assistant-read-scroll table {
width: 100%;
border-collapse: collapse;
}
.assistant-read-scroll th,
.assistant-read-scroll td {
padding: 0.3rem 0.45rem;
border-top: 1px solid var(--app-border);
text-align: left;
vertical-align: top;
}
.assistant-read-scroll td.assistant-cell-count {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.assistant-read-scroll caption {
caption-side: top;
padding: 0 0 0.2rem;
text-align: left;
color: var(--app-text-muted);
}
/* Wiersze odczytu, które cytuje odpowiedź — tabela przy odpowiedzi, pod zdaniem o odczycie. */
.assistant-read-used {
margin: 0 0 0.4rem;
font-size: 0.78rem;
}
.assistant-read-misses ul {
margin: 0.2rem 0 0;
padding-left: 1rem;
}
.assistant-measurements-kind {
display: block;
font-weight: 400;
font-size: 0.72rem;
color: var(--app-text-muted);
}