/* Malý starosta: měkký vzhled webu (20. 10. 2026).
   Stejný jazyk jako sciteg.com portál (css/portal-soft.css) a jako hra (Apple vrstva v app/app.css):
   klidné šedé plátno, bílé karty bez rámečku s měkkým stínem, tlačítka jako kapsle, jedna barevná
   akce, odkazy v textu podtržené. Barva zůstává oranžová značky Malého starosty.

   Načítá se jako poslední styl v <head>, takže přebíjí vložené styly stránek, a nemění obsah.
   Návrat k dřívějšímu vzhledu = smazat <link rel="stylesheet" href="/web-soft.css">.
   Kontrasty (WCAG): text #1d1d1f 15:1, tlumený #4f5f69 5,9:1 na plátně, odkaz #A13D19 5,9:1
   na plátně a 6,6:1 na bílé, bílá na tlačítku #B8461E 5,3:1. */

:root {
  --s-canvas: #f2f2f7;
  --s-card: #ffffff;
  --s-fill: rgba(120, 120, 128, 0.12);
  --s-fill-strong: rgba(120, 120, 128, 0.2);
  --s-sep: rgba(60, 60, 67, 0.12);
  --s-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
  --s-tint: #B8461E;
  --s-tint-hover: #9E3B19;
  --s-tint-soft: #FBEDE6;
  --s-ink: #1d1d1f;
  --s-muted: #4f5f69;
  --s-link: #A13D19;
  --s-field-edge: #8b929c;
  --s-glass: rgba(255, 255, 255, 0.72);
  --s-ease: cubic-bezier(0.32, 0.72, 0, 1);
  /* tokeny, které čtou vložené styly stránek */
  --bg: var(--s-canvas);
  --card: var(--s-card);
  --line: var(--s-sep);
  --ink: var(--s-ink);
  --muted: var(--s-muted);
  --soft: var(--s-tint-soft);
}

html body {
  background: var(--s-canvas) !important;
  color: var(--s-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Nadpis stránky zůstává zaoblený: je to hlas značky, ne text k čtení */
html body h1 { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--s-ink); }
html body h2 { color: var(--s-ink); letter-spacing: -0.01em; }
html body .lede, html body .sub, html body .muted, html body small { color: var(--s-muted); }

/* ---------- Hlavička (společná pro všechny stránky) ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--s-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 rgba(60, 60, 67, 0.14);
}
.site-head-in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.site-logo { display: inline-flex; align-items: center; gap: 8px; font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-weight: 800; font-size: 18px; color: var(--s-ink) !important; text-decoration: none !important; white-space: nowrap; }
.site-logo em { color: var(--s-tint); font-style: normal; }
.site-logo img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { margin-left: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(120, 120, 128, 0.08); overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  color: var(--s-ink) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
.site-nav a:hover { background: var(--s-fill); }
.site-nav a[aria-current="page"] { background: var(--s-card); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.site-nav a.site-play { background: var(--s-tint); color: #fff !important; font-weight: 600; }
.site-nav a.site-play:hover { background: var(--s-tint-hover); }
@media (max-width: 640px) {
  .site-head-in { flex-wrap: wrap; padding: 8px 12px; }
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav a { padding: 6px 12px; font-size: 13.5px; }
}
/* Stránky s hlavičkou nepotřebují vlastní odkaz „zpět do hry“ */
html body .site-head ~ .wrap a.zpet, html body .site-head ~ .wrap .top a.zpet { display: none; }
/* Úvod (o-hre, en/) má vlastní horní lištu: stejný vzhled jako .site-head */
html body header.top { position: sticky; top: 0; z-index: 50; padding: 10px 0;
  background: rgba(242, 242, 247, 0.92); box-shadow: 0 0 0 100vmax rgba(242, 242, 247, 0.92); clip-path: inset(0 -100vmax -1px); }
html body header.top nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(120, 120, 128, 0.08); }
html body header.top nav a { margin: 0; padding: 6px 14px; border-radius: 999px; color: var(--s-ink); font-weight: 500; font-size: 14px; }
html body header.top nav a:hover { background: var(--s-fill); color: var(--s-ink); }
html body header.top nav a:last-child { background: var(--s-tint); color: #fff; font-weight: 600; }
@media (max-width: 820px) { html body header.top nav { display: none; } }

/* ---------- Karty a plochy ---------- */
html body :is(.card, .step, .fact, .kpi, .contact, .faq details, details.card, .rec, .o, .box-card) {
  background: var(--s-card);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--s-shadow);
}
html body a.card { transition: transform 0.2s var(--s-ease), box-shadow 0.2s var(--s-ease); }
html body a.card:hover { border: 0; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.09); }
html body :is(section.alt, .alt) { background: transparent; }
html body :is(.tip, .cta, .box, .pozn, .note-box) {
  background: var(--s-tint-soft);
  border: 0;
  border-radius: 20px;
}
html body .tag { background: var(--s-fill); border: 0; color: var(--s-ink); border-radius: 999px; }

/* ---------- Tlačítka: kapsle, jedna barevná akce ---------- */
html body :is(.btn, a.btn, button.btn) {
  background: var(--s-tint) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  min-height: 44px;
  padding: 11px 22px;
  font-weight: 600;
  transition: background-color 0.2s var(--s-ease);
}
html body :is(.btn, a.btn, button.btn):hover { background: var(--s-tint-hover) !important; }
html body :is(.btn.ghost, a.btn.ghost, button.btn.ghost, .btn[style*="background:#fff"]) {
  background: var(--s-fill) !important;
  color: var(--s-ink) !important;
}
html body :is(.btn.ghost, a.btn.ghost, button.btn.ghost):hover { background: var(--s-fill-strong) !important; }
html body button:disabled, html body .btn:disabled { opacity: 0.45; }

/* ---------- Odkazy v běžném textu: podtržené (barva sama nestačí, WCAG 1.4.1) ---------- */
html body :is(p, li, td, dd, small, .lede, .sub, .muted) a:not(.btn):not(.card):not(.skryt) {
  color: var(--s-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ---------- Formuláře ---------- */
html body :is(input[type=text], input[type=email], input[type=number], input[type=date], input:not([type]), textarea, select) {
  border: 1px solid var(--s-field-edge) !important;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
html body :is(input, textarea, select):focus { outline: 3px solid rgba(184, 70, 30, 0.35); outline-offset: 1px; border-color: var(--s-tint) !important; }

/* ---------- Tabulky ---------- */
html body .wrap table { border: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--s-shadow); background: var(--s-card); }
html body .wrap :is(th, td) { border-top-color: var(--s-sep); }
html body .wrap th { background: rgba(120, 120, 128, 0.06); }

/* ---------- Režim třídy a další panely ---------- */
html body .link { background: var(--s-fill); border-radius: 12px; }
html body ol.lb li { border-top-color: var(--s-sep); }
html body .kod { color: var(--s-tint); }
html body .chips a { border: 0; background: var(--s-fill); }
html body .chips a.cur { background: var(--s-tint-soft); }

@media (prefers-reduced-motion: reduce) {
  html body a.card, html body .btn { transition: none; }
}