/*
 * Wygląd renderera widoków (render.js) — klasy makiety v4.3.2 (wspolne/v4.css, wspolne/ekrany.css), zawężone do .view.
 * Wyłącznie tokeny z /design-system/tokens.css; kolory z modelu przychodzą jako zmienne --v-text, --v-icon,
 * --v-background, --v-border, --v-bar (var(--token)) oraz --ctx-color i --sdot-color. Komponenty card, badge, alert,
 * connection, btn i mono daje /design-system/components.css.
 */

/* ------------------------------------------------------------ układ ogólny */

.view .stack { display: flex; flex-direction: column; gap: var(--density-gap); min-width: 0; }
.view .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.view .team-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.view .team-title .mono { font-size: var(--font-size-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.view .colhead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--font-size-sm); }

/* Element: kolor tekstu, ikony, tła i obramowania z modelu (reguły, valueLabels, progi). */
.view .vel { color: var(--v-text, inherit); min-width: 0; }
.view .vel .icon { color: var(--v-icon, currentColor); }
.view .vel[data-token-background] { background: var(--v-background); }
.view .vel[data-token-border] { box-shadow: inset 0 0 0 var(--border-width) var(--v-border); border-radius: var(--radius-sm); }
.view .vel__value { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.view .vel__text--error { color: var(--color-feedback-error-fg); }
.view .vel__summary { font-size: var(--font-size-sm); }
.view .vel__list { display: grid; gap: var(--space-2); min-width: 0; }
.view .vel__groups { display: grid; gap: var(--space-2); }
.view .vel__group { display: grid; gap: var(--space-1); }
.view .vlabel { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.view [data-highlight] { outline: var(--border-width-strong) solid var(--v-border, var(--color-accent)); outline-offset: var(--border-width); }
.view [data-action~="openDetails"],
.view [data-action~="navigate"],
.view [data-action~="filter"],
.view [data-action~="mute"] { cursor: pointer; }

/* Znacznik „po 1.79” (QM_102 A). */
.view .later {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) dashed var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------ kropka stanu i pasek */

.view .sdot {
    --sdot-color: var(--color-neutral-fg);
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background: var(--sdot-color);
}
/* Kształt kropki jak w makiecie v4.3.2 (wspolne/v4.css:33–36): obwódka — pusty środek, kolor w krawędzi; pierścień „w tle” —
   odsunięty od kropki kolorem tła powierzchni. Klasy kształtu stawia renderer (dotClass); legendę strony (kolumny.html,
   kolory w pages.css) dopasowują selektory po klasach stanu. */
.view .sdot--outline,
.legend .sdot.sdot--error-retry,
.legend .sdot.sdot--new,
.legend .sdot.sdot--paused-question { background: transparent; box-shadow: inset 0 0 0 var(--border-width-strong) var(--sdot-color); }
.view .sdot--ring,
.legend .sdot.sdot--active-bg,
.legend .sdot.sdot--idle-bg,
.legend .sdot.sdot--bg { box-shadow: 0 0 0 var(--border-width-strong) var(--color-bg-surface), 0 0 0 calc(var(--border-width-strong) * 2) var(--sdot-color); margin: var(--space-1); }
.view .sstate { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.view .ctxbar { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--font-size-sm); }
.view .ctxbar__track {
    position: relative;
    flex: 1;
    min-width: 3rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-neutral-bg);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-border-subtle);
    overflow: hidden;
}
.view .ctxbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--ctx-color, var(--color-text-secondary)); }
.view .ctxbar__val { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--ctx-color, var(--color-text-primary)); white-space: nowrap; }
.view .ctx--0 { --ctx-color: var(--color-text-secondary); }

/* ------------------------------------------------------------ kolumna: wiersz sesji */

.view .srows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.view .srow {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border-width) solid var(--v-border, var(--color-border-subtle));
    border-radius: var(--radius-md);
    background: var(--v-background, var(--color-bg-surface));
    min-width: 0;
    font-size: var(--font-size-sm);
}
.view .srow[aria-current="true"] { border-color: var(--color-accent); box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent); }
.view .srow[data-alert-tone="error"] { box-shadow: inset var(--border-width-strong) 0 0 var(--color-feedback-error-fg); }
.view .srow[data-alert-tone="warning"] { box-shadow: inset var(--border-width-strong) 0 0 var(--color-feedback-warning-fg); }
.view .srow__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-2); min-width: 0; }
.view .srow__name { font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-text-link); overflow-wrap: anywhere; }
.view .srow__name a { color: inherit; }
.view .srow__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-secondary); min-width: 0; }
.view .srow__now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view .srow .icon { width: 1rem; height: 1rem; flex: none; }
.view .srow__dead,
.view .srow__alerts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }

/* ------------------------------------------------------------ szczegóły sesji */

.view .detail .card__header { flex-wrap: wrap; }
.view .detail__sec { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border-subtle); }
.view .detail__sec:first-child { padding-top: 0; border-top: 0; }
.view .detail__sec h3 { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); }
.view .kv { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-sm); }
.view .kv dt { color: var(--color-text-secondary); }
.view .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.view .timeline,
.view .msgs { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .timeline > li,
.view .msgs > li { display: grid; gap: var(--space-1); min-width: 0; }
.view .msgs__meta { color: var(--color-text-secondary); }
.view .msgs__text { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-sunken); overflow-wrap: anywhere; }
.view .limits { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .limits > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }

/* ------------------------------------------------------------ karta zespołu */

.view .team9 { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: poz; }
.view .team9 > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-top: var(--border-width) solid var(--color-border-subtle); counter-increment: poz; min-width: 0; }
.view .team9 > li:first-child { border-top: 0; padding-top: 0; }
.view .team9 > li::before { content: counter(poz); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-neutral-bg); color: var(--color-neutral-fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.view .team9__body { display: grid; gap: var(--space-2); min-width: 0; }
.view .team9__title { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
.view .team9__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

.view .counts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.view .counts > li { display: inline-flex; align-items: center; gap: var(--space-2); }
.view .vel__later { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.view [data-align="center"] { text-align: center; }
.view [data-align="end"] { text-align: end; }

/* ------------------------------------------------------------ alerty i dźwięk */

.view .pas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.view .sound { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.125rem var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid currentColor; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.view .sound .icon { width: 0.875rem; height: 0.875rem; }
.view .sound--on { color: var(--color-feedback-error-fg); }
.view .sound--off { color: var(--color-text-secondary); border-style: dashed; }
.view .sound--blocked { color: var(--color-feedback-warning-fg); border-style: dashed; }

/* Wiersz listy alertów (zad. 024, zgłoszenie front-2 z 036): treść i przyciski zawijają się jak pas w makiecie (v4.css:152–153) —
   bez tego na 390 px przycisk „Wycisz…” zabierał szerokość, a treść łamała się po jednej literze. */
.view--alerts > .alert { flex-wrap: wrap; align-items: center; }
.view--alerts > .alert > .alert__body { min-width: min(100%, 14rem); }

/* Tytuł „sesja: reguła” w kolorze poziomu alertu, jak w makiecie v4.3.2 (alerty/index.html stan a4: tekst w .alert__title,
   kolor --alert-fg z DS). Element tytułu bywa odnośnikiem (interakcja szablonu) i bez tej reguły brał kolor linku z DS (`a`). */
.view--alerts .alert__title a { color: inherit; text-decoration: none; }