/* Meetpoint — arkusz strony. Tokeny dosłownie z docs/styl.md; poza :root brak wartości kolorów. */
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-ext-500-700.woff2?v=054c266f) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/space-grotesk-latin-500-700.woff2?v=a0d054c4) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext-400-600.woff2?v=a28eb6d3) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fonts/inter-latin-400-600.woff2?v=c9407645) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tlo: #ffffff;            /* Tło strony */
  --tekst: #111418;          /* Tekst */
  --tekst-2: #5c616a;        /* Tekst pomocniczy */
  --akcent: #2a6f62;         /* Akcent / linki / przycisk główny */
  --akcent-ciemny: #1e4f46;  /* Przycisk główny — najechanie; tło pasa teal */
  --przycisk-tekst: #ffffff; /* Tekst na przycisku i na pasie teal */
  --karta: #ffffff;          /* Karty białe (styl.md: białe karty z obwódką) */
  --obrys-pola: #5c616a;     /* Obrys pól — formularza nie ma; wartość z tabeli (tekst pomocniczy) */
  --link: #2a6f62;           /* Linki w tekście */
  --pas-mieta: #dcebe7;      /* Tło pasa miętowego */
  --pas-teal: #1e4f46;       /* Tło pasa teal */
  --tekst-na-teal: #ffffff;  /* Tekst na pasie teal */
  --tekst-2-teal: #cfe3de;   /* Tekst pomocniczy na pasie teal */
  --fokus-jasny: #9fe0d3;    /* Obrys fokusa na pasie teal */
  --plan-indygo: #6466e9;    /* Plan — indygo (kreska/kropka) */
  --plan-pomarancz: #b8702a; /* Plan — pomarańcz (kreska/kropka) */
  --plan-morski: #2b8aa4;    /* Plan — morski (kreska/kropka) */
  --obwodka: #e4e5e9;        /* Obwódka kart (dekoracyjna) */
  --promien: 12px;
  --cien: none;
  --szer-tresci: 1040px;
  --szer-waska: 640px;
  --szer-daty: 280px;
  --t-13: 13px; --t-15: 15px; --t-16: 16px; --t-18: 18px; --t-19: 19px; --t-20: 20px;
  --t-h1: clamp(32px, 4.5vw, 52px);
  --t-h2: clamp(26px, 3vw, 36px);
  --t-liczba: clamp(34px, 3.5vw, 40px);
  --t-kod: clamp(24px, 7vw, 40px);   /* kod zaproszenia: stopień liczby na komputerze, mniej na telefonie */
  --odstep-8: 8px; --odstep-16: 16px; --odstep-20: 20px; --odstep-24: 24px; --odstep-32: 32px;
  --odstep-40: 40px; --odstep-48: 48px; --odstep-64: 64px; --odstep-96: 96px; --odstep-128: 128px;
  --ruch-przesuniecie: 12px; --ruch-czas: 300ms; --ruch-opoznienie: 60ms;
  --czas-rysowania: 900ms; --opoznienie-toru: 120ms;
  --kreska-diagram: 3px;          /* grubość torów diagramu — jako atrybut stroke-width w SVG (ikony interfejsu: 1,75 px) */
  --plan-indygo-jasny: #a5a6f5;   /* Plany na pasie teal (jaśniejsze) — nieużywane w obecnym układzie */
  --plan-pomarancz-jasny: #f0a862;
  --plan-morski-jasny: #7fd3e6;
  --kreska-ikon: 1.75px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--tlo); color: var(--tekst); font: var(--t-16)/1.6 Inter, system-ui, sans-serif; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--odstep-16); }
body { margin: 0; }
h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 var(--odstep-16); letter-spacing: -0.01em; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
p { margin: 0 0 var(--odstep-16); }
ul, ol { margin: 0 0 var(--odstep-16); padding-left: var(--odstep-24); }
li { margin: 0 0 var(--odstep-8); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--akcent-ciemny); }
strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: var(--odstep-8); background: var(--akcent); color: var(--przycisk-tekst); padding: var(--odstep-8) var(--odstep-16); border-radius: var(--promien); z-index: 20; }
.skip:focus { left: var(--odstep-8); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.pas-teal :focus-visible { outline-color: var(--fokus-jasny); }

/* przyciski */
.przycisk { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: var(--odstep-8); min-height: 48px; min-width: 44px; padding: 12px var(--odstep-24); border-radius: var(--promien); font-weight: 600; text-decoration: none; border: 2px solid var(--akcent); background: var(--akcent); color: var(--przycisk-tekst); cursor: pointer; transition: background var(--ruch-czas) ease-out, color var(--ruch-czas) ease-out, border-color var(--ruch-czas) ease-out; }
.przycisk:hover, .przycisk:active { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); color: var(--przycisk-tekst); }
.przycisk--drugi { background: transparent; color: var(--akcent); }
.przycisk--drugi:hover, .przycisk--drugi:active { background: var(--akcent); color: var(--przycisk-tekst); }
.pas-teal .przycisk { background: var(--przycisk-tekst); border-color: var(--przycisk-tekst); color: var(--pas-teal); }
.pas-teal .przycisk:hover, .pas-teal .przycisk:active { background: var(--tekst-2-teal); border-color: var(--tekst-2-teal); color: var(--pas-teal); }
.przycisk svg { width: 20px; height: 20px; flex: none; }

/* nagłówek strony: jeden rząd, bez przyklejania, bez menu rozwijanego */
.naglowek { display: flex; align-items: center; gap: var(--odstep-16); min-height: 64px; padding: 0 var(--odstep-20); max-width: calc(var(--szer-tresci) + 2 * var(--odstep-20)); margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: var(--odstep-8); min-height: 44px; text-decoration: none; color: var(--tekst); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: var(--t-20); }
.logo img { display: block; height: 32px; width: auto; }
.logo:hover { color: var(--akcent); }
.naglowek nav { margin-left: auto; display: flex; gap: var(--odstep-8); }
.naglowek nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--odstep-8); text-decoration: none; color: var(--tekst); font-weight: 600; border-bottom: 2px solid transparent; }
.naglowek nav a:hover { color: var(--akcent); }
.naglowek nav a[aria-current=page] { color: var(--akcent); border-bottom-color: var(--akcent); }
.ikona { width: 20px; height: 20px; flex: none; }
@media (max-width: 359px) {
  /* najwęższe telefony: sam znak w nagłówku (nazwa jest w opisie znaku), odnośniki ciaśniej */
  .naglowek .logo span { display: none; }
  .naglowek { gap: var(--odstep-8); }
  .naglowek nav a { padding: 0 6px; }
}

/* sekcje: pasy */
.sekcja { padding: var(--odstep-64) var(--odstep-20); }
.sekcja > * { max-width: var(--szer-tresci); margin-left: auto; margin-right: auto; }
.pas-mieta { background: var(--pas-mieta); }
.pas-teal { background: var(--pas-teal); color: var(--tekst-na-teal); }
.pas-teal a { color: var(--tekst-na-teal); }
.pas-teal a:hover { color: var(--tekst-2-teal); }
.pas-teal .pomocniczy { color: var(--tekst-2-teal); }
.pomocniczy { color: var(--tekst-2); }
.etykieta { font-size: var(--t-13); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); margin: 0 0 var(--odstep-8); }
.wprowadzenie { font-size: var(--t-19); line-height: 1.55; }

/* split 1:2 */
.split { display: grid; gap: var(--odstep-32); align-items: start; }
.split > * { max-width: none; margin-left: 0; margin-right: 0; }

/* otwarcie */
#otwarcie { padding-top: var(--odstep-32); }
#otwarcie .split { align-items: center; }
#otwarcie h1 { margin-bottom: var(--odstep-24); }
/* telefon: diagram bezpośrednio pod nagłówkiem (styl.md: dominanta w pierwszym ekranie), akapity pod diagramem */
#otwarcie .split > div { display: contents; }
#otwarcie h1 { order: 1; }
#otwarcie .diagram { order: 2; margin: 0 auto; }
#otwarcie .wprowadzenie { order: 3; }
#otwarcie [data-rola=dowod] { order: 4; }
.diagram { position: relative; margin: 0; width: 100%; max-width: 350px; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram svg.diagram-pionowy { display: block; }
.diagram svg.diagram-poziomy { display: none; }
.tor { fill: none; stroke-linecap: round; }
.tor--indygo { stroke: var(--plan-indygo); }
.tor--pomarancz { stroke: var(--plan-pomarancz); }
.tor--morski { stroke: var(--plan-morski); }
.osoba--indygo { fill: var(--plan-indygo); }
.osoba--pomarancz { fill: var(--plan-pomarancz); }
.osoba--morski { fill: var(--plan-morski); }
.wezel { fill: var(--akcent); stroke: var(--tlo); }
.diagram-etykiety { list-style: none; margin: 0; padding: 0; }
.diagram-etykiety li { position: absolute; margin: 0; font-size: var(--t-15); font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--tlo); padding: 2px 6px; border-radius: 6px; }
.diagram-etykiety .etykieta-wezla { font-size: var(--t-13); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); }
/* pozycje etykiet — układ pionowy (telefon): start u góry, meta u dołu, trzy tory pionowo w x=79/175/271 z 350 */
.diagram-etykiety .etykieta-start { left: 50%; top: 0; transform: translateX(-50%); }
.diagram-etykiety .etykieta-meta { left: 50%; bottom: 0; transform: translateX(-50%); }
.diagram-etykiety .etykieta-tor-1 { left: 0; top: 44%; }
.diagram-etykiety .etykieta-tor-2 { left: 50%; top: 60%; transform: translateX(-50%); }
.diagram-etykiety .etykieta-tor-3 { right: 0; top: 44%; }
.diagram { padding: var(--odstep-16) 0; }

/* rysowanie torów: raz, tylko pod .js */
.js .tor { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset var(--czas-rysowania) ease-in-out; }
.js .tor--pomarancz { transition-delay: var(--opoznienie-toru); }
.js .tor--morski { transition-delay: calc(2 * var(--opoznienie-toru)); }
.js .osoba { opacity: 0; transition: opacity var(--ruch-czas) ease-out calc(var(--czas-rysowania) + 2 * var(--opoznienie-toru)); }
.js .diagram.on .tor { stroke-dashoffset: 0; }
.js .diagram.on .osoba { opacity: 1; }

/* dlaczego-nie-messenger: lista dwóch historii */
.historie { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--odstep-16); }
.historie li { background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--promien); padding: var(--odstep-24); margin: 0; }

/* jak-to-dziala: kroki */
.kroki { list-style: none; counter-reset: krok; padding: 0; margin: 0 auto; display: grid; gap: var(--odstep-32); }
.kroki li { counter-increment: krok; position: relative; padding-left: 56px; margin: 0; min-height: 40px; }
.kroki li::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: var(--t-18); color: var(--przycisk-tekst); background: var(--akcent); }
.kroki li:nth-child(1)::before { background: var(--plan-indygo); }
.kroki li:nth-child(2)::before { background: var(--plan-pomarancz); }
.kroki li:nth-child(3)::before { background: var(--plan-morski); }
.kroki li:nth-child(4)::before { background: var(--akcent); }

/* dla-kogo: argument wąski */
.waski { max-width: var(--szer-waska); text-align: center; }
#dla-kogo { padding-top: var(--odstep-128); padding-bottom: var(--odstep-128); }

/* stan-test: pas liczb */
.liczby { list-style: none; padding: 0; margin: var(--odstep-32) auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--odstep-24); }
.liczby li { margin: 0; }
.liczba { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: var(--t-liczba); line-height: 1.1; color: var(--akcent); margin: 0 0 var(--odstep-8); }
.liczba-podpis { font-size: var(--t-16); margin: 0; }
.zastrzezenie { color: var(--tekst-2); }

/* kto-buduje: pas teal */
#kto-buduje .przyciski { display: flex; flex-wrap: wrap; gap: var(--odstep-16); }

/* dziennik: kolumna dat */
.wpis { display: grid; gap: var(--odstep-16); max-width: var(--szer-tresci); margin-left: auto; margin-right: auto; }
.kolumna-dat { color: var(--tekst-2); font-size: var(--t-15); margin: 0; }
.wpis--kryteria h2 { margin-bottom: var(--odstep-8); }
.kolumna-dat h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; font-size: var(--t-20); color: var(--tekst); margin: 0 0 var(--odstep-8); }
.cytat { border-left: 3px solid var(--akcent); padding-left: var(--odstep-16); margin: 0 0 var(--odstep-24); }
.srodtytul { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; font-size: var(--t-20); margin: var(--odstep-32) 0 var(--odstep-16); }
.tresc-wpisu ul { list-style: none; padding-left: var(--odstep-24); }
.tresc-wpisu li { position: relative; }
.tresc-wpisu li::before { content: ""; position: absolute; left: calc(-1 * var(--odstep-24) + 4px); top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); }
.tresc-wpisu table { border-collapse: collapse; width: 100%; margin: 0 0 var(--odstep-24); }
.tresc-wpisu th { font-size: var(--t-13); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-2); text-align: left; padding: var(--odstep-8); }
.tresc-wpisu td { padding: var(--odstep-8); border-top: 1px solid var(--obwodka); }
#wpisy .wpis + .wpis { border-top: 1px solid var(--obwodka); padding-top: var(--odstep-64); margin-top: var(--odstep-64); }
#naglowek-dziennika .waski, #polityka .waski, #zaproszenie .waski, #instalacja .waski { text-align: left; margin-left: max(0px, calc((100% - var(--szer-tresci)) / 2)); }
#polityka .waski p, #polityka .waski li { text-align: left; }

/* zaproszenie /i/<kod>: kod w karcie, przyciski, drogi instalacji */
[hidden] { display: none !important; }   /* stany strony zaproszenia przełącza atrybut hidden; .przycisk ma własne display */
#zaproszenie { padding-top: var(--odstep-32); }
.kod-karta { background: var(--karta); border: 1px solid var(--obwodka); border-radius: var(--promien); padding: var(--odstep-20) var(--odstep-24); margin: var(--odstep-32) 0 var(--odstep-24); }
.kod { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: var(--t-kod); line-height: 1.2; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; word-break: break-all; -webkit-user-select: all; user-select: all; margin: 0; }
.przyciski-kodu { display: flex; flex-direction: column; gap: var(--odstep-16); }
.stan-kopii { min-height: 1.6em; font-size: var(--t-15); margin: var(--odstep-8) 0 var(--odstep-24); }
.droga { margin-top: var(--odstep-24); }
.droga .przycisk { margin-bottom: var(--odstep-16); }
.kroki-instalacji li { margin: 0; }
.kroki-instalacji a { display: inline-flex; align-items: center; min-height: 44px; }
.brak-aplikacji { border-left: 3px solid var(--akcent); padding-left: var(--odstep-16); margin: 0 0 var(--odstep-24); }
.brak-aplikacji p { margin-bottom: var(--odstep-8); }

/* stopka */
.stopka { border-top: 1px solid var(--obwodka); padding: var(--odstep-32) var(--odstep-20); }
.stopka > * { max-width: var(--szer-tresci); margin-left: auto; margin-right: auto; }
.stopka .logo { font-size: var(--t-18); display: flex; }
.stopka .logo img { height: 32px; }   /* umowa: 28 px; 32 px, żeby plik 150 px nie przekraczał 1,4× fizycznego miejsca przy 2× gęstości ekranu (bramka nadmiaru rozdzielczości) */
.stopka nav p { margin: var(--odstep-16) 0 var(--odstep-8); line-height: 2.4; }
.stopka nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.stopka .pomocniczy { font-size: var(--t-15); margin: 0 auto; }
.stopka .stopka-linia-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--odstep-16); }
.stopka .stopka-linia-2 a { display: inline-flex; align-items: center; min-height: 44px; }

/* ruch: ujawnianie sekcji tylko pod .js, raz */
.js .rv { opacity: 0; transform: translateY(var(--ruch-przesuniecie)); transition: opacity var(--ruch-czas) ease-out, transform var(--ruch-czas) ease-out; }
.js .rv.on { opacity: 1; transform: none; }
.js .rv:nth-child(2) { transition-delay: var(--ruch-opoznienie); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .tor { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .osoba { opacity: 1; }
}
@media print { .js .rv { opacity: 1; transform: none; } .js .tor { stroke-dasharray: none; stroke-dashoffset: 0; } .js .osoba { opacity: 1; } }

/* komputer */
@media (min-width: 768px) {
  .sekcja { padding: var(--odstep-96) var(--odstep-32); }
  #otwarcie { padding-top: var(--odstep-48); }
  #dla-kogo { padding-top: var(--odstep-128); padding-bottom: var(--odstep-128); }
  .split { grid-template-columns: 1fr 2fr; gap: var(--odstep-40); }
  .split--odwrotny { grid-template-columns: 2fr 1fr; }
  .diagram { max-width: none; padding: 0; }
  #otwarcie .split > div { display: block; }
  .diagram svg.diagram-pionowy { display: none; }
  .diagram svg.diagram-poziomy { display: block; }
  /* pozycje etykiet — układ poziomy (viewBox 680×390): start (30,195), meta (650,195); tory w y≈123 / 195 / 267 */
  .diagram-etykiety .etykieta-start { left: 4.4%; top: 58%; transform: translateX(-50%); }
  .diagram-etykiety .etykieta-meta { left: 95.6%; top: 58%; transform: translateX(-50%); }
  .diagram-etykiety .etykieta-tor-1 { left: 50%; top: 27%; transform: translate(-50%, -100%); }
  .diagram-etykiety .etykieta-tor-2 { left: 50%; top: 42%; transform: translate(-50%, -100%); }
  .diagram-etykiety .etykieta-tor-3 { left: 50%; top: 71%; transform: translateX(-50%); }
  .kroki { grid-template-columns: repeat(4, 1fr); }
  .kroki li { padding-left: 0; padding-top: 56px; }
  .liczby { grid-template-columns: repeat(4, 1fr); }
  .wpis { grid-template-columns: var(--szer-daty) 1fr; gap: var(--odstep-24) var(--odstep-40); grid-template-rows: auto auto 1fr; }
  .wpis > .kolumna-dat { grid-column: 1; position: sticky; top: var(--odstep-24); align-self: start; }
  .wpis > .tresc-wpisu { grid-column: 2; grid-row: 1 / span 3; }
  /* kryteria: data (wstęp) w kolumnie dat, nagłówek nad całością */
  .wpis--kryteria { grid-template-rows: auto auto 1fr; }
  .wpis--kryteria > h2 { grid-column: 1 / span 2; grid-row: 1; }
  .wpis.wpis--kryteria > p.kolumna-dat--wstep { grid-row: 2; }
  .wpis--kryteria > .tresc-wpisu { grid-row: 2 / span 2; }
  /* wpis dziennika: data w rzędzie 1, odnośnik do repo pod nią */
  .wpis > .kolumna-dat:first-child { grid-row: 1; }
  .wpis > .kolumna-dat--link { grid-row: 2; position: static; }
  .stopka { padding: var(--odstep-48) var(--odstep-32); }
  #zaproszenie { padding-top: var(--odstep-48); }
  .przyciski-kodu { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1200px) {
  /* zabieg autorski ze styl.md: tor pomarańczowy wystaje 24 px poza prawą krawędź kolumny */
  .diagram svg.diagram-poziomy { margin-right: -24px; width: calc(100% + 24px); }
}