/* ==========================================================================
   LEGAL PAGES — regulamin.html, polityka-prywatnosci.html, polityka-cookies.html
   The landing's look: neutral black (or the light theme the app remembers),
   deep-cyan accent, Plus Jakarta headings, Inter body. Fonts are the
   landing's own files, so these pages load nothing from Google.
   Behaviour (language, contents list): legal.js.
   ========================================================================== */
@font-face { font-family: 'EMX Jakarta'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("landing/assets/fonts/plus-jakarta-sans-latin-ext.woff2") 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; }
@font-face { font-family: 'EMX Jakarta'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("landing/assets/fonts/plus-jakarta-sans-latin.woff2") 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; }
@font-face { font-family: 'EMX Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("landing/assets/fonts/inter-latin-ext.woff2") 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; }
@font-face { font-family: 'EMX Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("landing/assets/fonts/inter-latin.woff2") 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 {
    --bg: #0a0a0b;
    --surface: #141417;
    --line: rgba(255, 255, 255, .08);
    --line-2: rgba(255, 255, 255, .14);
    --text: #f4f3f0;
    --text-2: #a3a3a7;
    --text-3: #8a8a90;
    --accent: #3cbfda;
    --accent-base: #1fa4c2;
    --tint: rgba(31, 164, 194, .08);
    --tint-2: rgba(31, 164, 194, .14);
    --bar-bg: rgba(18, 18, 21, .62);
    --bar-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
    --metal: linear-gradient(180deg, #a4ecf4 0%, #4cc9e0 38%, #1c97b5 68%, #0d5f77 100%);
    --shadow: 0 30px 80px rgba(0, 0, 0, .45);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --head: 'EMX Jakarta', 'Plus Jakarta Sans', system-ui, sans-serif;
    --body: 'EMX Inter', 'Inter', system-ui, 'Segoe UI', Arial, sans-serif;
    color-scheme: dark;
}
:root[data-theme="light"] {
    --bg: #f5f5f3;
    --surface: #ffffff;
    --line: rgba(12, 12, 14, .09);
    --line-2: rgba(12, 12, 14, .17);
    --text: #0e0e10;
    /* body text of long documents: darker than the landing's grey, which
       read too faint on white across a whole page */
    --text-2: #2f2f34;
    --text-3: #4f4f55;
    --accent: #0a6479;
    --accent-base: #13849f;
    --tint: rgba(19, 132, 159, .08);
    --tint-2: rgba(19, 132, 159, .15);
    --bar-bg: rgba(255, 255, 255, .74);
    --bar-shadow: 0 10px 30px rgba(20, 20, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    --metal: linear-gradient(180deg, #2eaecb 0%, #14879f 42%, #0d6a82 74%, #0a4a5c 100%);
    --shadow: 0 30px 80px rgba(12, 12, 14, .08);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh;
    background: var(--bg);
    color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.7;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* the accent glow stays put while the page scrolls (a fixed layer, not
   background-attachment: fixed, which repaints the whole page per frame) */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 70% 40% at 12% -5%, var(--tint-2), transparent 60%);
}
::selection { background: var(--tint-2); }
a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------- top bar: the landing's navbar pill ---------------- */
.lg-header {
    position: sticky; top: 16px; z-index: 10;
    display: flex; justify-content: center; padding: 0 16px; margin-top: 16px;
    pointer-events: none;
}
.lg-pill {
    pointer-events: auto;
    display: flex; align-items: center; gap: 14px; max-width: 100%;
    padding: 8px 8px 8px 18px; border-radius: 999px;
    background: var(--bar-bg); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: var(--bar-shadow);
}
.lg-logo { display: flex; align-items: center; gap: 10px; height: 40px; flex-shrink: 0; text-decoration: none; }
/* the EX mark in the same metal as the name: the logo's shape masks --metal */
.logo-metal {
    display: block; flex-shrink: 0; height: 22px; aspect-ratio: 108 / 64;
    background: var(--metal);
    -webkit-mask: url("landing/assets/img/logo-mark.webp") center / contain no-repeat;
    mask: url("landing/assets/img/logo-mark.webp") center / contain no-repeat;
}
.lg-logo-text {
    font-family: var(--head); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; white-space: nowrap;
    background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em;
}
.lg-divider { width: 1px; height: 22px; background: var(--line-2); flex-shrink: 0; }
.lang-switcher-top { display: inline-flex; gap: 2px; }
.lang-btn {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    height: 40px; padding: 0 14px; border-radius: 999px;
    font: 600 .84rem/1 var(--body); letter-spacing: .02em; color: var(--text-2);
    transition: background-color .2s, color .2s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--tint); color: var(--accent); }
/* the way back, styled as the landing's "Log in to the map" */
.lg-back {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-left: 4px;
    padding: 0 18px; border-radius: 999px; white-space: nowrap; text-decoration: none;
    font-size: .9rem; font-weight: 600; color: var(--accent);
    background: var(--tint); border: 1px solid var(--tint-2);
    transition: background-color .2s, border-color .2s;
}
.lg-back:hover { background: var(--tint-2); border-color: var(--accent-base); }
.lg-back svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.lg-back:hover svg { transform: translateX(-3px); }

/* ---------------- layout: contents + document, centred as one ---------------- */
.lg-layout {
    width: min(820px, calc(100% - 32px)); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px;
    padding: clamp(36px, 6vw, 64px) 0 48px;
}
@media (min-width: 1140px) {
    .lg-layout { width: min(1100px, calc(100% - 64px)); grid-template-columns: 232px minmax(0, 820px); }
}

/* contents list (built by legal.js from the h2s of the shown language) */
.lg-toc { display: none; }
@media (min-width: 1140px) {
    .lg-toc { display: block; position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; }
}
.lg-toc-title { margin: 0 0 12px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.lg-toc li { margin: 0; }
.lg-toc a {
    display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
    font-size: .84rem; line-height: 1.4; color: var(--text-2); text-decoration: none;
    transition: color .2s, border-color .2s;
}
.lg-toc a:hover { color: var(--text); }
.lg-toc a.is-current { color: var(--accent); border-left-color: var(--accent-base); }

/* ---------------- document ---------------- */
.container {
    min-width: 0;
    padding: clamp(24px, 5vw, 56px);
    background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
    box-shadow: var(--shadow);
}
.lang-content { display: none; }
.lang-content.active { display: block; animation: lgIn .5s var(--ease) both; }
@keyframes lgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

h1 {
    margin: 0 0 10px; font-family: var(--head); font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 1.95rem); line-height: 1.22; letter-spacing: -.005em; color: var(--text);
    text-wrap: balance;
}
.update-date { margin: 0 0 28px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.legal-notice {
    margin: 0 0 36px; padding: 16px 18px; border-radius: 14px;
    background: var(--tint); border: 1px solid var(--line); border-left: 3px solid var(--accent-base);
    font-size: .92rem; line-height: 1.6; color: var(--text-2);
}
h2 {
    margin: 2.6em 0 .8em; scroll-margin-top: 104px;
    font-family: var(--head); font-weight: 700; font-size: 1.02rem; line-height: 1.4;
    letter-spacing: .01em; color: var(--text);
    padding-top: 1.4em; border-top: 1px solid var(--line);
}
.legal-notice + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
p, li { color: var(--text-2); font-size: 1rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .55em; padding-left: .2em; }
li::marker { color: var(--accent-base); }
ul ul { margin-top: .6em; }
strong { color: var(--text); font-weight: 600; }


/* ---------------- footer ---------------- */
.lg-foot {
    width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 44px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    border-top: 1px solid var(--line); font-size: .85rem; color: var(--text-3);
}
.lg-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lg-foot a { color: var(--text-2); text-decoration: none; }
.lg-foot a:hover, .lg-foot a[aria-current="page"] { color: var(--accent); }

/* one label per language: html[lang] is set by legal.js */
html[lang="en"] [data-l="pl"], html:not([lang="en"]) [data-l="en"] { display: none; }

@media (max-width: 640px) {
    .lg-pill { gap: 8px; padding-left: 14px; }
    .lg-logo-text, .lg-divider { display: none; }
    .lang-btn { padding: 0 11px; }
    .lg-back { padding: 0 14px; }
    .container { border-radius: 18px; }
}
@media (max-width: 380px) {
    .lg-back [data-l] { display: none; }
    .lg-back { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lang-content.active { animation: none; }
}
@media print {
    :root, :root[data-theme="light"] { --bg: #fff; --surface: #fff; --text: #000; --text-2: #222; --text-3: #444; --line: #ccc; --accent: #000; }
    body { background: #fff; }
    .lg-header, .lg-toc, .lg-foot { display: none; }
    .container { border: 0; box-shadow: none; padding: 0; max-width: none; }
    .lang-content.active { animation: none; }
}