/* NeuroScreen — portal (panel użytkownika).

   Ten sam język wizualny co strona publiczna (szablon TemplateMo 581 przerobiony
   na naszą paletę — patrz css/neuroscreen.css): krój Metropolis, karty
   o promieniu 20 px, przyciski-pigułki, granat --secondary jako kolor nagłówków
   i pasów. Bootstrapa tu NIE ma — portal ma własne siatki (statgrid/catgrid/
   twocol) na kilkudziesięciu podstronach i wciąganie resetu Bootstrapa pod nie
   to proszenie się o regresje. Wygląd jest wspólny, mechanika osobna.

   Dwa motywy (plan 31.6): NOC (domyślna, tokeny --n-*) i DZIEŃ (tokeny jasne
   landingu). Reguły niżej używają WYŁĄCZNIE zmiennych --p-*, które tu mapują
   się na tokeny z `templates/ui/_a11y.css.html` — żadnych nowych #rrggbb.
   Przełącznik w menu bocznym ustawia data-theme na <html>.

   UWAGA na kolejność w <head>: ten arkusz musi iść PO wstawce
   `ui/_a11y.css.html`, bo nadpisuje jej pola formularzy (tam tło jest na sztywno
   białe — w motywie nocnym byłoby to białe pudło na granacie). */

:root {
  --p-bg: var(--n-bg); --p-card: var(--n-card); --p-ink: var(--n-ink);
  --p-dim: var(--n-dim); --p-line: var(--n-line); --p-field: var(--n-field);
  --p-acc: var(--n-acc); --p-acc2: var(--n-acc2); --p-focus: var(--n-focus);
  --p-ok: var(--n-ok); --p-warn: var(--n-warn); --p-err: var(--n-err);
  --p-btn-bg: var(--n-acc); --p-btn-ink: var(--n-bg);
  --p-head: var(--n-ink);
  --p-glow1: var(--n-acc2); --p-glow2: var(--n-acc);

  --p-r-card: 20px;      /* --border-radius-medium wzorca */
  --p-r-field: 10px;     /* --border-radius-small */
  --p-r-pill: 100px;     /* --border-radius-large */
  --p-font: 'Metropolis', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="day"] {
  --p-bg: var(--bg-soft); --p-card: var(--bg); --p-ink: var(--ink);
  --p-dim: var(--dim); --p-line: var(--line); --p-field: var(--field);
  --p-acc: var(--acc); --p-acc2: var(--teal-ink); --p-focus: var(--focus);
  --p-ok: var(--ok-ink); --p-warn: var(--warn-ink); --p-err: var(--err);
  /* Przycisk główny jak na stronie publicznej: granat, po najechaniu niebieski. */
  --p-btn-bg: var(--secondary); --p-btn-ink: var(--bg);
  --p-head: var(--secondary);
  --p-glow1: var(--acc); --p-glow2: var(--teal);
}

body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  line-height: 1.65;
  font-family: var(--p-font);
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  background-image:
    radial-gradient(60rem 40rem at 85% -10%,
      color-mix(in srgb, var(--p-glow1) 9%, transparent), transparent 60%),
    radial-gradient(50rem 34rem at -10% 30%,
      color-mix(in srgb, var(--p-glow2) 7%, transparent), transparent 60%);
  background-attachment: fixed;
}
/* Kolor linku TYLKO w obszarze portalu. Strony bez konta noszą ramę serwisu
   (belka, menu, stopka), a ta ma własne kolory linków — biały na granacie,
   granat na bieli. Goły selektor `a` bił je specyficznością i stopka wychodziła
   ciemnoniebieskim tekstem na ciemnym tle. */
/* Kolor linku w treści portalu — reguła BAZOWA, więc musi przegrywać z każdą
   regułą komponentu (`.btn`, `.tab`, `.chip`).

   Dwie pułapki, obie już raz kosztowały znikające napisy na przyciskach:
   1. `.content a` to (0,1,1), czyli WIĘCEJ niż `.btn` (0,1,0) — stąd samo `main a`.
   2. `[data-theme="day"] main a` to (0,1,2), bo selektor atrybutu liczy się jak
      klasa — i w motywie dziennym znów bił `.btn`. Stąd `:where()`: dokłada
      warunek, nie dokłada specyficzności. Obie reguły są więc (0,0,2). */
main a { color: var(--p-acc); text-underline-offset: .15em; }
:where([data-theme="day"]) main a { color: var(--acc-deep); }
.logo, .btn { text-decoration: none; }

/* Fokus w obu motywach z tokenu motywu — globalny --focus jest pod jasne tło. */
:focus-visible { outline-color: var(--p-focus); }
.tablewrap:focus-visible { outline-color: var(--p-focus); }


/*-------- szkielet: menu boczne + kolumna treści (plan 31.6) --------*/
.shell { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content > main { flex: 1; }

.sidebar {
  width: 15rem; flex: none; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--p-card) 82%, transparent);
  border-right: 1px solid var(--p-line); backdrop-filter: blur(10px);
  padding: .9rem .7rem; z-index: 40;
}
/* Przewija się SAMA lista zakładek, nie całe menu (plan 51.2): przy dwudziestu
   pięciu pozycjach dół menu — motywy i zwijanie — wyjeżdżał poza ekran
   i trzeba było go szukać przewijaniem. */
.sb-nav {
  display: flex; flex-direction: column; gap: .25rem;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* Margines na obrys fokusu: kontener z `overflow` przycina to, co wychodzi
     poza jego pudełko, a obrys rysuje się NA ZEWNĄTRZ krawędzi — bez tych
     3 px zaznaczenie klawiaturą byłoby ucięte po bokach (2.4.7). */
  padding: 3px; margin: -3px;
}
.sb-foot {
  margin-top: auto; flex: none; display: flex; flex-direction: column;
  gap: .25rem; padding-top: .9rem; border-top: 1px solid var(--p-line);
}
/* Zaznaczenia w menu są PROSTOKĄTNE (decyzja Adama 19.08.2026): pigułki
   z zaokrąglonymi rogami nie pasowały do wyglądu bocznego panelu — ma być
   jak w Konverii i DMS. Zaokrąglenia zostają w treści strony (karty,
   przyciski), menu ma własny język. */
.sb-link {
  display: flex; align-items: center; gap: .7rem; min-height: 2.6rem;
  padding: .35rem .8rem; border-radius: 0; text-decoration: none;
  color: var(--p-dim); font-weight: 600; font-size: .97rem;
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; text-align: left; width: 100%; transition: all .3s;
}
.sb-link:hover { color: var(--p-ink); border-color: var(--p-line); }
/* Zaznaczona zakładka: pełny prostokąt w kolorze akcentu — stan niesie
   kształt i tło, nie sam odcień tekstu (1.4.1). */
.sb-link.on, .sb-link[aria-pressed="true"] {
  color: var(--p-btn-ink); background: var(--p-btn-bg); border-color: transparent;
}
.sb-link.on:hover, .sb-link[aria-pressed="true"]:hover {
  color: var(--p-btn-ink); background: var(--p-acc); border-color: transparent;
}
.sb-ico { width: 1.35rem; height: 1.35rem; flex: none; }
.sb-theme { display: flex; flex-direction: column; gap: .25rem; }

/*-------- sekcje menu (plan 51) --------
  Menu urosło z ośmiu pozycji do blisko trzydziestu — bez grup jest ścianą
  odnośników. Pozycje w grupach są NIŻSZE (2,2rem zamiast 2,6rem): przy tej
  liczbie zakładek dawna wysokość nie mieściła się na laptopie, a menu i tak
  ma własne przewijanie. Nagłówek grupy to `div`, nie `h2` — nie chcemy
  wstrzykiwać dwudziestu nagłówków w konspekt strony (1.3.1); grupowanie
  niesie `role="group"` + `aria-labelledby`. */
.sb-items { display: flex; flex-direction: column; gap: .2rem; }
/* Sekcja to `details` — zwijanie działa bez JS i z klawiatury (52.2). */
.sb-group { display: block; }

/*-------- kolory pakietów (plan 52.5) --------
  Pionowa krecha biegnie wzdłuż CAŁEJ sekcji (nagłówek + zakładki) i mówi,
  do którego pakietu ona należy: podstawa, Praktyka, Lab+, część dla
  programistów, konto. Kolor jest WYŁĄCZNIE grupowaniem — nazwę sekcji
  niesie tekst, a bieżącą zakładkę pigułka z `aria-current` (1.4.1), więc
  ślepota barw niczego tu nie odbiera.

  Odcienie średnio nasycone: te same wartości muszą czytać się na granacie
  motywu nocnego i na bieli dziennego, bez podwójnej palety. */
.sb-group[data-pkg] { --sb-pkg: var(--p-line); }
.sb-group[data-pkg="prep"]      { --sb-pkg: #35b6a6; }  /* turkus */
.sb-group[data-pkg="materials"] { --sb-pkg: #d79a30; }  /* bursztyn */
.sb-group[data-pkg="sets"]      { --sb-pkg: #8b73ef; }  /* fiolet */
.sb-group[data-pkg="people"]    { --sb-pkg: #46ad5c; }  /* zieleń */
.sb-group[data-pkg="archive"]   { --sb-pkg: #4b8ef0; }  /* błękit */
.sb-group[data-pkg="practice"]  { --sb-pkg: #e0628f; }  /* róż */
.sb-group[data-pkg="lab"]       { --sb-pkg: #22bcd8; }  /* cyjan (NeuroKey) */
.sb-group[data-pkg="dev"]       { --sb-pkg: #8a97ab; }  /* stal */
.sb-group[data-pkg="account"]   { --sb-pkg: #b98b5e; }  /* piasek */

.sb-group[data-pkg]:not([data-pkg=""]) {
  border-left: 3px solid var(--sb-pkg);
  border-radius: 0;
  padding-left: .35rem; margin-left: .1rem;
}
/* Sekcja rozwinięta dostaje delikatną poświatę swojego pakietu — to samo
   grupowanie, mocniej widoczne w miejscu, w którym się właśnie pracuje. */
[data-theme="night"] .sb-group[data-pkg].on {
  box-shadow: -3px 0 10px -4px var(--sb-pkg);
}
.sb-sec {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  margin: .8rem 0 .1rem; padding: .2rem .8rem; border-radius: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--p-dim);
  list-style: none;               /* strzałka jest własna, nie systemowa */
}
.sb-sec::-webkit-details-marker { display: none; }
.sb-sec:hover { color: var(--p-ink); }
.sb-caret {
  width: .85rem; height: .85rem; flex: none; margin-left: auto;
  transition: transform .2s;
}
.sb-group[open] > .sb-sec .sb-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .sb-caret { transition: none; } }
/* Sekcja z bieżącą zakładką: nazwa pełnym kolorem tekstu + tło w odcieniu
   PAKIETU. Bez drugiej krechy z lewej — tam biegnie już pasek pakietu
   (52.5), a dwa paski obok siebie znaczyłyby to samo dwa razy. Kolor nie
   jest jedynym nośnikiem: wewnątrz stoi pigułka zakładki z `aria-current`
   (1.4.1). */
.sb-group.on > .sb-sec {
  color: var(--p-ink);
  background: color-mix(in srgb, var(--sb-pkg) 18%, transparent);
}
.sb-nav .sb-link { min-height: 2.2rem; font-size: .92rem; padding: .3rem .8rem; }
.sb-nav .sb-ico { width: 1.15rem; height: 1.15rem; }
/* Zwinięte menu (kolumna ikon): nagłówek sekcji zostaje KLIKALNYM paskiem
   ze strzałką — bez nazwy, ale nadal działa (zgłoszenie Adama 19.08.2026:
   sekcje mają trzymać stan także w trybie ikon, więc muszą dać się tam
   zwijać i rozwijać). Nazwę niesie `aria-label`/`title` z szablonu. */
html[data-sidebar="collapsed"] .sb-sec {
  justify-content: center; margin: .45rem .15rem .1rem; padding: .15rem 0;
  border-top: 1px solid var(--p-line); min-height: 1.1rem;
}
html[data-sidebar="collapsed"] .sb-sec-label { display: none; }
html[data-sidebar="collapsed"] .sb-caret { margin-left: 0; }

/* Zwinięte menu (desktop): sama kolumna ikon; nazwy zostają w aria-label. */
html[data-sidebar="collapsed"] .sidebar { width: 4.1rem; padding: .9rem .45rem; }
html[data-sidebar="collapsed"] .sb-label { display: none; }
html[data-sidebar="collapsed"] .sb-link { justify-content: center; padding: .35rem; }
html[data-sidebar="collapsed"] .sb-collapse .sb-ico { transform: rotate(180deg); }

.sb-backdrop { display: none; }
.sb-open { display: none; }

/* Mobile: menu wysuwane hamburgerem, pod spodem przyciemnienie. Bez JS
   (html bez data-js) menu stoi normalnie nad treścią — nic nie znika. */
@media (max-width: 959px) {
  html[data-js] .shell { display: block; }
  html[data-js] .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    height: auto; transform: translateX(-105%); transition: transform .2s ease;
    background: var(--p-card); width: 16rem;
  }
  html[data-js][data-sbopen] .sidebar { transform: none; }
  html[data-js][data-sbopen] .sb-backdrop {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: color-mix(in srgb, var(--n-bg) 55%, transparent);
  }
  html[data-js] .sb-open { display: inline-flex; }
  html[data-js] .sb-collapse { display: none; }
  html:not([data-js]) .sidebar {
    position: static; height: auto; width: auto;
    border-right: 0; border-bottom: 1px solid var(--p-line);
  }
  html:not([data-js]) .shell { display: block; }
}


/*-------- górny pasek --------*/
nav.top {
  background: color-mix(in srgb, var(--p-card) 82%, transparent);
  border-bottom: 1px solid var(--p-line);
  backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20;
}
.nav-in {
  max-width: 68rem; margin: 0 auto; padding: .7rem 1.1rem;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
nav.top .logo { font-weight: 700; font-size: 1.15rem; color: var(--p-ink); letter-spacing: -.5px; }
nav.top .logo b { color: var(--p-acc); }
nav.top .logo span { font-weight: 400; color: var(--p-dim); font-size: .95rem; }
.spacer { flex: 1; }
nav form { margin: 0; }
.linkbtn {
  background: none; border: 0; font: inherit; color: var(--p-dim);
  cursor: pointer; padding: .35rem .55rem; border-radius: var(--p-r-field);
  text-decoration: underline; text-underline-offset: .15em;
}
.linkbtn:hover { color: var(--p-acc); background: var(--p-card); }
[data-theme="day"] .linkbtn:hover { color: var(--acc-deep); }
.langsw { display: flex; gap: .1rem; }
.langsw .linkbtn {
  font-size: .85rem; font-weight: 600; padding: .35rem .7rem;
  text-decoration: none; border-radius: var(--p-r-pill);
}
.langsw .linkbtn.on {
  color: var(--p-btn-ink); background: var(--p-btn-bg); font-weight: 700;
}
[data-theme="day"] .langsw .linkbtn.on { color: var(--bg); background: var(--secondary); }
.who { color: var(--p-dim); font-size: .85rem; overflow-wrap: anywhere; }

/* Piguły kontekstu na pulpicie (nie mylić z zakładkami — te są w menu). */
nav.tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; min-height: 2.2rem;
  padding: .25rem 1.1rem; border-radius: var(--p-r-pill); text-decoration: none;
  color: var(--p-dim); border: 1px solid var(--p-line); font-weight: 600;
  font-size: .95rem; transition: all .3s;
}
.tab:hover { color: var(--p-ink); border-color: var(--p-field); }
.tab.on { color: var(--p-btn-ink); background: var(--p-btn-bg); border-color: transparent; }


/*-------- treść --------*/
main { max-width: 68rem; margin: 0 auto; padding: 2rem 1.1rem 3rem; width: 100%; }
/* Bez konta rama serwisu daje wlasne tlo — portal.css maluje tylko tresc. */
html[data-theme="day"] body:has(.site-header) { background-image: none; }
h1 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -1px;
  margin: 0 0 .3rem; font-weight: 700; color: var(--p-head);
}
.sub { color: var(--p-dim); margin: 0 0 1.6rem; }
h2 {
  font-size: 1.3rem; letter-spacing: -.5px; margin: 2.2rem 0 .9rem;
  font-weight: 600; color: var(--p-head);
}

.card {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-card); padding: 1.6rem 1.8rem; margin-bottom: 1rem;
  transition: box-shadow .3s;
}
.card:hover { box-shadow: 0 1rem 3rem color-mix(in srgb, var(--p-bg) 60%, transparent); }
[data-theme="day"] .card:hover { box-shadow: 0 1rem 3rem rgba(15, 32, 54, .12); }
.card h3 { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--p-head); font-weight: 600; }
.card p { margin: 0 0 .6rem; color: var(--p-dim); font-size: .95rem; }
.card .meta, .meta { color: var(--p-dim); font-size: .85rem; }
.card.glow { border-color: color-mix(in srgb, var(--p-acc) 55%, var(--p-line)); }

.statgrid {
  display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); margin: 0 0 1.4rem;
}
.catgrid, .twocol { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .catgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .statgrid { grid-template-columns: repeat(4, 1fr); }
  .twocol { grid-template-columns: 1fr 1fr; }
}
.stat {
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-card); padding: 1.1rem 1.3rem;
  border-top: 4px solid var(--p-acc);
}
.stat b {
  display: block; font-size: 2rem; letter-spacing: -1px; font-weight: 700;
  color: var(--p-acc); font-variant-numeric: tabular-nums; line-height: 1.2;
}
[data-theme="day"] .stat b { color: var(--acc-deep); }
.stat span { color: var(--p-dim); font-size: .82rem; }


/*-------- przyciski (pigułki wzorca) --------*/
.btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: 1rem;
  color: var(--p-btn-ink); background: var(--p-btn-bg);
  padding: .7rem 1.6rem; border: 2px solid transparent;
  border-radius: var(--p-r-pill); text-align: center; cursor: pointer;
  transition: all .3s; line-height: normal;
}
.btn:hover { background: var(--p-acc); color: var(--p-btn-ink); }
.btn.ghost {
  background: none; color: var(--p-ink); border: 2px solid var(--p-field);
}
.btn.ghost:hover { background: var(--p-btn-bg); color: var(--p-btn-ink); border-color: transparent; }
[data-theme="day"] .btn.ghost { color: var(--acc-deep); }
[data-theme="day"] .btn.ghost:hover { color: var(--bg); }
.btn.danger { background: var(--p-err); color: var(--p-btn-ink); }
.btn.danger:hover { background: var(--p-err); filter: brightness(1.1); }
[data-theme="day"] .btn.danger { color: var(--bg); }
.btn.off {
  background: none; color: var(--p-dim); border: 2px dashed var(--p-field);
  font-weight: 400;
}
.btn.off:hover { background: none; color: var(--p-ink); }


/*-------- znaczniki stanu --------*/
.chip {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 1.6rem;
  padding: .15rem .8rem; border-radius: var(--p-r-pill); font-size: .82rem;
  font-weight: 600; border: 1px solid var(--p-line); color: var(--p-dim);
}
.chip.ok { color: var(--p-ok); border-color: color-mix(in srgb, var(--p-ok) 45%, var(--p-line)); }
.chip.warn { color: var(--p-warn); border-color: color-mix(in srgb, var(--p-warn) 45%, var(--p-line)); }
.chip.err { color: var(--p-err); border-color: color-mix(in srgb, var(--p-err) 45%, var(--p-line)); }
.chip.acc { color: var(--p-acc); border-color: color-mix(in srgb, var(--p-acc) 45%, var(--p-line)); }
[data-theme="day"] .chip.acc { color: var(--acc-deep); }

.notice {
  border: 1px solid color-mix(in srgb, var(--p-warn) 50%, var(--p-line));
  background: color-mix(in srgb, var(--p-warn) 8%, var(--p-card));
  color: var(--p-warn); border-radius: var(--p-r-field); padding: 1rem 1.3rem;
  margin: 0 0 1.4rem; font-size: .95rem;
}
.ok {
  border: 1px solid color-mix(in srgb, var(--p-ok) 50%, var(--p-line));
  background: color-mix(in srgb, var(--p-ok) 8%, var(--p-card));
  color: var(--p-ok); border-radius: var(--p-r-field); padding: 1rem 1.3rem;
  margin: 0 0 1.4rem;
}


/*-------- tabele --------*/
table.list {
  width: 100%; border-collapse: collapse; background: var(--p-card);
  border: 1px solid var(--p-line); border-radius: var(--p-r-card);
  overflow: hidden; font-size: .94rem;
}
table.list th, table.list td {
  padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--p-line);
}
table.list thead th {
  background: var(--p-bg); font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .03em; color: var(--p-dim);
}
table.list tbody th { font-weight: 600; }
table.list tr:last-child td { border-bottom: 0; }
.tablewrap { margin-bottom: 1rem; border-radius: var(--p-r-card); }


/*-------- formularze --------
  Nadpisanie wstawki `ui/_a11y.css.html`, gdzie tło pola jest na sztywno białe.
  Ten arkusz MUSI być w <head> po niej — inaczej motyw nocny dostaje białe pola. */
.chk { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1rem; }
.chk input { margin-top: .3rem; accent-color: var(--p-acc); }
.chk label { font-size: .97rem; }
.chk .hint { display: block; color: var(--p-dim); font-size: .85rem; }

.input, input[type="text"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="password"],
input[type="date"], select, textarea {
  background: var(--p-bg); color: var(--p-ink);
  border: 1.5px solid var(--p-field); border-radius: var(--p-r-field);
  font-family: inherit;
}
[data-theme="day"] .input, [data-theme="day"] input[type="text"],
[data-theme="day"] input[type="email"], [data-theme="day"] input[type="number"],
[data-theme="day"] input[type="search"], [data-theme="day"] input[type="tel"],
[data-theme="day"] input[type="password"], [data-theme="day"] input[type="date"],
[data-theme="day"] select, [data-theme="day"] textarea { background: var(--bg); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--p-acc); }
.field { margin-bottom: 1.2rem; }
.field > label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--p-head); }
.field input, .field select { max-width: 22rem; }
.field input:focus, .field select:focus { border-color: var(--p-acc); }
.field .hint { display: block; color: var(--p-dim); font-size: .85rem; margin-top: .25rem; }
.fielderr { color: var(--p-err); }


/*-------- stopka --------
  Selektory zawężone do `.content > footer`: strony BEZ konta noszą stopkę ramy
  serwisu (`.site-footer`), a reguła na gołym `footer` zwężałaby ją do 68 rem
  i zamieniała w wyśrodkowany drobny tekst. */
.content > footer {
  max-width: 68rem; margin: 0 auto; padding: 1.8rem 1.1rem 2.5rem;
  color: var(--p-dim); font-size: .82rem; text-align: center; width: 100%;
}
.content > footer nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .5rem; }
.content > footer a {
  color: var(--p-dim); text-decoration: none; padding: .3rem .25rem; white-space: nowrap;
}
.content > footer a:hover,
.content > footer a:focus-visible { color: var(--p-acc); text-decoration: underline; }
[data-theme="day"] .content > footer a:hover,
[data-theme="day"] .content > footer a:focus-visible { color: var(--acc-deep); }
.content > footer .claim { margin: 0 0 .6rem; }
.content > footer .claim a { color: var(--p-acc); font-weight: 600; text-decoration: underline; }
[data-theme="day"] .content > footer .claim a { color: var(--acc-deep); }
/* Zegar BeatTime stoi w OBU stopkach: portalowej i serwisowej. Bez zawężenia
   `[data-theme="day"] .beat-btn` (0,2,0) remisował z `.site-footer .beat-btn`
   z neuroscreen.css i wygrywał kolejnością arkuszy — cyfry robiły się
   ciemnoniebieskie na granatowej belce stopki (zgłoszenie Adama). */
.content > footer .beat-btn { color: var(--p-acc); }
[data-theme="day"] .content > footer .beat-btn { color: var(--acc-deep); }

@media (forced-colors: active) {
  .chip, .stat, .tab, .sb-link, .sidebar, .btn, .card { border: 1px solid ButtonText; }
}


/*-------- podgląd sesji na żywo (plan 45) --------
  Język z grafik hero: ciemne tło, świecące krzywe, cienkie obrysy, dane jako
  mierniki zamiast liczb w tabeli. Działa w obu motywach — w dziennym tło jest
  jasne, ale sam ekran przebiegu zostaje ciemny, bo krzywej EEG patrzy się
  długo i kontrast odwrócony męczy oczy mniej. */
.obs-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.obs-live {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2rem;
  padding: .2rem 1rem; border-radius: var(--p-r-pill); font-weight: 600;
  font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--p-line); color: var(--p-dim);
}
.obs-live::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--p-dim);
}
.obs-live.on { color: var(--p-err); border-color: color-mix(in srgb, var(--p-err) 55%, var(--p-line)); }
.obs-live.on::before { background: var(--p-err); animation: obs-pulse 1.6s infinite; }
@keyframes obs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Migający punkt to ruch — przy prefers-reduced-motion zostaje sam kolor. */
@media (prefers-reduced-motion: reduce) { .obs-live.on::before { animation: none; } }

.obs-list { display: flex; flex-direction: column; gap: 1rem; }

.obs-card {
  background: var(--n-card); border: 1px solid var(--n-line);
  border-radius: var(--p-r-card); overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--n-acc) 10%, transparent);
}
.obs-card-head {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--n-line);
  background: color-mix(in srgb, var(--n-acc) 6%, transparent);
  color: var(--n-ink);
}
.obs-card-head .obs-label { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.obs-card-head .meta, .obs-card-head .chip { color: var(--n-dim); border-color: var(--n-line); }
.obs-card-head .chip.ok { color: var(--n-ok); border-color: color-mix(in srgb, var(--n-ok) 45%, var(--n-line)); }
.obs-card-head .chip.warn { color: var(--n-warn); border-color: color-mix(in srgb, var(--n-warn) 45%, var(--n-line)); }
.obs-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--n-field); flex: none; }
.obs-dot.on { background: var(--n-err); box-shadow: 0 0 12px var(--n-err); }
.obs-marker { font-family: ui-monospace, monospace; color: var(--n-acc2); }

.obs-body { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 900px) { .obs-body { grid-template-columns: 1fr 15rem; } }
/* Wysokość MUSI być w CSS: skrypt czyta `clientHeight`, żeby rysunek nie
   spływał do górnego paska rosnącego bufora. */
.obs-wave { display: block; width: 100%; height: 220px; background: var(--n-bg); }
@media (max-width: 640px) { .obs-wave { height: 170px; } }

.obs-side {
  padding: 1rem 1.2rem; background: var(--n-bg);
  border-top: 1px solid var(--n-line);
}
@media (min-width: 900px) { .obs-side { border-top: 0; border-left: 1px solid var(--n-line); } }
.obs-fit-row {
  display: grid; grid-template-columns: 3rem 1fr 4.5rem; gap: .5rem;
  align-items: center; margin-bottom: .5rem;
  font-size: .8rem; font-family: ui-monospace, monospace; color: var(--n-dim);
}
.obs-fit-bar {
  height: .45rem; border-radius: 4px; background: var(--n-line);
  overflow: hidden; display: block;
}
.obs-fit-bar i { display: block; height: 100%; width: 0; background: var(--n-dim); transition: width .25s; }
/* Stan styku niesie kolor ORAZ długość paska i liczba — nie sam kolor (1.4.1). */
.obs-fit-row.good .obs-fit-bar i { background: var(--n-ok); }
.obs-fit-row.mid .obs-fit-bar i { background: var(--n-warn); }
.obs-fit-row.bad .obs-fit-bar i { background: var(--n-err); }
.obs-fit-row.good .obs-fit-val { color: var(--n-ok); }
.obs-fit-row.mid .obs-fit-val { color: var(--n-warn); }
.obs-fit-row.bad .obs-fit-val { color: var(--n-err); }
.obs-fit-val { text-align: right; }

.obs-progress {
  position: relative; height: 2.2rem; background: var(--n-bg);
  border-top: 1px solid var(--n-line);
}
.obs-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--n-acc) 22%, transparent),
    color-mix(in srgb, var(--n-acc) 45%, transparent));
  transition: width .25s linear;
}
.obs-progress-marks { position: absolute; inset: 0; }
.obs-progress-marks i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: color-mix(in srgb, var(--n-acc2) 70%, transparent);
}
.obs-progress-time {
  position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
  font-family: ui-monospace, monospace; font-size: .78rem; color: var(--n-dim);
  font-variant-numeric: tabular-nums;
}


/*=======================================================================
  PULPIT JAKO PANEL PRZYRZĄDOWY (plan 45.1 pkt 3, decyzja Adama)

  Język z grafik hero: ciemne tło z delikatną siatką, świecące akcenty, cienkie
  obrysy, liczby krojem o stałej szerokości znaku. Zasady, których ta warstwa
  pilnuje:

  * Świecenie i siatka to WYŁĄCZNIE motyw nocny. W dziennym zostaje ten sam
    układ bez efektów — bo dzienny istnieje dla światła słonecznego i dla osób,
    którym ciemny ekran męczy wzrok (plan 13.5), a poświata psuje tam czytelność.
  * Żaden efekt nie niesie informacji. Wszystko, co świeci, świeci OBOK stanu,
    który i tak jest opisany kolorem, kształtem i tekstem (1.4.1).
  * Nie ruszamy kontrastu tekstu — efekty siedzą na tłach i obrysach.
  =====================================================================*/

/* Siatka pomiarowa pod treścią: dwa gradienty w kratkę, ledwo widoczne.
   `fixed`, więc przy przewijaniu nie „jedzie" razem z kartami i nie odwraca
   uwagi od danych. */
[data-theme="night"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--n-acc) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--n-acc) 4%, transparent) 1px, transparent 1px),
    radial-gradient(60rem 40rem at 85% -10%,
      color-mix(in srgb, var(--p-glow1) 12%, transparent), transparent 60%),
    radial-gradient(50rem 34rem at -10% 30%,
      color-mix(in srgb, var(--p-glow2) 9%, transparent), transparent 60%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  background-attachment: fixed;
}

/* Karta: cienka krecha akcentu na górnej krawędzi + delikatna poświata przy
   najechaniu. Krecha jest gradientem, więc karta ma „kierunek" jak moduł
   przyrządu, a nie ramkę jak formularz. */
[data-theme="night"] .card,
[data-theme="night"] .stat,
[data-theme="night"] table.list {
  position: relative;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-acc) 14%, transparent);
}
[data-theme="night"] .card::before,
[data-theme="night"] .stat::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--n-acc) 55%, transparent), transparent);
  pointer-events: none;
}
[data-theme="night"] .card:hover {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-acc) 22%, transparent),
              0 0 0 1px color-mix(in srgb, var(--n-acc) 16%, transparent),
              0 1.4rem 3rem color-mix(in srgb, var(--n-bg) 70%, transparent);
}
[data-theme="night"] .card.glow {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-acc) 30%, transparent),
              0 0 0 1px color-mix(in srgb, var(--n-acc) 22%, transparent);
}

/* Liczby krojem o stałej szerokości znaku i z lekką poświatą: w kaflach
   statystyk, w tabelach i wszędzie, gdzie liczba zmienia się w miejscu —
   inaczej cyfry „skaczą" przy każdej aktualizacji. */
.stat b, table.list td, .meta time, .obs-fit-val, .obs-progress-time {
  font-variant-numeric: tabular-nums;
}
[data-theme="night"] .stat b {
  text-shadow: 0 0 18px color-mix(in srgb, var(--n-acc) 45%, transparent);
}
.stat span {
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  font-size: .72rem;
}

/* Nagłówek sekcji z krechą akcentu — dzieli ekran na moduły bez rysowania
   dodatkowych ramek. Działa w obu motywach: to układ, nie efekt. */
main h2 {
  display: flex; align-items: center; gap: .7rem;
}
main h2::before {
  content: ""; width: .2rem; height: 1.05em; border-radius: 2px;
  background: var(--p-acc); flex: none;
}
[data-theme="night"] main h2::before {
  box-shadow: 0 0 12px color-mix(in srgb, var(--n-acc) 60%, transparent);
}

/* Zaznaczona zakładka w menu i aktywna piguła: poświata OBOK tła, nie zamiast. */
[data-theme="night"] .sb-link.on,
[data-theme="night"] .sb-link[aria-pressed="true"],
[data-theme="night"] .tab.on,
[data-theme="night"] .langsw .linkbtn.on {
  box-shadow: 0 0 20px color-mix(in srgb, var(--n-acc) 35%, transparent);
}
[data-theme="night"] .btn:not(.ghost):not(.off) {
  box-shadow: 0 0 18px color-mix(in srgb, var(--n-acc) 28%, transparent);
}
[data-theme="night"] .chip.ok, [data-theme="night"] .chip.acc {
  box-shadow: inset 0 0 14px color-mix(in srgb, currentColor 12%, transparent);
}

/* Pasek górny i menu boczne: mocniejsze rozmycie i krecha akcentu u dołu paska,
   żeby oddzielały się od siatki tła bez rysowania grubej ramki. */
[data-theme="night"] nav.top {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--n-acc) 16%, transparent);
}
[data-theme="night"] .sidebar {
  box-shadow: 1px 0 0 color-mix(in srgb, var(--n-acc) 12%, transparent);
}

/* Tabela danych: wiersz podświetlany przy najechaniu — przy dwudziestu sesjach
   na liście oko gubi wiersz w połowie szerokości ekranu. */
table.list tbody tr:hover { background: color-mix(in srgb, var(--p-acc) 7%, transparent); }

/* Efekty zdejmujemy przy prefers-reduced-motion? NIE — to nie jest ruch, tylko
   statyczna poświata. Zdejmujemy je za to w trybie wysokiego kontrastu, gdzie
   system sam narzuca paletę i cienie tylko brudzą obraz. */
@media (forced-colors: active) {
  [data-theme="night"] .card, [data-theme="night"] .stat,
  [data-theme="night"] .btn, [data-theme="night"] .sb-link.on,
  [data-theme="night"] nav.top, [data-theme="night"] .sidebar { box-shadow: none; }
  [data-theme="night"] body { background-image: none; }
  main h2::before { display: none; }
}


/*-------- aparatura pulpitu (plan 49.1 pkt 3–4) --------
  Kafle-chronometry: tarcza-bezel z podziałką i wygaszone zera wiodące jak
  w liczniku. Obie rzeczy to dekoracja (w HTML aria-hidden) — stan niesie
  liczba i etykieta, więc obowiązują reguły 45.8: świecenie tylko w nocy,
  kontrast tekstu nietknięty, w wysokim kontraście dekoracja schodzi. */
/* Progi kolumn dobrane pod NAJSZERSZĄ wartość kafla („18.08.2026" przy
   1.25rem): 5 kolumn dopiero od 1260px — niżej data wjeżdżała pod tarczę
   (pomiar z przeglądu 18.08.2026). BEZ overflow:hidden — ucinał wartości
   po cichu przy powiększonej czcionce (1.4.4); grid ma prawo się rozepchać
   widocznie zamiast gubić cyfry. */
.statgrid.instr { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .statgrid.instr { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .statgrid.instr { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1260px) { .statgrid.instr { grid-template-columns: repeat(5, 1fr); } }
.instr .stat { position: relative; padding: 1rem 1.1rem 1rem; }
.instr .stat b { font-size: 1.8rem; padding-right: 2.4rem; }
.instr .stat b.wide { font-size: 1.25rem; line-height: 1.75; }

.instr .dial { position: absolute; top: .75rem; right: .75rem; width: 2.15rem; height: 2.15rem; }
/* stroke-opacity wraca do 1 — atrybuty w SVG trzymają wersję „bez arkusza",
   a docelowe ściemnienie robi tu color-mix, nie przezroczystość. */
.d-ring { fill: none; stroke: var(--p-line); stroke-width: 1; stroke-opacity: 1; }
/* Podziałka bezela: 24 kresek dasharrayem (obwód r=17 ≈ 106,8). */
.d-ticks {
  fill: none; stroke: color-mix(in srgb, var(--p-dim) 45%, transparent);
  stroke-width: 3.4; stroke-dasharray: 1.2 3.25; stroke-opacity: 1;
}
/* Ćwiartka łuku akcentu (obwód r=21 ≈ 131,9) — stała, dekoracyjna. */
.d-arc {
  fill: none; stroke: var(--p-acc); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 33 98.9; transform: rotate(-90deg); transform-origin: center;
}
.d-dot { fill: var(--p-acc); }
[data-theme="day"] .d-arc { stroke: var(--acc-deep); }
[data-theme="day"] .d-dot { fill: var(--acc-deep); }
[data-theme="night"] .d-arc,
[data-theme="night"] .d-dot {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--n-acc) 65%, transparent));
}

/* Zera wiodące licznika — celowo wygaszone: to dekoracja aria-hidden,
   wymóg kontrastu jej nie dotyczy (1.4.3, tekst czysto ozdobny).
   Specyficzność (0,2,1) nie jest kosmetyką: ogólne `.stat span` (0,1,1)
   narzuca spanom .72rem/uppercase/pełny kolor — bez wygranej kaskady zera
   renderowały się jako miniaturowe cyfry obok odczytu (przegląd 18.08.2026). */
.instr .stat b .gz {
  color: color-mix(in srgb, var(--p-dim) 34%, transparent);
  font: inherit; letter-spacing: inherit; text-transform: none;
}
.instr .unit {
  font-size: .95rem; font-weight: 650; color: var(--p-dim);
  margin-left: .2rem; letter-spacing: 0;
}
.instr .sub2 {
  display: block; margin-top: .25rem; color: var(--p-dim); font-size: .74rem;
  font-variant-numeric: tabular-nums;
}


/*-------- zbiory szablonów: kwadratowe kafle (plan 50.2 pkt 1) --------
  Kafel ma być RZECZĄ, którą się bierze, nie wierszem listy — stąd kwadrat
  i siatka auto-fill zamiast pasa na całą szerokość. Bez `overflow: hidden`:
  przy powiększonej czcionce kafel ma urosnąć, a nie uciąć nazwę w ciszy
  (lekcja z 49.3) — `aspect-ratio` ustępuje wtedy automatycznemu minimum
  elementu siatki. */
.boxgrid {
  display: grid; gap: .8rem; margin: 0 0 1rem;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.box {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  background: var(--p-card); border: 1px solid var(--p-line);
  border-radius: var(--p-r-card); padding: 1rem 1.1rem;
}
.box h3 {
  margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; color: var(--p-head);
  overflow-wrap: anywhere;
}
.box .meta { line-height: 1.45; font-variant-numeric: tabular-nums; }
/* Przyciski przyklejone do dołu kafla — inaczej w kwadracie skakałyby
   w pionie zależnie od długości nazwy. */
.box-act { margin-top: auto; display: flex; flex-direction: column; gap: .4rem; }
.box-act .btn { padding: .4rem .9rem; font-size: .85rem; }
.box.glow { border-color: color-mix(in srgb, var(--p-acc) 55%, var(--p-line)); }
[data-theme="night"] .box {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-acc) 14%, transparent);
}
[data-theme="night"] .box.glow {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--n-acc) 30%, transparent),
              0 0 0 1px color-mix(in srgb, var(--n-acc) 22%, transparent);
}

/* Tryb wyboru szablonów (plan 50.2 pkt 3): pole wyboru NAD kartą — klik
   w `summary` zwija kartę, więc checkbox w środku walczyłby z rozwijaniem. */
.pickmark { margin: 0 0 .3rem; padding-left: .3rem; }
.pickmark label { font-weight: 650; }
.card.picking { margin-bottom: 1.2rem; }

@media (forced-colors: active) {
  .box { border: 1px solid ButtonText; }
  [data-theme="night"] .box { box-shadow: none; }
}


/*-------- oś czasu sesji (plan 49.1 pkt 5) --------
  Wartość dnia niesie WYSOKOŚĆ słupka, sumy stoją obok tekstem (1.4.1);
  kolor „przeanalizowanych" tylko wzmacnia. Zero JS — SVG liczy widok. */
.tl { display: block; width: 100%; height: auto; min-width: 46rem; }
.tl-axis { stroke: var(--p-line); stroke-width: 1; stroke-opacity: 1; }
.tl-grid { stroke: color-mix(in srgb, var(--p-line) 60%, transparent); stroke-dasharray: 3 4; stroke-opacity: 1; }
.tl-lab { fill: var(--p-dim); font-size: 11px; font-family: var(--p-font); font-variant-numeric: tabular-nums; }
.tl-bar { fill: color-mix(in srgb, var(--p-acc) 30%, transparent); }
.tl-done { fill: var(--p-acc); }
[data-theme="day"] .tl-bar { fill: color-mix(in srgb, var(--acc-deep) 25%, transparent); }
[data-theme="day"] .tl-done { fill: var(--acc-deep); }
[data-theme="night"] .tl-done {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--n-acc) 50%, transparent));
}

@media (forced-colors: active) {
  .instr .dial, .gz { display: none; }
  [data-theme="night"] .d-arc, [data-theme="night"] .d-dot,
  [data-theme="night"] .tl-done { filter: none; }
  /* SVG nie dostaje kolorów systemowych sam z siebie — wymuszamy. Warstwy
     zlewają się w jedno, ale sumy i tak stoją obok tekstem (1.4.1). */
  .tl-bar, .tl-done, .tl-lab { fill: CanvasText; }
  .tl-axis, .tl-grid { stroke: CanvasText; }
}


/*-------- zgodność między osobami (plan 45.10) --------
  Wartość niesie LICZBA i szerokość paska; kolor tylko wzmacnia (1.4.1).
  Ujemna korelacja to informacja, nie błąd — dlatego ma własny kolor, a nie
  „czerwień awarii". */
.obs-sync { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .obs-sync { grid-template-columns: 1fr 1fr; } }
.obs-sync-cell {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem;
  align-items: center; padding: .7rem .9rem;
  border: 1px solid var(--p-line); border-radius: var(--p-r-field);
  background: color-mix(in srgb, var(--p-acc) 4%, transparent);
}
.obs-sync-who {
  font-family: ui-monospace, monospace; font-size: .82rem; color: var(--p-dim);
}
.obs-sync-cell b {
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 1.05rem; color: var(--p-ink);
}
.obs-sync-why { grid-column: 1 / -1; font-size: .76rem; color: var(--p-dim); }
.obs-sync-bar {
  grid-column: 1 / -1; height: .35rem; border-radius: 3px;
  background: var(--p-line); overflow: hidden; display: block;
}
.obs-sync-bar i { display: block; height: 100%; background: var(--p-dim); transition: width .4s; }
.obs-sync-cell.hi { border-color: color-mix(in srgb, var(--p-ok) 45%, var(--p-line)); }
.obs-sync-cell.hi .obs-sync-bar i { background: var(--p-ok); }
.obs-sync-cell.hi b { color: var(--p-ok); }
.obs-sync-cell.lo { border-color: color-mix(in srgb, var(--p-acc2) 45%, var(--p-line)); }
.obs-sync-cell.lo .obs-sync-bar i { background: var(--p-acc2); }
.obs-sync-cell.lo b { color: var(--p-acc2); }

/* Miernik przy osobie: od razu widać, kto odstaje od reszty. */
.obs-agree {
  margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--n-line);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .78rem; color: var(--n-dim);
}
.obs-agree b {
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 1rem; color: var(--n-acc);
}
.obs-agree[hidden] { display: none; }


/* Nagłówek poziomu 2 W KARCIE (audyt 2026-09-19 N-66).
   Strony zaproszenia, kreatora i certyfikatu skakały z h1 na h3 — czytnik
   ekranu gubił wtedy poziom sekcji (1.3.1). Poziom poprawiliśmy na h2,
   a wygląd karty ma zostać bez zmian: bez krechy akcentu i bez marginesu
   sekcyjnego, czyli dokładnie tam, gdzie dotąd było h3. */
main h2.lvl2 {
  display: block;
  margin: 0 0 .4rem;
  font-size: 1.1rem;
  letter-spacing: normal;
  color: var(--p-head);
  font-weight: 600;
}
main h2.lvl2::before { content: none; }