/*
  Kůže pro samostatné stránky (404, ochrana údajů, ukázka načítání): jedna stránka, šest stylů webu.
  Kůži nastavuje inline skript v <head> přes <html data-skin="…"> podle naposledy
  navštíveného stylu; přepínání a písma řeší assets/js/skins.js.
*/

/* základ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.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: -999px; top: 1rem; z-index: 50; padding: .7rem 1.1rem; background: var(--primary); color: var(--primary-ink); border-radius: var(--btn-r); font-weight: 600; }
.skip:focus { left: 1rem; }
.wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
.wrap.narrow { max-width: 48rem; }
.whitespace-nowrap { white-space: nowrap; }

header { position: relative; z-index: 20; }
header .wrap { display: flex; align-items: center; gap: .75rem; padding-top: 1.1rem; padding-bottom: 1.1rem; position: relative; }
.logo { font-family: var(--display); font-weight: var(--logo-w, 700); font-size: 1.05rem; text-decoration: none; color: var(--fg); letter-spacing: var(--logo-ls, 0); text-transform: var(--logo-tt, none); }
.logo span { color: var(--accent-text); }
.theme-btn {
  margin-left: auto; width: 2.5rem; height: 2.5rem; display: grid; place-content: center; cursor: pointer;
  color: var(--fg); background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--btn-r);
  box-shadow: var(--btn-shadow, none);
}
.theme-btn svg { width: 18px; height: 18px; }
.dark .i-moon, html:not(.dark) .i-sun { display: none; }

main { flex: 1; position: relative; z-index: 1; }
.card {
  background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--card-r); box-shadow: var(--shadow);
  padding: clamp(1.5rem, 5vw, 3.5rem); backdrop-filter: var(--blur, none); -webkit-backdrop-filter: var(--blur, none);
}
.eyebrow { margin: 0; font-family: var(--label-font, var(--body)); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.35rem; cursor: pointer;
       font: 600 .95rem/1.2 var(--btn-font, var(--body)); text-decoration: none; text-transform: var(--btn-tt, none); letter-spacing: var(--btn-ls, 0);
       color: var(--fg); background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--btn-r); box-shadow: var(--btn-shadow, none);
       transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: var(--btn-hover, translateY(-2px)); }
.btn.primary { color: var(--primary-ink); background: var(--primary); border-color: var(--primary-border, transparent); }
.btn[hidden] { display: none; }

.sw-glass { background: linear-gradient(135deg, #8b5cf6, #22d3ee); }
.sw-bento { background: linear-gradient(135deg, #f4f4f5 50%, #f97316 50%); }
.sw-minimal { background: linear-gradient(135deg, #faf9f7 50%, #dc2626 50%); }
.sw-brutal { background: linear-gradient(135deg, #ffe14d 50%, #111111 50%); }
.sw-scrolly { background: linear-gradient(135deg, #060910 50%, #fbbf24 50%); }
.sw-hand { background: linear-gradient(135deg, #fdfaf3 50%, #059669 50%); }

footer { position: relative; z-index: 1; font-size: .85rem; color: var(--muted); }
footer .wrap { padding-top: 1rem; padding-bottom: 1.5rem; }

/* hlavička: odkaz zpět + dropdown „Styl“ */
.back { margin-left: auto; display: none; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--muted); }
.back:hover { color: var(--fg); }
.back + .style-btn, .back ~ .style-btn { margin-left: .25rem; }
.style-btn { width: auto; padding: 0 .8rem; display: inline-flex; align-items: center; gap: .45rem; font: 600 .9rem/1 var(--btn-font, var(--body)); }
.style-btn .lbl { display: none; }
.style-btn + .theme-btn { margin-left: 0; }
@media (min-width: 640px) { .back { display: inline; } .style-btn .lbl { display: inline; } }

#styl-menu { position: absolute; right: 1.25rem; top: calc(100% - .35rem); width: min(20rem, calc(100vw - 2.5rem)); padding: .75rem;
  background: var(--panel); border: var(--bw) solid var(--border); border-radius: var(--panel-r, var(--card-r)); box-shadow: var(--shadow-panel, var(--shadow));
  backdrop-filter: var(--blur, none); -webkit-backdrop-filter: var(--blur, none); }
#styl-menu[hidden] { display: none; }
#styl-menu .ttl { margin: .2rem .5rem 0; font-family: var(--display); font-weight: var(--h-w, 700); font-size: 1rem; text-transform: var(--h-tt, none); }
#styl-menu .sub { margin: .25rem .5rem .6rem; font-size: .78rem; line-height: 1.5; color: var(--muted); }
#styl-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
#styl-menu .opt { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .5rem; cursor: pointer; text-align: left;
  font: inherit; color: var(--fg); background: transparent; border: 0; border-radius: var(--opt-r, .9rem); }
#styl-menu .opt:hover, #styl-menu .opt[aria-pressed="true"] { background: var(--chip-bg); }
#styl-menu .opt .sw { width: 2.1rem; height: 2.1rem; flex: none; border-radius: var(--chip-r, .6rem); border: 1px solid var(--border); }
#styl-menu .opt b { display: block; font-size: .9rem; }
#styl-menu .opt small { display: block; font-size: .75rem; color: var(--muted); }
#styl-menu .opt .ok { margin-left: auto; width: 1rem; height: 1rem; color: var(--accent-text); visibility: hidden; }
#styl-menu .opt[aria-pressed="true"] .ok { visibility: visible; }

/* dlouhý text (ochrana údajů) */
.page { padding: 1.5rem 0 3rem; }
.page-title { margin: .6rem 0 0; font-family: var(--display); font-weight: var(--h-w, 700); font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.1;
  letter-spacing: var(--h-ls, -.01em); text-transform: var(--h-tt, none); }
.page-lead { margin: .9rem 0 2rem; font-size: 1.08rem; color: var(--muted); }
.prose h2 { margin: 2.2rem 0 0; font-family: var(--display); font-weight: var(--h-w, 700); font-size: 1.35rem; line-height: 1.25; text-transform: var(--h-tt, none); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin: .7rem 0 0; color: var(--muted); line-height: 1.7; }
.prose ul { padding-left: 1.25rem; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--fg); }
.prose a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose .note { margin-top: 2.2rem; font-size: .9rem; }
.page .actions { margin-top: 2rem; }

/* kůže */
[data-skin="glass"] { --display: "Space Grotesk", Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
  --bg: #eef1ff; --fg: #0f172a; --muted: #475569; --accent: #7c3aed; --accent-text: #6d28d9; --card: rgba(255,255,255,.62); --border: rgba(255,255,255,.75);
  --bw: 1px; --card-r: 2rem; --btn-r: 999px; --chip-bg: rgba(15,23,42,.06); --shadow: 0 8px 32px rgba(31,38,135,.1); --blur: blur(18px);
  --panel: rgba(255,255,255,.9); --panel-r: 1.5rem;
  --primary: linear-gradient(90deg, #7c3aed, #2563eb); --primary-ink: #fff;
  --big-fill: linear-gradient(90deg, #7c3aed, #2563eb); --big-clip: text; --big-text-fill: transparent; --eye-color: #6d5ff0; --pupil: #0f172a; }
.dark[data-skin="glass"] { --bg: #070713; --fg: #fff; --muted: #94a3b8; --accent: #a78bfa; --accent-text: #c4b5fd; --card: rgba(255,255,255,.045);
  --border: rgba(255,255,255,.1); --chip-bg: rgba(255,255,255,.08); --shadow: 0 8px 32px rgba(0,0,0,.45); --panel: rgba(12,12,29,.92);
  --big-fill: linear-gradient(90deg, #a78bfa, #22d3ee); --eye-color: #7dd3fc; --pupil: #fff; }
[data-skin="glass"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(28rem 28rem at 8% 0%, rgba(139,92,246,.35), transparent 70%), radial-gradient(26rem 26rem at 100% 45%, rgba(34,211,238,.28), transparent 70%),
              radial-gradient(24rem 24rem at 40% 100%, rgba(232,121,249,.22), transparent 70%); }

[data-skin="bento"] { --display: Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif; --label-font: "JetBrains Mono", ui-monospace, monospace;
  --bg: #f4f4f5; --fg: #18181b; --muted: #52525b; --accent: #ea580c; --accent-text: #c2410c; --card: #fff; --border: #e4e4e7;
  --bw: 1px; --card-r: 1.5rem; --btn-r: 1rem; --chip-r: .5rem; --chip-bg: #f4f4f5; --shadow: 0 1px 2px rgba(0,0,0,.04);
  --panel: #fff; --shadow-panel: 0 18px 40px -16px rgba(24,24,27,.25);
  --primary: #18181b; --primary-ink: #fff; --eye-color: #f97316; --pupil: #18181b; --h-w: 600; --big-w: 700; }
.dark[data-skin="bento"] { --bg: #09090b; --fg: #fafafa; --muted: #a1a1aa; --accent: #fb923c; --accent-text: #fdba74; --card: #18181b; --border: #27272a;
  --chip-bg: #27272a; --panel: #18181b; --shadow-panel: 0 18px 40px -16px rgba(0,0,0,.7); --primary: #fafafa; --primary-ink: #18181b; --pupil: #fafafa; }

[data-skin="minimal"] { --display: "Instrument Serif", Georgia, serif; --body: Inter, system-ui, sans-serif;
  --bg: #faf9f7; --fg: #161513; --muted: #57534e; --accent: #b91c1c; --accent-text: #b91c1c; --card: transparent; --border: rgba(22,21,19,.2);
  --bw: 1px; --card-r: 0; --btn-r: 0; --chip-r: 0; --opt-r: 0; --chip-bg: rgba(22,21,19,.06); --shadow: none; --h-w: 400; --big-w: 400; --h-ls: -.01em;
  --panel: #faf9f7; --shadow-panel: 0 18px 40px -20px rgba(22,21,19,.35);
  --primary: #161513; --primary-ink: #faf9f7; --primary-border: #161513; --eye-bw: .035em; --eye-color: #161513; --pupil: #b91c1c; --btn-hover: none; }
.dark[data-skin="minimal"] { --bg: #0c0c0c; --fg: #f5f3ef; --muted: #a8a29e; --accent: #f87171; --accent-text: #fca5a5; --border: rgba(245,243,239,.22);
  --chip-bg: rgba(245,243,239,.08); --panel: #0c0c0c; --shadow-panel: 0 18px 40px -20px rgba(0,0,0,.9);
  --primary: #f5f3ef; --primary-ink: #0c0c0c; --primary-border: #f5f3ef; --eye-color: #f5f3ef; --pupil: #f87171; }
[data-skin="minimal"] .card { padding-left: 0; padding-right: 0; border-left: 0; border-right: 0; }
[data-skin="minimal"] .prose h2 { font-size: 1.7rem; }

[data-skin="brutal"] { --display: "Archivo Black", Impact, sans-serif; --body: "Space Grotesk", system-ui, sans-serif;
  --bg: #ffe14d; --fg: #111; --muted: #111; --accent: #111; --accent-text: #111; --card: #fff; --border: #111;
  --bw: 3px; --card-r: 0; --btn-r: 0; --chip-r: 0; --opt-r: 0; --chip-bg: #ffe14d; --shadow: 8px 8px 0 #111; --btn-shadow: 4px 4px 0 #111; --btn-hover: translate(-2px,-2px);
  --panel: #fff; --shadow-panel: 6px 6px 0 #111;
  --primary: #ff7ab6; --primary-ink: #111; --primary-border: #111; --h-w: 400; --big-w: 400; --h-tt: uppercase; --logo-tt: uppercase; --btn-tt: uppercase; --btn-ls: .04em;
  --big-shadow: 6px 6px 0 #ff7ab6; --eye-r: 0; --eye-bw: .09em; --eye-color: #111; --eye-bg: #b9f227; --eye-shadow: 6px 6px 0 #111; --pupil-r: 0; --pupil: #111; }
.dark[data-skin="brutal"] { --bg: #111; --fg: #fff; --muted: #f1f1f1; --accent: #ffe14d; --accent-text: #ffe14d; --card: #1d1d1d; --border: #fff;
  --chip-bg: #333; --shadow: 8px 8px 0 #ffe14d; --btn-shadow: 4px 4px 0 #ffe14d; --panel: #1d1d1d; --shadow-panel: 6px 6px 0 #ffe14d;
  --primary: #ffe14d; --primary-ink: #111; --primary-border: #fff; --big-shadow: 6px 6px 0 #ff7ab6; --eye-color: #fff; --eye-shadow: 6px 6px 0 #ffe14d; }
[data-skin="brutal"] .card { transform: rotate(-.6deg); }
[data-skin="brutal"] .page .card { transform: none; }

[data-skin="scrolly"] { --display: Outfit, Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
  --bg: #f6f7f9; --fg: #0b1220; --muted: #475569; --accent: #d97706; --accent-text: #92400e; --card: #fff; --border: #e2e8f0;
  --bw: 1px; --card-r: 1.25rem; --btn-r: 999px; --chip-bg: #eef2f7; --shadow: 0 20px 50px -30px rgba(11,18,32,.35);
  --panel: #fff; --shadow-panel: 0 24px 50px -24px rgba(11,18,32,.35);
  --primary: #fbbf24; --primary-ink: #060910; --h-w: 300; --big-w: 200; --h-ls: -.02em;
  --big-fill: linear-gradient(90deg, #d97706, #0d9488); --big-clip: text; --big-text-fill: transparent; --eye-bw: .06em; --eye-color: #0d9488; --pupil: #d97706; }
.dark[data-skin="scrolly"] { --bg: #060910; --fg: #e2e8f0; --muted: #94a3b8; --accent: #fbbf24; --accent-text: #fcd34d; --card: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.09); --chip-bg: rgba(255,255,255,.07); --shadow: none; --panel: #0c111c; --shadow-panel: 0 24px 50px -20px rgba(0,0,0,.8);
  --big-fill: linear-gradient(90deg, #fbbf24, #2dd4bf); --eye-color: #2dd4bf; --pupil: #fbbf24; }
[data-skin="scrolly"] body::after { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 404px; max-width: 100%; background: linear-gradient(90deg, #fbbf24, #2dd4bf); }
[data-skin="scrolly"] .prose h2 { font-size: 1.5rem; }

[data-skin="hand"] { --display: Caveat, "Comic Sans MS", cursive; --body: Nunito, system-ui, sans-serif; --label-font: Kalam, cursive; --btn-font: Kalam, cursive;
  --bg: #fdfaf3; --fg: #2b2926; --muted: #5f5a52; --accent: #047857; --accent-text: #047857; --card: #fffdf7; --border: #2b2926;
  --bw: 2px; --card-r: 255px 18px 225px 18px / 18px 225px 18px 255px; --btn-r: 255px 15px 225px 15px / 15px 225px 15px 255px; --chip-r: 8px;
  --chip-bg: #f1ebdc; --shadow: 4px 5px 0 rgba(43,41,38,.85); --btn-shadow: 2px 3px 0 rgba(43,41,38,.85);
  --panel: #fffdf7; --panel-r: 18px 225px 18px 255px / 255px 18px 225px 18px; --opt-r: 12px;
  --primary: #047857; --primary-ink: #fff; --primary-border: #2b2926; --h-w: 700; --big-w: 700;
  --eye-bw: .07em; --eye-color: #2b2926; --eye-r: 54% 46% 50% 50% / 52% 48% 52% 48%; --pupil: #047857; }
.dark[data-skin="hand"] { --bg: #1b1a17; --fg: #f3efe6; --muted: #b8b2a6; --accent: #34d399; --accent-text: #6ee7b7; --card: #23211d; --border: #f3efe6;
  --chip-bg: #2e2b26; --shadow: 4px 5px 0 rgba(0,0,0,.6); --btn-shadow: 2px 3px 0 rgba(0,0,0,.6); --panel: #23211d; --primary: #34d399; --primary-ink: #1b1a17;
  --primary-border: #f3efe6; --eye-color: #f3efe6; --pupil: #34d399; }
[data-skin="hand"] .page-title { font-size: clamp(2.6rem, 6.5vw, 3.8rem); }
[data-skin="hand"] .prose h2 { font-size: 2rem; }
[data-skin="hand"] #styl-menu .ttl { font-size: 1.5rem; }

/* lišta souhlasu s cookies (logika v assets/js/consent.js) */
#cookie-lista { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 45; outline: none; }
#cookie-lista[hidden] { display: none; }
#cookie-lista .in { padding: 1.25rem; background: var(--panel); border: var(--bw) solid var(--border); border-radius: var(--panel-r, var(--card-r));
  box-shadow: var(--shadow-panel, var(--shadow)); backdrop-filter: var(--blur, none); -webkit-backdrop-filter: var(--blur, none); }
#cookie-lista .ttl { margin: 0; font-family: var(--display); font-weight: var(--h-w, 700); font-size: 1.1rem; line-height: 1.25; text-transform: var(--h-tt, none); }
#cookie-lista .tx { margin: .45rem 0 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }
#cookie-lista .tx a { color: var(--accent-text); font-weight: 600; text-underline-offset: 2px; }
#cookie-lista .st { margin: .5rem 0 0; font-size: .8rem; font-weight: 600; color: var(--accent-text); }
#cookie-lista .row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
#cookie-lista .btn { min-height: 2.75rem; padding: .55rem 1rem; }
#cookie-lista .opts { display: grid; gap: .65rem; margin-top: .9rem; padding-top: .9rem; border-top: var(--bw) solid var(--border); }
#cookie-lista .opt { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
#cookie-lista .opt input { width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
#cookie-lista .opt b { display: block; font-size: .9rem; }
#cookie-lista .opt small { display: block; font-size: .78rem; line-height: 1.5; color: var(--muted); }
#cookie-lista .more { margin-top: .8rem; padding: 0; font: 600 .85rem/1.4 var(--body); color: var(--fg); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 640px) { #cookie-lista { left: 1.25rem; right: auto; bottom: 1.25rem; width: 25rem; } }
[data-skin="minimal"] #cookie-lista .ttl { font-size: 1.5rem; }
[data-skin="hand"] #cookie-lista .ttl { font-size: 1.75rem; }
.linkbtn { padding: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--fg); }
.cookie-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.cookie-row .st { font-size: .88rem; font-weight: 600; color: var(--accent-text); }
.prose h3 { margin: 1.6rem 0 0; font-family: var(--display); font-weight: var(--h-w, 700); font-size: 1.08rem; line-height: 1.3; text-transform: var(--h-tt, none); }
[data-skin="minimal"] .prose h3 { font-size: 1.3rem; }
[data-skin="hand"] .prose h3 { font-size: 1.5rem; }
.table-wrap { margin-top: .9rem; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.prose th, .prose td { padding: .55rem .9rem .55rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.prose th { font-size: .8rem; font-weight: 700; color: var(--fg); }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
[data-skin="brutal"] .prose th, [data-skin="brutal"] .prose td { border-bottom-width: 2px; }
[data-skin="glass"]:not(.dark) .prose th, [data-skin="glass"]:not(.dark) .prose td,
[data-skin="glass"]:not(.dark) #cookie-lista .opts { border-color: rgba(15,23,42,.1); }
.prose code { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: .88em; padding: .1em .4em; border-radius: var(--chip-r, .35rem);
  background: var(--chip-bg); color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}