/* =============================================================================
   WEDOS Help — designový systém
   Paleta: firemní barvy z vedos.cz. Rozvržení: Discourse.

   POZOR: ploché selektory, žádné vnořování. Nativní CSS nesting neumí skládat
   názvy tříd jako Sass (`&__prvek`) — takový zápis se tiše nepoužije.
   ========================================================================== */

/* Písmo je v šabloně, ne z Googlu.
   Hotlink na `fonts.gstatic.com` posílá IP adresu každého návštěvníka do USA
   a německé soudy to opakovaně označily za zpracování osobních údajů bez
   souhlasu. U webu hostingové firmy je to obzvlášť špatná vizitka. Soubory
   jsou proto tady: dvě podmnožiny (latinka a latinka rozšířená kvůli
   háčkům a čárkám), variabilní řez 400–700, celkem 134 kB.

   `swap`: než se písmo stáhne, text se vykreslí systémovým — číst jde hned,
   nic se nekrčí do prázdna. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../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;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../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;
}

:root {
	--c-brand: #2962ff;
	--c-brand-dark: #0220aa;
	--c-brand-soft: #638dff;
	/* Světlý podklad pod ikonkou ve firemní modré. */
	--c-brand-bg: #e8f1ff;
	--c-accent: #3fc6ff;

	--c-ink: #1f2a3c;
	--c-ink-2: #2d3c58;
	--c-ink-soft: #4c5671;

	--c-surface: #ffffff;
	--c-surface-2: #f5f8fc;
	/* Odstín pod hlavičkou, ze kterého se pozadí rozplývá. */
	--c-bg-top: #dbe4f3;
	--c-surface-3: #e9f4ff;
	--c-line: #dbe3ee;

	--c-hero: #16304c;
	--c-hero-badge: #ffe082;
	--c-field: #ffffff;
	--c-field-ink: #1f2a3c;
	--c-danger: #b3261e;
	--c-danger-bg: #fdecea;
	/* Upozornění, které není chyba: uzavřené vlákno, čekání na schválení. */
	--c-warn: #b45309;
	--c-warn-bg: #fdf6ec;
	--c-solved: #12805c;
	--c-solved-bg: #e8f6f0;
	/* Deset procent barvy pro podbarvení celého příspěvku. */
	--c-solved-tint: #f2faf6;
	--c-private: #a53fff;
	--c-private-bg: #f6ecff;
	--c-private-tint: #faf5ff;

	--sp-1: .375rem;
	--sp-2: .75rem;
	--sp-3: 1.25rem;
	--sp-4: 2rem;
	--radius: 6px;
	--radius-lg: 10px;
	/* Šířka obsahu. 1470 px je šířka obrazovky MacBooku Air — dnes spíš
	   spodní hranice toho, na čem se web čte, ne strop. */
	--wrap: 1470px;
	--shadow: 0 1px 2px rgba(31, 42, 60, .06), 0 1px 3px rgba(31, 42, 60, .04);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--c-brand: #6e94ff;
		--c-brand-dark: #a8c0ff;
		--c-brand-soft: #4a6fd4;
		--c-brand-bg: #1d2b47;
		--c-accent: #5ed4ff;
		--c-ink: #e6ecf5;
		--c-ink-2: #f2f6fb;
		--c-ink-soft: #9aa8bd;
		--c-surface: #161d2a;
		--c-surface-2: #10161f;
		--c-bg-top: #080d15;
		--c-surface-3: #1b2940;
		--c-line: #2a3446;
		--c-hero: #0e1c2c;
		--c-field: #1b2430;
		--c-field-ink: #e6ecf5;
		--c-danger: #ff8a80;
		--c-danger-bg: #3a1d1a;
		--c-warn: #f0b26b;
		--c-warn-bg: #2e2418;
		--c-solved: #3fc99a;
		--c-solved-bg: #133029;
		--c-solved-tint: #17241f;
		--c-private: #c489ff;
		--c-private-bg: #2a1c3d;
		--c-private-tint: #1e1a2b;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4);
	}
}

:root[data-theme="dark"] {
	--c-brand: #6e94ff; --c-brand-dark: #a8c0ff; --c-brand-soft: #4a6fd4; --c-accent: #5ed4ff;
	--c-brand-bg: #1d2b47;
	--c-ink: #e6ecf5; --c-ink-2: #f2f6fb; --c-ink-soft: #9aa8bd;
	--c-surface: #161d2a; --c-surface-2: #10161f; --c-surface-3: #1b2940; --c-line: #2a3446;
	--c-bg-top: #080d15;
	--c-hero: #0e1c2c;
	--c-field: #1b2430; --c-field-ink: #e6ecf5;
	--c-danger: #ff8a80; --c-danger-bg: #3a1d1a;
	--c-warn: #f0b26b; --c-warn-bg: #2e2418;
	--c-solved: #3fc99a; --c-solved-bg: #133029; --c-private: #c489ff; --c-private-bg: #2a1c3d;
	--c-solved-tint: #17241f; --c-private-tint: #1e1a2b;
	--shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Pozadí není jedna plocha: hned pod hlavičkou je o odstín tmavší a někde
   v první obrazovce se rozplyne do klidové barvy. Přechod končí v barvě
   `--c-surface-2`, ne v průhledné — průhledná se v přechodu interpoluje přes
   průhlednou černou a uprostřed by prosvítal šedý pruh.

   `background-attachment` zůstává výchozí, tedy roluje s obsahem: přechod
   patří k začátku stránky, ne k oknu. Kdyby byl `fixed`, tmavší pruh by
   člověka doprovázel až dolů. */
body {
	margin: 0;
	background-color: var(--c-surface-2);
	background-image: linear-gradient(180deg, var(--c-bg-top) 0%, var(--c-surface-2) 100%);
	background-repeat: no-repeat;
	background-size: 100% 62vh;
	color: var(--c-ink);
	/* Inter je kreslené pro rozhraní: vysoká střední výška a otevřené tvary,
	   takže drobné písmo zůstává čitelné a „rn" nevypadá jako „m". Systémové
	   písmo za ním je záloha na první vteřinu, než se stáhne. */
	font: .9375rem/1.6 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	letter-spacing: -.003em;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--c-ink-2); line-height: 1.25; margin: 0 0 var(--sp-2); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; border-radius: 3px; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	left: 16px; top: 16px; z-index: 100;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface); border: 2px solid var(--c-brand); border-radius: var(--radius);
}

/* --- hlavička ------------------------------------------------------------ */

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
}

.site-header__top { border-bottom: 1px solid var(--c-line); }

/* Tři sloupce, ne řada: hledání pak stojí uprostřed hlavičky, ne tam,
   kam ho zrovna odsunula šířka loga. S flexem se drželo vlevo hned za
   značkou a zarovnání vypadalo náhodně.

   Postranní sloupce jsou `1fr`, takže si drží stejnou šířku bez ohledu na
   to, jestli je vpravo „Přihlásit se" nebo celé uživatelské menu. */
.site-header__row {
	display: grid; grid-template-columns: 1fr minmax(0, 40rem) 1fr;
	align-items: center; gap: var(--sp-3);
	min-height: 72px; padding-block: 10px;
}
.site-header__brand { justify-self: start; }

.site-header__brand {
	display: flex; align-items: baseline; gap: 9px;
	font-size: 1.5rem; color: var(--c-ink-2); white-space: nowrap;
}
.site-header__brand:hover { text-decoration: none; }

/* Logo dodané se šablonou je tmavě modré na průhledném podkladu. V tmavém
   režimu by zmizelo, proto se obarví na bílou — jiná varianta souboru
   k dispozici není.

   Nahrané logo se **neobarvuje**. Co si někdo nahraje v Přizpůsobit, to se
   má ukázat tak, jak to je; převrátit mu barvy naslepo by z připraveného
   loga udělalo negativ. Kdyby to v tmavém režimu zanikalo, je to na druhou
   variantu souboru, ne na filtr. */
/* Výška, ne šířka: logo se může měnit a poměr stran s ním. 40 px sedí do
   hlavičky, které po odečtení odsazení zbývá 52 px.

   Dřív to bylo 30 px a stačilo to, dokud byla značka jen „WEDOS" a slovo
   „Help" stálo vedle ní jako text. Logo, které má obě slova v sobě, je při
   téže výšce výrazně drobnější — písmo se musí vejít do stejných 30 px
   i s tím druhým slovem. */
.site-header__logo { width: auto; height: 40px; align-self: center; }

/* Na telefonu zpátky níž. Vedle loga tam stojí přepínač režimu a uživatel
   a na 40 px široké logo by je tlačilo ke kraji. */
@media (max-width: 48rem) {
	.site-header__logo { height: 30px; }
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-header__logo:not(.site-header__logo--vlastni) {
		filter: brightness(0) invert(1);
	}
}
:root[data-theme="dark"] .site-header__logo:not(.site-header__logo--vlastni) {
	filter: brightness(0) invert(1);
}

/* Dvojice nahraných log. Vypíšou se obě a přepíná se mezi nimi tady —
   JavaScriptem by logo při přepnutí režimu bliklo.

   `:not([data-theme="light"])` není navíc: kdo si v tmavém systému přepne
   šablonu na světlou, má vidět světlé logo. */
.site-header__logo--tmave { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-header__logo--svetle { display: none; }
	:root:not([data-theme="light"]) .site-header__logo--tmave { display: block; }
}

:root[data-theme="dark"] .site-header__logo--svetle { display: none; }
:root[data-theme="dark"] .site-header__logo--tmave { display: block; }

/* Na stránkách s bannerem drží prostřední sloupec prázdné místo — bez něj
   by se značka a uživatelské menu slily doprostřed. */
.site-header__spacer { display: block; }
.site-header__user {
	display: flex; align-items: center; gap: var(--sp-1);
	justify-self: end;
}

/* Formulář sám není flex — flexem je až vnitřní řádek s polem a tlačítkem.
   Našeptávač tak nemůže skončit jako zmáčknutá flex položka, kdyby na něj
   z jakéhokoliv důvodu nesedlo absolutní pozicování. */
.searchbox { position: relative; }
.searchbox__field { display: flex; align-items: center; width: 100%; }
.searchbox input[type="search"] {
	flex: 1; min-width: 0; font: inherit; color: var(--c-ink);
	border: 0; background: transparent; outline: 0;
}
.searchbox input[type="search"]::placeholder { color: var(--c-ink-soft); }
.searchbox input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Drobná podoba v hlavičce — použije se tam, kde není uvítací banner.
   Šířku určuje prostřední sloupec mřížky, ne formulář sám. */
.searchbox--bar { min-width: 0; }
.searchbox--bar .searchbox__field {
	background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.searchbox--bar .searchbox__field:focus-within { background: var(--c-surface); border-color: var(--c-brand); }
.searchbox--bar input[type="search"] { padding: 8px 10px; font-size: .9375rem; }
.searchbox--bar button {
	display: flex; align-items: center; justify-content: center;
	width: 40px; align-self: stretch; flex: 0 0 auto;
	color: #fff; background: var(--c-brand); border: 0;
	border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; cursor: pointer;
}
.searchbox--bar button:hover { background: var(--c-brand-dark); }

/* Velká podoba v uvítacím banneru. */
.searchbox--hero { width: min(46rem, 100%); margin-inline: auto; }
.searchbox--hero .searchbox__field {
	gap: 10px; padding: 5px 5px 5px 18px;
	background: var(--c-field); border-radius: 999px;
	box-shadow: 0 6px 20px rgba(9, 22, 40, .18);
}
.searchbox--hero .searchbox__icon { flex: 0 0 auto; color: var(--c-ink-soft); }
.searchbox--hero input[type="search"] { padding: 12px 0; font-size: 1.0625rem; color: var(--c-field-ink); }
.searchbox--hero input[type="search"]::placeholder { color: var(--c-ink-soft); }
.searchbox--hero button {
	flex: 0 0 auto; padding: 11px 24px;
	font: inherit; font-size: .9375rem; font-weight: 600; color: #fff;
	background: var(--c-brand); border: 0; border-radius: 999px; cursor: pointer;
}
.searchbox--hero button:hover { background: var(--c-brand-dark); }
.searchbox--hero .suggest { left: 8px; right: 8px; text-align: left; }

@media (max-width: 52rem) {
	.searchbox--hero .searchbox__field { padding-left: 14px; }
	.searchbox--hero button { padding: 10px 16px; }
}

/* --- uvítací banner -------------------------------------------------------- */

/* Banner musí stát nad výpisem, jinak se pod něj schová našeptávač.
   Nabídka visí z hledání uvnitř banneru a `.hero__inner` má kvůli fotce
   `isolation: isolate` — vlastní vrstvení tedy z banneru nevyleze a rozhoduje
   pořadí v dokumentu, ve kterém je banner první. Bez tohohle zůstaly výsledky
   pod panelem s otázkami. */
.hero { position: relative; z-index: 10; margin-bottom: var(--sp-3); }
.hero__inner {
	position: relative; isolation: isolate;
	min-height: 240px; padding: 22px 24px 20px;
	display: flex; flex-direction: column; justify-content: center;
	background: #06295f; color: #fff;
	border: 1px solid transparent; border-radius: var(--radius-lg); text-align: left;
}

/* Fotka serverovny pod textem. Přetmavení není ozdoba — na světlejších
   místech snímku by bílý nadpis nebyl k přečtení. */
/* Celá fotka, a přitom nízký banner.
   `cover` by při této výšce ukázal jen pás uprostřed a uřízl spodky racků;
   poměr snímku (2100 × 731) zase dělá při 1470 px banner 512 px vysoký, což
   je na úvodní stránku moc. `contain` u pravého okraje dělá obojí: snímek se
   zmenší celý a sedne na pravou polovinu. Levý okraj fotky nikde nevykoukne —
   leží pod nejtmavší částí přechodu (přes 90 % krytí). */
/* Zaoblení si obě vrstvy řežou samy. `overflow: hidden` na banneru by bylo
   jednodušší, jenže ten by uřízl i vysunutou nabídku našeptávače. */
.hero__obrazek { position: absolute; inset: 0; z-index: -2; display: block; border-radius: inherit; overflow: hidden; }
.hero__obrazek img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }
/* Přechod zleva podle návrhu: text sedí na tmavé části, servery zůstávají
   vidět vpravo. Bez něj by bílý nadpis na světlejších místech zanikl. */
.hero__inner::after {
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
	background: linear-gradient(90deg,
		rgba(5, 35, 78, .96) 0%, rgba(5, 35, 78, .93) 34%,
		rgba(5, 35, 78, .38) 58%, rgba(5, 35, 78, .02) 100%);
}
.hero__text { position: relative; width: min(690px, 72%); }

.hero__eyebrow {
	margin: 0 0 12px; color: #6db7ff;
	font-size: .75rem; font-weight: 800; letter-spacing: .12em;
}
.hero__temata { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.hero__temata-popisek { margin-right: 5px; font-size: .8125rem; color: rgba(255, 255, 255, .82); }
.hero__temata a {
	padding: 7px 13px; border-radius: 999px; font-size: .75rem; color: #fff;
	background: rgba(24, 107, 212, .34); border: 1px solid rgba(255, 255, 255, .08);
}
.hero__temata a:hover { background: rgba(32, 126, 242, .5); text-decoration: none; }
/* V tmavém režimu má banner skoro stejnou barvu jako pozadí, tak mu dáme obrys. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .hero__inner { border-color: var(--c-line); }
}
:root[data-theme="dark"] .hero__inner { border-color: var(--c-line); }
.hero__headline {
	margin: 0 0 8px;
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.08;
	font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.hero__subline {
	margin: 0 0 18px;
	font-size: .9375rem; color: rgba(255, 255, 255, .86);
}

@media (max-width: 52rem) {
	.hero__inner { padding: var(--sp-3) var(--sp-2); }
}

/* --- přepínač světlého a tmavého režimu ------------------------------------ */

.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; flex: 0 0 auto;
	color: var(--c-ink-soft); background: transparent;
	border: 1px solid var(--c-line); border-radius: var(--radius); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); }
.theme-toggle[hidden] { display: none; }

/* Ukazuje se ikona toho, co se stane po kliknutí. */
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
.theme-toggle[data-mode="dark"] .theme-toggle__moon { display: none; }
.theme-toggle[data-mode="dark"] .theme-toggle__sun { display: block; }

/* --- uživatelské menu ------------------------------------------------------ */

.umenu { position: relative; }
.umenu__trigger {
	display: flex; align-items: center; gap: 7px;
	padding: 3px 9px 3px 3px; border-radius: 999px;
	border: 1px solid var(--c-line); background: var(--c-surface);
	cursor: pointer; list-style: none; font-size: .875rem; color: var(--c-ink);
}
.umenu__trigger::-webkit-details-marker { display: none; }
.umenu__trigger:hover { border-color: var(--c-brand); }
.umenu__name { font-weight: 600; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu__caret {
	width: 0; height: 0; flex: 0 0 auto; color: var(--c-ink-soft);
	border-top: 4px solid currentColor; border-inline: 4px solid transparent;
}
.umenu[open] .umenu__caret { transform: rotate(180deg); }
.umenu__panel {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
	min-width: 13rem; padding: 5px;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); box-shadow: 0 6px 24px rgba(31, 42, 60, .14);
}
.umenu__item { display: block; padding: 7px 10px; border-radius: var(--radius); font-size: .875rem; color: var(--c-ink); }
.umenu__item:hover { background: var(--c-surface-3); color: var(--c-brand); text-decoration: none; }
.umenu__sep { height: 1px; margin: 5px 0; background: var(--c-line); }

/* Body v uživatelském menu. Není to položka k proklikání, jen údaj —
   proto bez hover stavu a menším písmem. */
.umenu__meta { display: block; padding: 5px 10px; font-size: .8125rem; color: var(--c-ink-soft); }

/* Tlačítko „Položit dotaz" v hlavičce. Na úzkém displeji se schová,
   jinak vytlačí uživatelské menu z okna — schovává se to až v bloku
   s ostatními pravidly pro úzké okno na konci souboru, protože `.btn`
   níž nastavuje `display` se stejnou vahou a rozhoduje pořadí. */
.site-header__ask { white-space: nowrap; }

/* --- našeptávač ------------------------------------------------------------- */

.suggest {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
	max-height: 70vh; overflow-y: auto; padding: 5px;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgba(31, 42, 60, .16);
}
.suggest__group {
	padding: 7px 10px 4px;
	font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--c-ink-soft);
}
.suggest__item {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
	padding: 7px 10px; border-radius: var(--radius); color: var(--c-ink);
}
.suggest__item:hover, .suggest__item.is-active { background: var(--c-surface-3); text-decoration: none; }
.suggest__title { font-size: .875rem; font-weight: 500; }
.suggest__meta { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; font-size: .75rem; color: var(--c-ink-soft); }
.suggest__count { font-variant-numeric: tabular-nums; }
.suggest__empty { padding: 12px 10px; font-size: .875rem; color: var(--c-ink-soft); }
.suggest__more {
	display: block; margin-top: 4px; padding: 8px 10px;
	border-top: 1px solid var(--c-line);
	font-size: .8125rem; font-weight: 600; color: var(--c-brand); text-align: center;
}
.suggest__more:hover, .suggest__more.is-active { background: var(--c-surface-3); text-decoration: none; }

/* --- tlačítka ------------------------------------------------------------ */

.btn {
	display: inline-flex; align-items: center; gap: var(--sp-1);
	padding: 8px 16px;
	font-size: .9375rem; font-weight: 600; line-height: 1.2;
	border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn--sm { padding: 5px 11px; font-size: .875rem; }
.btn--primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); color: #fff; }
.btn--ghost { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink-soft); }
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }

/* --- panel a záhlaví výpisu ------------------------------------------------ */

.panel {
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); overflow: hidden;
}

.qa-head {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	align-items: center; justify-content: space-between; margin-bottom: var(--sp-3);
}
.qa-head h1 { margin: 0; }

/* Záložky vlevo, tlačítko vpravo — jeden řádek nad výpisem. */
.qa-bar {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	align-items: center; justify-content: space-between;
	margin-bottom: var(--sp-3);
}
.qa-bar .sorts { margin-bottom: 0; }
.qa-bar .btn { white-space: nowrap; }


/* --- výpis otázek (struktura podle Discourse) ------------------------------ */

.tlist { width: 100%; border-collapse: collapse; }

.tlist thead th {
	padding: 10px 12px;
	font-size: .75rem; font-weight: 600; letter-spacing: .02em;
	color: var(--c-ink-soft); text-align: left;
	border-bottom: 1px solid var(--c-line);
}
.tlist thead th.num { text-align: center; width: 5rem; }
.tlist thead th.trow__stav { width: 52px; }
.tlist thead th.trow__aktivita { width: 11.5rem; text-align: left; }

.trow { border-bottom: 1px solid var(--c-line); }
.trow:last-child { border-bottom: 0; }
.trow:hover { background: var(--c-surface-2); }
.tlist td { padding: 14px 12px; vertical-align: middle; font-size: .875rem; }

/* Na střed jako zbytek řádku. Dřív tu bylo `vertical-align: top` s pevným
   odsazením 17 px — zbytek po starém rozvržení, kdy měl sloupec jinou výšku
   než ostatní. Text tím seděl pár pixelů nad linkou a u řádku s odznaky
   úplně jinde než u řádku bez nich. */
.trow__main { vertical-align: middle; }
/* Záměrně ne flex: fajfka a odznaky mají plynout za posledním slovem názvu,
   ne se zalamovat na vlastní řádek. */
.trow__topline { display: block; line-height: 1.3; }
/* O stupeň menší než dřív (1.0625rem). Na úvodní stránce je řádků dvacet
   a nadpisy v původní velikosti z nich dělaly seznam nadpisů, ne výpis. */
.trow__title {
	font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--c-ink-2);
}
.trow__topline .badge { margin-left: 6px; vertical-align: 1px; }
.trow__title:hover { color: var(--c-brand); text-decoration: none; }
.trow:visited .trow__title { color: var(--c-ink-soft); }
.trow__check { display: inline; margin-left: 5px; color: var(--c-solved); }
.trow__check svg { vertical-align: -2px; }

.trow__bottomline {
	display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
	margin-top: 7px; font-size: .8125rem;
}
/* `:empty` tu nestačí: prázdný `<div>` z PHP obsahuje odsazení a nové
   řádky, a to jsou textové uzly. Rozhoduje se proto v šabloně — když není
   co vypsat, div se nevykreslí vůbec. */

/* Kategorie: barevný čtvereček plus název — poznávací znamení Discourse. */
.cat { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink-soft); }
.cat:hover { color: var(--c-ink); text-decoration: none; }
.cat__name { font-weight: 500; }

.trow__tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }

.trow__posters { white-space: nowrap; width: 8.5rem; }
.trow__posters a { display: inline-block; margin-right: -4px; }
.trow__posters a:last-child { margin-right: 0; }
.avatar {
	width: var(--avatar-size, 24px); height: var(--avatar-size, 24px);
	font-size: var(--avatar-font, 11px);
	border-radius: 50%; display: block;
	border: 2px solid var(--c-surface); background: var(--c-surface-2);
}
.avatar--letter {
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 700; line-height: 1; text-transform: uppercase;
	border-color: var(--c-surface);
	position: relative; overflow: hidden; flex: none;
}
/* Fotka leží přes iniciálu. Kdo si na Gravataru nic nenahrál, dostane
   průhledný obrázek (`d=blank`) a zůstane vidět barevné kolečko. */
.avatar--letter img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	border-radius: 50%; display: block; border: 0;
}

.tlist td.num { text-align: center; white-space: nowrap; width: 5rem; }
.num__v { font-weight: 600; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.num__v--has { color: var(--c-ink); }
.trow--solved .num__v--has { color: var(--c-solved); }
.trow__age time { color: var(--c-ink-soft); font-size: .8125rem; }

/* --- odznaky --------------------------------------------------------------- */

.badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 9px; font-size: .75rem; font-weight: 600; line-height: 1.6;
	border-radius: 999px; background: var(--c-surface-3); color: var(--c-ink-soft);
	border: 1px solid transparent;
}
.badge--cat { background: transparent; border: 0; padding: 0 2px; font-weight: 500; }
.badge--cat::before {
	content: ""; width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; background: var(--c-brand);
}
.badge--cat:hover { color: var(--c-brand); text-decoration: none; }
.badge--solved { background: var(--c-solved-bg); color: var(--c-solved); }
.badge--private { background: var(--c-private-bg); color: var(--c-private); }
/* Zákaznický stupeň je jen údaj — světlý štítek. Podpora je tvrzení
   „tohle je odpověď WEDOSu" a má být vidět na první pohled. */
.badge--role { background: var(--c-brand-bg); border-color: transparent; color: var(--c-brand-dark); }
.badge--role-staff { background: var(--c-brand); color: #fff; }

.tag {
	display: inline-block; padding: 1px 7px; font-size: .75rem; color: var(--c-ink-soft);
	background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: 3px;
}
.tag:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }
.taglist { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.taglist li { list-style: none; }

/* --- detail otázky ---------------------------------------------------------- */

/* `minmax(0, 1fr)`, ne výchozí `auto`: implicitní sloupec mřížky se jinak
   roztáhne na nejmenší šířku obsahu, a tou je u příspěvku řádek s autorem,
   kategorií a tlačítky, který se nezalamuje. Vlákno pak bylo na telefonu
   přes tisíc pixelů široké a stránka se posouvala do stran. */
.qdetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }

/* Název vlákna sedí uvnitř příspěvku s otázkou, pod řádkem s autorem.
   Samostatná karta nad příspěvkem trhala název a otázku na dvě nesouvisející
   věci, i když je to jedna věc: co se ptám a jak se ptám. */
.qhead__nazev { margin: 0 0 var(--sp-2); font-size: 1.375rem; line-height: 1.3; letter-spacing: -.01em; }
.qhead__kat {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px 3px 7px; border-radius: 999px;
	background: var(--c-brand-bg); color: var(--c-brand);
	font-size: .75rem; font-weight: 600;
}
.qhead__kat:hover { text-decoration: none; background: var(--c-surface-3); }

/* Odpovědi tvoří souvislý proud oddělený linkou, ne řadu samostatných karet —
   tak to dělá Discourse a čte se to jako rozhovor, ne jako seznam. */
/* Stejný důvod jako u `.qdetail` — implicitní sloupec by se roztáhl na obsah. */
.stream { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
/* Tři sloupce: avatar, text, hlasování. Hlasování bylo dole v patičce,
   kde ze svislých šipek vznikal prázdný pruh přes celou šířku a stálo
   daleko od textu, ke kterému se vztahuje. */
.qpost {
	/* `min-width: 0` kvůli tomu, že příspěvek bývá položkou mřížky: bez něj
	   si drží šířku svého nejužšího možného obsahu a nejde zmenšit. */
	min-width: 0;
	display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sp-3);
	/* Nahoře a dole víc než po stranách: text příspěvku potřebuje odstup od
	   hrany karty, jinak vypadá nalepený na řádek s autorem. */
	padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-2);
	background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: 0;
	margin: 0;
}
/* Každá odpověď je samostatná karta s mezerou, ne slepený pruh. Slepené
   na sebe navazovaly bez pauzy a dlouhé vlákno vypadalo jako jeden blok
   textu, ve kterém se nedalo poznat, kde jedna odpověď končí. */
.qdetail > .qpost, .stream .qpost { border-radius: var(--radius-lg); }
/* Přijatá odpověď a soukromé vlákno nesou svoji barvu v celé ploše, ne jen
   v pruhu vlevo. Světlý odstín té samé barvy, ne průhlednost: průhledná barva
   se skládá s tím, co je pod ní, takže by se odstín měnil podle toho, na čem
   příspěvek zrovna leží — jinak v proudu odpovědí, jinak na samostatné kartě.
   Pevná barva vypadá vždycky stejně.

   Má to být znát, ne křičet: pruh vlevo je ten, který nese informaci. */
.qpost--accepted { background: var(--c-solved-tint); box-shadow: inset 3px 0 0 var(--c-solved); }
.qpost--private { background: var(--c-private-tint); box-shadow: inset 3px 0 0 var(--c-private); }
.qpost__hlasy { align-self: start; }
.qpost__avatar img, .qpost__avatar .avatar { width: 44px; height: 44px; }
.qpost__head {
	display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
	margin-bottom: var(--sp-2); font-size: .875rem; color: var(--c-ink-soft);
}
.qpost__tecka { color: var(--c-ink-soft); }
/* Proklik do interní administrace. Vidí ho jen podpora, tak ať neřve —
   je to nástroj, ne součást příspěvku. */
.qpost__admin {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; flex: 0 0 auto;
	color: var(--c-ink-soft); border-radius: var(--radius);
}
.qpost__admin:hover { background: var(--c-brand-bg); color: var(--c-brand); }
.qpost__nastroje { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

/* Sdílení příspěvku. Vypadá jako tlačítko, ale je to odkaz na kotvu — bez
   JavaScriptu skočí a adresa se objeví v řádku prohlížeče. */
.qpost__sdilet {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px 5px 9px; border-radius: var(--radius);
	background: var(--c-surface); border: 1px solid var(--c-line);
	color: var(--c-ink-soft); font-size: .8125rem; font-weight: 600;
}
.qpost__sdilet:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }
.qpost__sdilet .ikona { color: inherit; }
.qpost__sdilet.je-zkopirovano { border-color: var(--c-solved); color: var(--c-solved); }

/* Sledování vlákna. Zapnuté je modré a plné, vypnuté vypadá jako Sdílet
   vedle něj — je to dvojice tlačítek, ne tlačítko a odkaz. */
.qwatch { margin: 0; }
.qwatch__tlacitko {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px 5px 9px; border-radius: var(--radius);
	background: var(--c-surface); border: 1px solid var(--c-line);
	color: var(--c-ink-soft); font: inherit; font-size: .8125rem; font-weight: 600;
	cursor: pointer;
}
.qwatch__tlacitko:hover { border-color: var(--c-brand); color: var(--c-brand); }
.qwatch.je-sleduje .qwatch__tlacitko {
	background: var(--c-brand-bg); border-color: transparent; color: var(--c-brand);
}
.qwatch__pocet {
	padding: 0 5px; border-radius: 999px;
	background: var(--c-surface-2); font-size: .6875rem; font-variant-numeric: tabular-nums;
}
.qwatch.je-sleduje .qwatch__pocet { background: rgba(255, 255, 255, .55); }
.qwatch__pocet[hidden] { display: none; }

/* Vybrat jako nejlepší. Vypadá jako Sledovat vedle něj — je to dvojice
   tlačítek nad příspěvkem, ne tlačítko a odkaz. Vybraná odpověď je zelená,
   protože zelená v celé poradně znamená „vyřešeno". */
.qbest { margin: 0; }
.qbest__tlacitko {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px 5px 9px; border-radius: var(--radius);
	background: var(--c-surface); border: 1px solid var(--c-line);
	color: var(--c-ink-soft); font: inherit; font-size: .8125rem; font-weight: 600;
	cursor: pointer;
}
.qbest__tlacitko:hover { border-color: var(--c-solved); color: var(--c-solved); }
.qbest.je-vybrana .qbest__tlacitko {
	background: var(--c-solved-bg); border-color: transparent; color: var(--c-solved);
}

/* Odpovědět = napsat komentář. Ukazuje se jen tam, kde komentáře opravdu
   jdou napsat; dnes jsou vypnuté, takže nikde. */
.qpost__odpovedet {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--c-brand); font-size: .8125rem; font-weight: 600;
}
.qpost__odpovedet:hover { text-decoration: underline; }
.qpost__odpovedet .ikona { color: inherit; }
.qpost__author { font-weight: 600; color: var(--c-ink-2); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
/* Obsah od redakce si nesmí rozstrčit sloupec. WordPress dává blokovým
   obrázkům `display: table`, což se nesmršťuje podle rodiče — proto i figure. */
.prose img, .prose video, .prose iframe, .prose embed, .prose object { max-width: 100%; }
/* Obrázky a videa v textu mají stejné zaoblení jako karty kolem nich.
   `overflow: hidden` kvůli obrázku ve `<figure>` s rámečkem. */
.prose img, .prose video { height: auto; border-radius: var(--radius); }
.prose figure img, .prose figure video { border-radius: var(--radius); }
.prose .wp-block-image { border-radius: var(--radius); overflow: hidden; }
.prose figure { display: block; max-width: 100%; margin-inline: 0; }

/* WordPress dává blokovým obrázkům `display: table` selektorem
   `.wp-block-image.aligncenter` (specificita 0-2-0). Tabulkový box se nesmršťuje
   podle rodiče a automatické okraje se pak dopočítají záporně — obrázek pak
   přeteče sloupec. Musíme ho přebít vyšší specificitou (0-2-1). */
.prose figure.wp-block-image {
	display: block; max-width: 100%; margin-inline: auto;
}
.prose figure.wp-block-image img { max-width: 100%; height: auto; }
.prose figure.wp-block-image > figcaption { display: block; caption-side: initial; }
.prose figure.alignleft, .prose figure.alignright { max-width: min(50%, 20rem); }

.prose figcaption { font-size: .8125rem; color: var(--c-ink-soft); text-align: center; }
.prose table { display: block; overflow-x: auto; max-width: 100%; }
.prose { overflow-wrap: anywhere; }
/* Text otázky a odpovědi o kousek menší než zbytek stránky. Delší odpověď
   se takhle přečte na jeden pohled a řádek nemá přes sto znaků. */
.qpost .prose { font-size: .875rem; line-height: 1.6; }
.prose pre {
	overflow-x: auto; padding: var(--sp-2);
	background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875rem;
}
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
/* Mírný radius, ne plný: citace je blok v zaoblené kartě a ostré rohy
   v ní vypadaly jako vystřižený obdélník. Pruh vlevo se zaobluje s ním,
   jinak by z něj vyčuhoval roh. */
.prose blockquote {
	margin: var(--sp-2) 0; padding: var(--sp-1) var(--sp-3);
	border-inline-start: 3px solid var(--c-line); border-radius: var(--radius);
	color: var(--c-ink-soft);
}
/* Patička příspěvku: vlevo štítky, vpravo ovládání, mezi textem a jí čára.
   Bez toho štítky splývaly s poslední větou příspěvku. */
/* Stavová ikona vlevo od názvu. Nahradila fajfku schovanou za názvem —
   ve výpisu se dá stav přečíst jedním pohledem po sloupci. */
/* Ikonka doprostřed sloupce, vodorovně i svisle. Dřív se lepila vlevo
   a držela se u horního okraje s pevným odsazením — u řádku s odznakem
   pod názvem to vycházelo jinak než u řádku bez něj. */
.tlist td.trow__stav { width: 52px; padding: 14px 0; text-align: center; vertical-align: middle; }
.tstav {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 7px;
}
/* Obrysové ikonky musí být větší než plná fajfka, jinak vedle ní zaniknou —
   plná plocha nese na stejné šířce mnohem víc než obrys. Zelený čtvereček
   je proto menší než pole, ve kterém sedí: váhu mu dodává výplň, ne rozměr. */
.tstav .ikona { width: 21px; height: 21px; }
.tstav--vyreseno { width: 19px; height: 19px; border-radius: 6px; }
.tstav--vyreseno svg { width: 11px; height: 11px; }
.tstav--dotaz svg, .tstav--doporuceno svg, .tstav--soukrome svg { width: 18px; height: 18px; }
.tstav--dotaz { color: var(--c-brand); }
/* Otevřená otázka nese ikonku své kategorie. Tlumeně: je to zařazení,
   ne stav — zelená fajfka a oranžová hvězda musí zůstat vidět dřív. */
.tstav--kategorie { color: var(--c-ink-soft); }
.trow:hover .tstav--kategorie { color: var(--c-brand); }
.tstav--doporuceno { color: #d97706; }
.tstav--soukrome { color: var(--c-private); }
.tstav--vyreseno { background: var(--c-solved); color: #fff; }

/* Poslední aktivita i s tím, kdo ji způsobil. */
.tlist td.trow__aktivita {
	display: flex; align-items: center; gap: 9px;
	font-size: .75rem; color: var(--c-ink-soft);
}
.trow__aktivita-text { min-width: 0; }
.trow__aktivita time { display: block; color: var(--c-ink-2); }
.trow__aktivita small {
	display: block; margin-top: 1px; font-size: .6875rem; color: var(--c-ink-soft);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Záložky řazení jako jeden ovládací prvek, ne pět samostatných odkazů. */
.sorts {
	display: inline-flex; flex-wrap: wrap; margin: 0 0 var(--sp-3); padding: 0; list-style: none;
	width: fit-content; max-width: 100%;
	border: 1px solid var(--c-line); border-radius: 9px; overflow: hidden;
	background: var(--c-surface);
}
.sorts li { list-style: none; }
.sorts li + li a { border-left: 1px solid var(--c-line); }
.sorts a {
	display: block; padding: 10px 16px; border-radius: 0;
	font-size: .8125rem; color: var(--c-ink-2);
}
.sorts a:hover { background: var(--c-surface-3); text-decoration: none; }
.sorts a[aria-current="page"] { background: var(--c-brand); color: #fff; font-weight: 700; }
.sorts a[aria-current="page"]:hover { background: var(--c-brand-dark); }

.qpost__foot {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	align-items: center; justify-content: space-between;
	margin-top: var(--sp-3); padding-top: var(--sp-2);
	border-top: 1px solid var(--c-line);
}
.qpost__znacky { min-width: 0; }

.qpost__actions {
	display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
	margin-top: 0; margin-inline-start: auto; font-size: .875rem;
}


/* Citace v textu příspěvku má být poznat i bez okolí — samotné odsazení
   se plete s odrážkou. */
.prose blockquote { background: var(--c-surface-2); border-inline-start-color: var(--c-brand); }

.votebox { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-ink-soft); }
.votebox b { color: var(--c-ink); font-variant-numeric: tabular-nums; }

.answers-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
	margin-block: var(--sp-4) var(--sp-2);
}
/* Nad otázkou stejný nadpis jako nad odpověďmi, jen bez horní mezery —
   je to první věc na stránce. Bez něj začínala stránka kartou bez popisku
   a nad odpověďmi pak nadpis „22 odpovědí" visel jakoby odnikud. */
.answers-head--otazka { margin-block-start: 0; }
.answers-head h2 { margin: 0; font-size: 1.25rem; }
.answers-head__razeni select {
	padding: 7px 10px; font: inherit; font-size: .8125rem;
	color: var(--c-ink-2); background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--radius); cursor: pointer;
}
.answers-head__razeni select:hover { border-color: var(--c-brand); }

/* Formulář odpovědi nese stejný tvar jako karty u dotazu. */
.qodpoved { margin-top: var(--sp-3); }

/* --- hlasovací tlačítka (vykresluje Q&A plugin, my je jen srovnáme) --------- */

.ap-vote {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px; border: 1px solid var(--c-line); border-radius: 999px;
	background: var(--c-surface-2);
}
.ap-vote a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 50%;
	color: var(--c-ink-soft); font-size: 15px; line-height: 1; text-decoration: none;
}
.ap-vote a:hover { background: var(--c-surface-3); color: var(--c-brand); text-decoration: none; }
.ap-vote a.voted, .ap-vote a.active { color: var(--c-brand); background: var(--c-surface-3); }
.ap-vote .net-vote-count {
	min-width: 1.5rem; text-align: center;
	font-weight: 700; font-size: .875rem; color: var(--c-ink); font-variant-numeric: tabular-nums;
}

/* --- nabídka akcí nad příspěvkem ------------------------------------------- */

.pactions { position: relative; display: inline-block; }
.pactions__trigger {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	color: var(--c-ink-soft); background: var(--c-surface-2);
	border: 1px solid var(--c-line); border-radius: 999px;
	cursor: pointer; list-style: none;
	font-size: 15px; line-height: 1; letter-spacing: 1px;
}
.pactions__trigger::-webkit-details-marker { display: none; }
.pactions__trigger:hover { border-color: var(--c-brand); color: var(--c-brand); }
.pactions[open] .pactions__trigger { border-color: var(--c-brand); color: var(--c-brand); }

.pactions__panel {
	/* Ukotvení zprava, ne zleva. Spouštěč sedí u pravého okraje příspěvku,
	   takže panel rozbalený doprava vyjel z okna a na mobilu přidal vodorovné
	   posouvání celé stránky. */
	position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 70;
	min-width: 13.5rem; max-width: min(17rem, calc(100vw - 2 * var(--sp-3))); padding: 5px;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); box-shadow: 0 6px 24px rgba(31, 42, 60, .14);
}
.pactions__item {
	display: block; width: 100%; padding: 7px 10px;
	font: inherit; font-size: .875rem; text-align: left; color: var(--c-ink);
	background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.pactions__item:hover { background: var(--c-surface-3); color: var(--c-brand); text-decoration: none; }
.pactions__item--danger { color: var(--c-danger); }
.pactions__item--danger:hover { background: var(--c-danger-bg); color: var(--c-danger); }
.pactions__item[disabled], .pactions__item.is-busy { opacity: .55; cursor: default; }
/* Nadpis oddílu drží u kraje, položky jsou odsazené — ať je na první
   pohled jasné, na co se dá kliknout a co je jen popiska. */
.pactions__item { margin-inline-start: 6px; width: calc(100% - 6px); }

.pactions__header {
	margin: 5px 0 2px; padding: 0 10px;
	font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--c-ink-soft);
}
.pactions__sep { margin: 5px 0; border: 0; border-top: 1px solid var(--c-line); }

/* --- oznámení ---------------------------------------------------------------- */

/* Hlášku musí být vidět, že je hláška.
   Dřív měla podklad `--c-surface-3` — světle modrou, která je od pozadí
   stránky (`--c-surface-2`) o pár procent jasu, takže box splýval
   a „Uzavřené vlákno" se dalo přehlédnout. Teď stojí na bílé, má obrys
   a **barevný pruh vlevo**, který zároveň říká, o co jde. */
.zprava {
	padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
	border: 1px solid var(--c-line); border-left: 4px solid var(--c-brand);
	background: var(--c-surface);
	color: var(--c-ink-2); font-size: .9375rem;
}

/* Barva pruhu nese význam. Text zůstává čitelný — obarvovat i písmo
   znamenalo fialový text na fialovém podkladu. */
.zprava--private { border-left-color: var(--c-private); background: var(--c-private-tint); }
.zprava--closed { border-left-color: var(--c-warn); background: var(--c-warn-bg); }
.zprava--solved { border-left-color: var(--c-solved); background: var(--c-solved-tint); }
.badge--ceka { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn); }

/* --- pár slov o autorovi pod příspěvkem --------------------------------- */

/* Poslední řádek karty. Oddělený čarou, potichu — je to doplněk k příspěvku,
   ne jeho součást. */
.obio {
	display: flex; align-items: center; gap: 7px;
	margin-top: var(--sp-2); padding-top: var(--sp-2);
	border-top: 1px solid var(--c-line);
	font-size: .8125rem; color: var(--c-ink-soft);
}
.obio .ikona { flex: 0 0 auto; color: var(--c-ink-soft); }
.obio__nadpis { flex: 0 0 auto; color: var(--c-ink-2); font-weight: 600; }
/* Jeden řádek s třemi tečkami. Popisky bývají na odstavec a rozbily by kartu. */
.obio__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.obio--vic { display: block; }
.obio__shrnuti {
	display: flex; align-items: center; gap: 7px;
	cursor: pointer; list-style: none;
}
.obio__shrnuti::-webkit-details-marker { display: none; }
.obio__prepinac {
	display: inline-flex; align-items: center; gap: 4px;
	flex: 0 0 auto; margin-inline-start: auto;
	color: var(--c-brand); font-weight: 600; white-space: nowrap;
}
/* Popisek je dvakrát v HTML a přepíná se viditelnost. Do `content:` nepatří —
   text v CSS neprojde překladem. */
.obio__prepinac--mene { display: none; }
.obio--vic[open] .obio__prepinac--vic { display: none; }
.obio--vic[open] .obio__prepinac--mene { display: inline-flex; }
.obio__sipka {
	width: 0; height: 0; border: 4px solid transparent;
	border-top-color: currentColor; margin-top: 2px;
}
.obio--vic[open] .obio__sipka { transform: rotate(180deg); margin-top: -2px; }
/* Rozbalené: popisek se přestane ořezávat a pod ním se ukáže web. */
.obio--vic[open] .obio__text { overflow: visible; text-overflow: clip; white-space: normal; }
/* Web drží u pravého kraje řádku, hned před přepínačem. Vlevo je popisek,
   který se ořezává — odkaz se ořezávat nesmí, jinak by se nedal přečíst. */
.obio__web { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; margin-inline-start: auto; }
.obio__webnadpis { color: var(--c-ink-2); font-weight: 600; }
.obio__webadresa { color: var(--c-ink-2); }
/* Když je vedle sebe web i přepínač, oddělí je čárka místo mezery. */
/* `~`, ne `+`: přepínače jsou dva (více/méně) a po rozbalení se ukazuje
   ten druhý — sousední selektor by na něj nedosáhl. */
.obio__web ~ .obio__prepinac { padding-inline-start: var(--sp-2); margin-inline-start: 0; border-inline-start: 1px solid var(--c-line); }
.zprava--login { border-left-color: var(--c-brand); }

/* --- stránkování -------------------------------------------------------------- */

.pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: var(--sp-3); }
.pager .page-numbers {
	display: block; padding: 6px 12px; border: 1px solid var(--c-line); border-radius: var(--radius);
	background: var(--c-surface); color: var(--c-ink-soft); font-size: .875rem;
}
.pager .page-numbers:hover { border-color: var(--c-brand); color: var(--c-brand); text-decoration: none; }
.pager .page-numbers.current { background: var(--c-brand); border-color: var(--c-brand); color: #fff; font-weight: 600; }

/* --- rozvržení s levým panelem (Discourse) --------------------------------- */

.shell {
	display: grid;
	grid-template-columns: 14.5rem minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: start;
}

.site-main { min-width: 0; padding-block: var(--sp-4); }

/* Pod hlavičkou, ne za ní. Hlavička je vysoká 73 px včetně linky. */
.lnav { position: sticky; top: 88px; align-self: start; }
/* Stejné odsazení jako `.site-main`, ať „OTÁZKY" vlevo a „Otázka" vpravo
   sedí na jedné lince. Chvíli tu bylo o 9 px menší — to platilo, dokud
   vpravo začínala rovnou karta, jejíž horní hrana je přesně na odsazení.
   S nadpisem vpravo se to obrátilo: nadpis má nad sebou půlku prokladu
   stejně jako ten vlevo, takže se obě odsazení mají rovnat. */
.lnav__inner { display: grid; gap: var(--sp-2); padding-block: var(--sp-4); }

.lnav__sec { border: 0; }
.lnav__title {
	display: flex; align-items: center; gap: 6px;
	margin: 0 0 4px; padding: 4px 8px;
	font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--c-ink-soft);
}
summary.lnav__title { cursor: pointer; list-style: none; }
summary.lnav__title::-webkit-details-marker { display: none; }
summary.lnav__title::before {
	content: ""; width: 0; height: 0; flex: 0 0 auto;
	border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
	transition: transform .15s ease;
}
details[open] > summary.lnav__title::before { transform: rotate(90deg); }
summary.lnav__title:hover { color: var(--c-brand); }

.lnav__list { margin: 0 0 var(--sp-2); padding: 0; list-style: none; display: grid; gap: 1px; }
.lnav__list li { list-style: none; }
.lnav__link {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 8px; border-radius: var(--radius);
	font-size: .875rem; color: var(--c-ink); line-height: 1.4;
}
.lnav__ico { flex: 0 0 auto; color: var(--c-ink-soft); opacity: .85; }
.lnav__list--menu a { display: block; padding: 5px 8px; border-radius: var(--radius); font-size: .875rem; color: var(--c-ink); }
.lnav__list--menu a:hover { background: var(--c-surface-3); color: var(--c-brand); text-decoration: none; }
.lnav__list--menu .current-menu-item > a { background: var(--c-surface-3); color: var(--c-brand); font-weight: 600; }
.lnav__link:hover .lnav__ico, .lnav__link.is-active .lnav__ico { color: var(--c-brand); opacity: 1; }
.lnav__link:hover { background: var(--c-surface-3); text-decoration: none; color: var(--c-brand); }
.lnav__link.is-active { background: var(--c-surface-3); color: var(--c-brand); font-weight: 600; }
.lnav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnav__count { flex: 0 0 auto; font-size: .75rem; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
/* Ikonka kategorie. Nemá vlastní barvu — bere ji z odkazu, takže se
   v aktivní položce i v tmavém režimu obarví sama. */
.ikona { flex: 0 0 auto; display: block; color: var(--c-ink-soft); }
.lnav__link .ikona { color: var(--c-ink-soft); }
.lnav__link:hover .ikona, .lnav__link.is-active .ikona { color: currentColor; }
.cat .ikona { color: inherit; }
.lnav__tags { padding: 0 8px var(--sp-2); }


/* --- přehled kategorií a štítků --------------------------------------------- */

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--sp-2); }

.tcard {
	display: flex; align-items: stretch; overflow: hidden;
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	color: var(--c-ink);
}
.tcard:hover { border-color: var(--c-brand); text-decoration: none; }
.tcard__ikona {
	display: flex; align-items: center; justify-content: center;
	width: 3rem; flex: 0 0 auto;
	color: var(--c-brand); background: var(--c-surface-2);
	border-right: 1px solid var(--c-line);
}
.tcard__body { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); }
.tcard__name { font-weight: 600; color: var(--c-ink-2); }
.tcard:hover .tcard__name { color: var(--c-brand); }
.tcard__count { font-size: .8125rem; color: var(--c-ink-soft); }

.tagcloud { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tagcloud li { list-style: none; }
.tag--lg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: .875rem; }
.tag__count {
	padding: 0 6px; font-size: .75rem; font-variant-numeric: tabular-nums;
	background: var(--c-surface-3); border-radius: 999px; color: var(--c-ink-soft);
}

/* --- historie uživatele ------------------------------------------------------ */

.feed { margin: 0; padding: 0; list-style: none; }
.feed__item {
	display: flex; align-items: baseline; gap: var(--sp-2);
	padding: 9px 0 9px 2px;
	border-bottom: 1px solid var(--c-line);
	font-size: .9375rem;
}
.feed__item:last-child { border-bottom: 0; }
.feed__dot {
	width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
	background: var(--c-ink-soft); position: relative; top: -1px;
}
.feed__item--new_q .feed__dot { background: var(--c-brand); }
.feed__item--new_a .feed__dot { background: var(--c-accent); }
.feed__item--selected .feed__dot { background: var(--c-solved); }
.feed__body { flex: 1; min-width: 0; }
.feed__label { color: var(--c-ink-soft); }
.feed__link { margin-left: 5px; font-weight: 500; }
.feed__time { flex: 0 0 auto; font-size: .8125rem; color: var(--c-ink-soft); white-space: nowrap; }

/* --- widgety v levém panelu -------------------------------------------------
   Vzhled se drží navigace nad nimi: stejný nadpis, stejné odsazení, žádný
   rámeček. Widget má vypadat jako další oddíl panelu, ne jako cizí krabice
   vloupaná do stránky. */

.lpanel { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.lpanel__widget { font-size: .875rem; color: var(--c-ink-2); }
.lpanel__widget p { margin: 0 0 var(--sp-1); }
.lpanel__widget ul { margin: 0; padding: 0; list-style: none; }
.lpanel__widget li { padding: 3px 8px; }
.lpanel__widget a { color: var(--c-ink-2); }
.lpanel__widget a:hover { color: var(--c-brand); text-decoration: none; }
.lpanel__widget img { max-width: 100%; height: auto; border-radius: var(--radius); }
/* Formulář hledání ve widgetu ať nevyčnívá z panelu. */
.lpanel__widget input[type="search"],
.lpanel__widget input[type="text"] {
	width: 100%; padding: 7px 10px;
	background: var(--c-surface); color: var(--c-ink);
	border: 1px solid var(--c-line); border-radius: var(--radius);
}

/* --- pruh po akci ------------------------------------------------------------
   Potvrzení, že se něco stalo. Drží se nahoře přes obsah, ne v toku stránky:
   po znovunačtení je člověk odshora a tady ho hláška potká. */

.wh-pruh {
	position: fixed; top: var(--sp-3); left: 50%; z-index: 200;
	display: flex; align-items: center; gap: var(--sp-2);
	max-width: min(34rem, calc(100vw - 2 * var(--sp-3)));
	padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
	transform: translateX(-50%);
	background: var(--c-surface); color: var(--c-ink);
	border: 1px solid var(--c-line); border-left: 4px solid var(--c-solved);
	border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgba(8, 16, 32, .18);
	font-size: .9375rem;
	animation: wh-pruh-prichod .25s ease-out;
}
.wh-pruh.je-pryc { opacity: 0; transition: opacity .4s ease-out; }
.wh-pruh__zavrit {
	flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
	background: none; border: 0; border-radius: var(--radius);
	color: var(--c-ink-soft); font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.wh-pruh__zavrit:hover { background: var(--c-surface-3); color: var(--c-ink); }

@keyframes wh-pruh-prichod {
	from { opacity: 0; transform: translate(-50%, -8px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Kdo si v systému vypnul animace, nechce ani tuhle. */
@media (prefers-reduced-motion: reduce) {
	.wh-pruh { animation: none; }
	.wh-pruh.je-pryc { transition: none; }
}

/* --- rozpis bodů ------------------------------------------------------------- */

.tbody { width: 100%; border-collapse: collapse; }
.tbody td { padding: 11px var(--sp-3); border-bottom: 1px solid var(--c-line); }
.tbody tbody tr:last-child td { border-bottom: 1px solid var(--c-line); }
.tbody tfoot td { border-bottom: 0; font-weight: 700; }
.tbody__co { display: flex; align-items: center; gap: 9px; color: var(--c-ink-2); }
.tbody__co .ikona { color: var(--c-ink-soft); }
/* Výpočet je vysvětlivka, ne hlavní sdělení — drobněji a potichu. */
.tbody__vypocet {
	width: 9rem; text-align: right;
	font-size: .8125rem; color: var(--c-ink-soft); font-variant-numeric: tabular-nums;
}
.tbody__body {
	width: 6rem; text-align: right;
	font-weight: 600; color: var(--c-solved); font-variant-numeric: tabular-nums;
}
.tbody__body--minus { color: var(--c-danger); }
.tbody tfoot .tbody__body { color: var(--c-ink); font-size: 1.125rem; }

@media (max-width: 40rem) {
	.tbody__vypocet { display: none; }
}

/* --- osa aktivity ------------------------------------------------------------
   Svislá linka uprostřed, události střídavě vlevo a vpravo. Není to ozdoba:
   na ose je vidět, kdy měl člověk období a kdy pauzu, což ze seznamu stejně
   vysokých řádků nepoznáš.

   Stojí to na `nth-child(odd/even)`, takže pořadí v HTML zůstává jedno —
   čtečka i prohlížeč bez CSS čtou seznam odshora dolů jako dřív. */
.feed--osa { position: relative; display: grid; gap: var(--sp-2); padding-block: var(--sp-2); }
/* V přehledu je osa jen ukázka z osmi posledních událostí — vedle ní stojí
   ještě dva seznamy, tak ať nezabírá víc místa než ony. */
.udash .feed--osa .feed__item { padding: 7px var(--sp-2); font-size: .875rem; }
.udash .feed--osa { gap: 6px; }
.feed--osa::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
	width: 2px; margin-left: -1px; background: var(--c-line);
}
.feed--osa .feed__item {
	position: relative; width: calc(50% - var(--sp-4));
	display: block; padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
}
.feed--osa .feed__item:nth-child(odd) { margin-inline-end: auto; text-align: right; }
.feed--osa .feed__item:nth-child(even) { margin-inline-start: auto; }

/* Puntík sedí na lince, ne v kartě. */
.feed--osa .feed__dot {
	position: absolute; top: 50%; width: 11px; height: 11px;
	margin-top: -5px; border: 2px solid var(--c-surface);
}
.feed--osa .feed__item:nth-child(odd) .feed__dot { right: calc(-1 * var(--sp-4) - 5px); }
.feed--osa .feed__item:nth-child(even) .feed__dot { left: calc(-1 * var(--sp-4) - 5px); }

.feed--osa .feed__body { display: block; }
.feed--osa .feed__label { display: block; font-size: .8125rem; }
.feed--osa .feed__link { margin: 0; }
.feed--osa .feed__time { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Na úzkém okně se osa narovná doleva. Dvousloupcová karta by tu měla na text
   pět slov na řádek. */
@media (max-width: 48rem) {
	.feed--osa::before { left: 5px; }
	.feed--osa .feed__item,
	.feed--osa .feed__item:nth-child(odd),
	.feed--osa .feed__item:nth-child(even) {
		width: auto; margin-inline: var(--sp-3) 0; text-align: left;
	}
	.feed--osa .feed__item:nth-child(odd) .feed__dot,
	.feed--osa .feed__item:nth-child(even) .feed__dot { right: auto; left: calc(-1 * var(--sp-3) - 5px); }
}

/* --- rozcestník návodů ------------------------------------------------------ */

.tsection { margin-bottom: var(--sp-4); }
.tsection__head {
	display: flex; flex-wrap: wrap; gap: var(--sp-2);
	align-items: baseline; justify-content: space-between;
	margin-bottom: var(--sp-2);
}
.tsection__title { margin: 0; font-size: 1.05rem; }
.tsection__title a { color: var(--c-ink-2); }
.tsection__title a:hover { color: var(--c-brand); text-decoration: none; }
.tsection__more { font-size: .8125rem; font-weight: 600; }

/* --- uživatelé a profil ----------------------------------------------------- */

.qa-head__count { font-size: .875rem; color: var(--c-ink-soft); }

.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--sp-2); }

.ucard {
	display: grid; grid-template-columns: 48px 1fr; gap: 4px var(--sp-2);
	padding: var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	color: var(--c-ink);
}
.ucard:hover { border-color: var(--c-brand); text-decoration: none; }
.ucard__avatar { grid-row: 1 / span 2; }
.ucard__avatar .avatar { width: 48px; height: 48px; font-size: 20px; }
.ucard__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ucard__name { font-weight: 600; color: var(--c-ink-2); }
.ucard:hover .ucard__name { color: var(--c-brand); }
.ucard__stats {
	display: flex; flex-wrap: wrap; gap: 3px 12px;
	font-size: .8125rem; color: var(--c-ink-soft);
}
.ucard__stats b { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ucard__solutions b { color: var(--c-solved); }

.uhead {
	display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: var(--sp-3);
	align-items: start;
	padding: var(--sp-4);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
	margin-bottom: var(--sp-4);
}
.uhead__avatar .avatar { width: 88px; height: 88px; font-size: 36px; }
.uhead__name {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0 0 4px; font-size: 1.5rem;
}
.uhead__meta { margin: 0 0 var(--sp-2); font-size: .875rem; color: var(--c-ink-soft); }
.uhead__tecka { padding-inline: 4px; }

/* Popisek a web pod jménem: ikonka vlevo, text vedle ní. Ikonka drží nahoře,
   aby u dvouřádkového popisku neplavala uprostřed. */
.uhead__radek {
	display: flex; align-items: flex-start; gap: 9px;
	margin: 0 0 var(--sp-1); font-size: .9375rem; color: var(--c-ink-2);
}
.uhead__radek .ikona { flex: 0 0 auto; margin-top: 3px; color: var(--c-ink-soft); }
.uhead__bio { color: var(--c-ink-2); }
.uhead__bio--empty { font-size: .875rem; color: var(--c-ink-soft); }
.uhead__web { display: inline-flex; align-items: center; gap: 5px; color: var(--c-brand); font-weight: 500; }
.uhead__web .ikona { margin: 0; color: inherit; }

/* Dlaždice s čísly. Oddělené od zbytku hlavičky svislou linkou — vlevo je
   „kdo to je", vpravo „co tu udělal", a ta linka to říká beze slov. */
.ustats {
	display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0;
	padding-inline-start: var(--sp-3); border-inline-start: 1px solid var(--c-line);
}
.ustats__item {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	min-width: 6.5rem; padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface-2); border-radius: var(--radius-lg);
	text-align: center;
}
.ustats__item .ikona { color: var(--c-ink-soft); }
/* Číslo nad popiskem, ne pod ním: oko se chytá toho velkého a popisek je až
   vysvětlivka. Proto je `dd` v HTML první. */
.ustats__item dd {
	margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--c-ink);
	font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ustats__item dt { font-size: .8125rem; color: var(--c-ink-soft); }
/* Datum je delší než číslo — ve stejné velikosti by dlaždici roztáhlo. */
.ustats__item--od dd { font-size: 1.0625rem; }
.ustats__item--solved .ikona { color: var(--c-solved); }
.ustats__item--points .ikona { color: var(--c-brand); }

.usection { margin-bottom: var(--sp-4); }
.usection__title {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
	font-size: 1.05rem; margin-bottom: var(--sp-2);
}
.usection__more { font-size: .8125rem; font-weight: 500; }
.usection__lead { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); font-size: .875rem; color: var(--c-ink-soft); }

/* Záložky profilu. Odkazy, ne JavaScript — každá sekce má vlastní adresu. */
.utabs {
	display: flex; flex-wrap: wrap; gap: 2px;
	margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
	border-bottom: 1px solid var(--c-line);
}
.utabs__item {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 10px var(--sp-3); font-size: .9375rem; font-weight: 500;
	color: var(--c-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.utabs__item:hover { color: var(--c-ink); text-decoration: none; background: var(--c-surface-2); }
.utabs__item--on { color: var(--c-brand); border-bottom-color: var(--c-brand); }
.utabs__item .ikona { color: currentColor; }

@media (max-width: 48rem) {
	.uhead { grid-template-columns: 56px minmax(0, 1fr); }
	.uhead__avatar .avatar { width: 56px; height: 56px; font-size: 24px; }
	.ustats { grid-column: 1 / -1; }
	.utabs { overflow-x: auto; flex-wrap: nowrap; }
	.utabs__item { white-space: nowrap; }
}

/* --- formuláře Q&A pluginu (formulář dotazu a odpovědi) --------------------- */

.ap-form-group { margin-bottom: var(--sp-3); }
.ap-form-group > label, .ap-form-group .ap-form-label {
	display: block; margin-bottom: 5px;
	font-size: .875rem; font-weight: 600; color: var(--c-ink-2);
}

.qa-form input[type="text"], .qa-form input[type="url"], .qa-form input[type="email"],
.qa-form input[type="number"], .qa-form textarea, .qa-form select,
.ap-form-group input[type="text"], .ap-form-group input[type="url"],
.ap-form-group textarea, .ap-form-group select {
	width: 100%; padding: 9px 12px;
	font: inherit; font-size: .9375rem; color: var(--c-ink);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.ap-form-group input:focus, .ap-form-group textarea:focus, .ap-form-group select:focus {
	border-color: var(--c-brand); outline: 0; box-shadow: 0 0 0 3px rgba(41, 98, 255, .12);
}
.ap-form-group .description, .ap-form-group small {
	display: block; margin-top: 4px; font-size: .8125rem; color: var(--c-ink-soft);
}

.ap-form-group input[type="submit"], .ap-form-group button[type="submit"],
.qa-form input[type="submit"], .qa-form button[type="submit"] {
	width: auto; padding: 10px 22px;
	font-weight: 600; color: #fff; background: var(--c-brand);
	border: 1px solid var(--c-brand); border-radius: var(--radius); cursor: pointer;
}
.ap-form-group input[type="submit"]:hover, .qa-form button[type="submit"]:hover {
	background: var(--c-brand-dark); border-color: var(--c-brand-dark);
}

/* Editor od WordPressu uvnitř formuláře. */
.ap-form-group .wp-editor-container {
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.ap-form-group .mce-toolbar-grp, .ap-form-group .quicktags-toolbar {
	background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.ap-form-group .wp-editor-area { border: 0; }

.ap-form-group .error, .ap-form-group.ap-have-error input,
.ap-form-group.ap-have-error textarea { border-color: var(--c-danger); }
.ap-field-error, .ap-form-group .ap-error { margin-top: 4px; font-size: .8125rem; color: var(--c-danger); }

/* --- doporučené a TOP otázky ------------------------------------------------ */

/* Doporučená otázka je oznámení. Pruh po straně řádku ji odliší i letmým
   pohledem, což odznak vedle názvu sám nezvládne. */
.trow--featured { background: var(--c-surface-2); box-shadow: inset 3px 0 0 var(--c-brand); }
.trow--featured .trow__title { font-weight: 600; }

.badge--featured {
	display: inline-flex; gap: 4px; align-items: center;
	color: #fff; background: var(--c-brand); border-color: var(--c-brand);
}

.badge--top {
	color: var(--c-brand-dark); background: var(--c-surface-3);
	border-color: var(--c-brand-soft); font-weight: 600; letter-spacing: .02em;
}

/* --- stránka „Položit dotaz" ------------------------------------------------- */

.askgrid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--sp-4); align-items: start; }

/* Pravý sloupec u formuláře: dvě karty pod sebou, ne jeden odstavec rad.
   Odrážky i odkazy mají ikonku, protože se v nich pak dá hledat okem —
   sloupec se čte při psaní dotazu, ne před ním. */
.askgrid__tipy { display: grid; gap: var(--sp-3); }

.apanel {
	padding: var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); font-size: .875rem;
}
.apanel__nadpis {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 var(--sp-3); font-size: 1rem; color: var(--c-brand);
}
.apanel__nadpis .ikona { color: var(--c-brand); }

.apanel__rady { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.apanel__rady li { display: flex; align-items: flex-start; gap: 12px; color: var(--c-ink-2); line-height: 1.45; }
/* Plná odrážka má fajfku v barvě podkladu karty — v tmavém režimu se
   přebarví sama, protože je to `var(--c-surface)` uvnitř kresby. */
.apanel__rady .ikona { color: var(--c-brand); margin-top: 1px; }
.apanel__duraz { font-weight: 700; color: var(--c-ink); }

.apanel__pozn {
	margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line); color: var(--c-ink-soft);
}

.apanel__odkazy { margin: 0; padding: 0; list-style: none; }
.apanel__odkazy li + li { border-top: 1px solid var(--c-line); }
.apanel__odkazy a {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 0; color: var(--c-ink-2);
}
.apanel__odkazy a:hover { color: var(--c-brand); text-decoration: none; }
.apanel__popis { flex: 1; min-width: 0; }
.apanel__odkazy a > .ikona { color: var(--c-brand); }
.apanel__kolecko {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; flex: 0 0 auto;
	border-radius: 50%; background: var(--c-brand-bg); color: var(--c-brand);
}

@media (max-width: 60rem) {
	.askgrid { grid-template-columns: minmax(0, 1fr); }
	/* Na úzkém okně se hlasování přesune pod text — na tři sloupce tam
	   není místo a text by se zmáčkl na pár slov na řádek. */
	.qpost { grid-template-columns: 44px minmax(0, 1fr); }
	.qpost__hlasy { grid-column: 2; justify-self: start; }
	.qpost__hlasy .wh-hlas { flex-direction: row; align-items: center; gap: 4px; }

	/* Na mobilu jsou rady až pod formulářem — cesta k odeslání se nesmí prodlužovat. */
	.askgrid__tipy { order: 2; }
}

/* Odkaz „všechno ostatní" na konci sekce. Není to položka navigace,
   je to cesta dál — proto bez ikony a potichu. */
.lnav__link--vse { font-size: .8125rem; color: var(--c-ink-soft); padding-left: 26px; }
.lnav__link--vse:hover { color: var(--c-brand); }

/* --- zvětšování obrázků ------------------------------------------------------ */

/* Nahrazuje plugin na lightbox. Bez JavaScriptu se obrázek otevře jako soubor,
   takže tyhle styly jen doplňují to, co by se dělo i bez nich. */
.prose img.je-zvetsitelny,
.article-hero img.je-zvetsitelny { cursor: zoom-in; }
.prose img.je-zvetsitelny:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.lbox {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
	padding: var(--sp-4);
	background: rgba(8, 16, 32, .88);
}
.lbox[hidden] { display: none; }

/* Stránka pod otevřeným obrázkem nemá rolovat. */
.lbox-otevreno { overflow: hidden; }

.lbox__ramec {
	display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
	margin: 0; max-width: min(96vw, 1400px); max-height: 90vh;
}
.lbox__obraz {
	max-width: 100%; max-height: 82vh;
	object-fit: contain; border-radius: var(--radius);
	background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lbox__popis { color: #e8eefc; font-size: .875rem; text-align: center; max-width: 60ch; }
.lbox__popis[hidden] { display: none; }

.lbox__zavrit,
.lbox__krok {
	flex: 0 0 auto;
	width: 2.75rem; height: 2.75rem; padding: 0;
	font-size: 1.75rem; line-height: 1; color: #fff;
	background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%;
	cursor: pointer;
}
.lbox__zavrit:hover,
.lbox__krok:hover { background: rgba(255, 255, 255, .24); }
.lbox__zavrit { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.lbox__krok[hidden] { visibility: hidden; }

.lbox__pocet {
	position: absolute; bottom: var(--sp-3); left: 50%; transform: translateX(-50%);
	color: #b9c7e4; font-size: .8125rem; font-variant-numeric: tabular-nums;
}

@media (max-width: 48rem) {
	.lbox { padding: var(--sp-2); }
	.lbox__krok { position: absolute; bottom: var(--sp-4); }
	.lbox__krok--zpet { left: var(--sp-3); }
	.lbox__krok--vpred { right: var(--sp-3); }
	.lbox__obraz { max-height: 70vh; }
}

/* Údaje ze zákaznického účtu — jen k přečtení, ne k úpravě. */
.wh-ucet {
	margin: 0 0 var(--sp-3); padding: var(--sp-3);
	background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.wh-ucet__nadpis { margin: 0 0 var(--sp-2); font-size: .9375rem; }
.wh-ucet__seznam { margin: 0; }
.wh-ucet__radek { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 4px 0; }
.wh-ucet__radek dt { min-width: 7rem; color: var(--c-ink-soft); font-size: .875rem; }
.wh-ucet__radek dd { margin: 0; font-weight: 500; }

/* --- komentáře --------------------------------------------------------------- */

/* Komentář je poznámka pod příspěvkem, ne další příspěvek. Proto menší písmo,
   odsazení a žádný rám — jinak by v rozhovoru soupeřil s odpověďmi. */
.qcomments { margin: 0 0 var(--sp-4) var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--c-line); }
.qcomments__list { margin: 0 0 var(--sp-2); padding: 0; list-style: none; }

.qcomments__item {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
	padding: 6px 0; font-size: .875rem; border-bottom: 1px solid var(--c-line-soft, var(--c-line));
}
.qcomments__item:last-child { border-bottom: 0; }

.qcomments__author { font-weight: 600; color: var(--c-ink-2); }
.qcomments__body { flex: 1; min-width: 12rem; color: var(--c-ink); }
.qcomments__body p { margin: 0; }
.qcomments__time { color: var(--c-ink-soft); font-size: .8125rem; white-space: nowrap; }

.qcomments__smazat { margin: 0; }
.qcomments__smazat button {
	padding: 0 4px; font-size: 1rem; line-height: 1; color: var(--c-ink-soft);
	background: none; border: 0; cursor: pointer;
}
.qcomments__smazat button:hover { color: var(--c-danger); }

.wh-komentar-form { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: 6px; }
.wh-komentar-form__pole {
	flex: 1; padding: 6px 9px; font: inherit; font-size: .875rem;
	color: var(--c-ink); background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--radius); resize: vertical;
}
.wh-komentar-form__pole:focus { border-color: var(--c-brand); outline: 2px solid var(--c-brand-soft); }
.wh-komentar-form__odeslat {
	padding: 7px 14px; font: inherit; font-size: .875rem; font-weight: 600;
	color: var(--c-brand); background: var(--c-surface);
	border: 1px solid var(--c-line); border-radius: var(--radius); cursor: pointer;
}
.wh-komentar-form__odeslat:hover { border-color: var(--c-brand); background: var(--c-surface-3); }

@media (max-width: 48rem) {
	.qcomments { margin-left: 0; }
	.wh-komentar-form { flex-direction: column; }
	.wh-komentar-form__pole { width: 100%; }
}

/* --- výsledky hledání -------------------------------------------------------- */

/* Návštěvník hledá odpověď, ne vlákno. Oddíly proto pojmenováváme,
   ať je na první pohled jasné, co je návod a co diskuse. */
.sres { margin-bottom: var(--sp-4); }
.sres__title {
	display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
	margin: 0 0 var(--sp-2); font-size: 1.05rem;
}
.sres__title--otazky { margin-top: var(--sp-4); }

.badge--navod { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.badge--otazka { color: var(--c-ink-2); background: var(--c-surface-3); border-color: var(--c-line); }

.slist { margin: 0; padding: 0; list-style: none; }
.slist__item {
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.slist__item + .slist__item { margin-top: 6px; }
.slist__link { font-weight: 600; color: var(--c-ink-2); }
.slist__link:hover { color: var(--c-brand); text-decoration: none; }
.slist__excerpt { margin: 3px 0 0; font-size: .875rem; color: var(--c-ink-soft); }

/* --- formuláře pluginu wedos-help -------------------------------------------- */

/* Formuláře kreslí plugin, styl je náš. Třídy mají vlastní předponu `wh-`,
   aby se nepotkaly s ničím, co vydává WordPress. */

.wh-form { display: block; margin: 0; }

.wh-form__label {
	display: block; margin: var(--sp-3) 0 6px;
	font-weight: 600; font-size: .9375rem; color: var(--c-ink);
}

.wh-form__pole {
	width: 100%; padding: 9px 11px;
	font: inherit; color: var(--c-ink);
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius);
}
.wh-form__pole:focus {
	border-color: var(--c-brand); outline: 2px solid var(--c-brand-soft); outline-offset: 0;
}
textarea.wh-form__pole { min-height: 9rem; resize: vertical; }

.wh-form__napoveda { margin: 5px 0 0; font-size: .8125rem; color: var(--c-ink-soft); }

.wh-form__zaskrtavatko {
	display: flex; gap: 8px; align-items: center;
	margin-top: var(--sp-3); font-size: .9375rem;
}

.wh-form__chyby {
	margin: 0 0 var(--sp-3); padding: 10px 12px;
	border: 1px solid var(--c-danger); border-left-width: 3px;
	border-radius: var(--radius); background: var(--c-surface-2);
	color: var(--c-danger);
}
.wh-form__chyby p { margin: 0; }
.wh-form__chyby p + p { margin-top: 4px; }

.wh-form__odeslat {
	margin-top: var(--sp-4); padding: 10px 22px;
	font: inherit; font-weight: 600; color: #fff;
	background: var(--c-brand); border: 1px solid var(--c-brand);
	border-radius: var(--radius); cursor: pointer;
}
.wh-form__odeslat:hover { background: var(--c-brand-dark); border-color: var(--c-brand-dark); }

.wh-form__zrusit { margin-left: var(--sp-3); font-size: .9375rem; color: var(--c-ink-soft); }

/* Editor od WordPressu uvnitř našeho formuláře. */
.wh-form .wp-editor-container {
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.wh-form .mce-toolbar-grp, .wh-form .quicktags-toolbar {
	background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.wh-form .wp-editor-area { border: 0; }

/* Lišta editoru v tmavém režimu.
   Skin `lightgray` od WordPressu počítá se světlým pozadím: ikony jsou tmavé
   a sepnuté tlačítko má bílou výplň. Na tmavém podkladu z toho zbyl světlý
   znak na bílém poli — nahlášeno při ručním testu 21. 9. 2026. */
.wh-form .mce-panel, .wh-skladac .mce-panel { background: var(--c-surface-2); border-color: var(--c-line); }
.wh-form .mce-btn, .wh-skladac .mce-btn { background: transparent; }
.wh-form .mce-ico, .wh-skladac .mce-ico { color: var(--c-ink-2); }
.wh-form .mce-btn:hover .mce-ico, .wh-skladac .mce-btn:hover .mce-ico { color: var(--c-brand); }

.wh-form .mce-btn.mce-active, .wh-form .mce-btn:active,
.wh-skladac .mce-btn.mce-active, .wh-skladac .mce-btn:active {
	background: var(--c-brand-soft); border-color: var(--c-brand);
}
.wh-form .mce-btn.mce-active .mce-ico, .wh-skladac .mce-btn.mce-active .mce-ico { color: var(--c-brand-dark); }
.wh-form .mce-btn.mce-disabled .mce-ico, .wh-skladac .mce-btn.mce-disabled .mce-ico { opacity: .4; }

/* Okno pro vložení odkazu žije mimo formulář, proto bez předka. */
.mce-window, .mce-menu, .mce-floatpanel {
	background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line);
}
.mce-window .mce-window-head, .mce-window .mce-foot { background: var(--c-surface-2); border-color: var(--c-line); }
.mce-window .mce-title, .mce-window .mce-label, .mce-window .mce-checkbox .mce-label { color: var(--c-ink); }
.mce-window .mce-textbox, .mce-menu .mce-text {
	color: var(--c-ink); background: var(--c-surface); border-color: var(--c-line);
}
.mce-window .mce-btn { background: var(--c-surface-2); border-color: var(--c-line); }
.mce-window .mce-btn button { color: var(--c-ink); }
.mce-window .mce-primary { background: var(--c-brand); border-color: var(--c-brand); }
.mce-window .mce-primary button { color: #fff; }
.mce-menu .mce-menu-item:hover, .mce-menu .mce-menu-item.mce-selected { background: var(--c-surface-3); }

/* Vkládání odkazu. Tohle **není** okno TinyMCE — je to vlastní kus HTML
   z wp-includes (`#wp-link-wrap`) a nese si světlé barvy z administrace.
   V tmavém režimu z něj zbyl bílý obdélník, do kterého naše barva písma
   psala skoro bílým — nahlášeno z provozu 23. 9. 2026.

   Proměnné, ne pevné barvy: ve světlém režimu vyjde stejný dialog jako dřív. */
/* `!important` tu není z lenosti: `wp-includes/css/editor.css` se načítá
   až za naším stylem a má stejnou váhu selektoru, takže by bílé pozadí
   vyhrálo pořadím. Stejný důvod jako u lišty editoru níž. */
#wp-link-backdrop { background: rgba(8, 12, 18, .6) !important; }
#wp-link-wrap {
	background: var(--c-surface) !important; color: var(--c-ink);
	border: 1px solid var(--c-line); box-shadow: 0 10px 40px rgba(8, 12, 18, .35);
}
#wp-link-wrap .link-target, #wp-link-wrap #link-selector, #wp-link-wrap .submitbox { border-color: var(--c-line); }
#wp-link-wrap .submitbox { background: var(--c-surface-2); }
#wp-link-wrap label, #wp-link-wrap label span, #wp-link-wrap .link-target label { color: var(--c-ink-2); }
#wp-link-wrap .howto, #wp-link-wrap .query-notice, #wp-link-wrap .item-info { color: var(--c-ink-soft); }
#wp-link-wrap input[type="text"], #wp-link-wrap input[type="search"] {
	background: var(--c-surface); color: var(--c-ink);
	border: 1px solid var(--c-line); border-radius: var(--radius);
}
#wp-link-wrap .query-results { background: var(--c-surface) !important; border-color: var(--c-line); }
#wp-link-wrap .submitbox { background: var(--c-surface-2) !important; }
#wp-link-wrap .query-results li { color: var(--c-ink-2); border-color: var(--c-line); }
#wp-link-wrap .query-results li:hover, #wp-link-wrap .query-results li.selected {
	background: var(--c-surface-3); color: var(--c-ink);
}

/* Malý panel, který vyskočí rovnou nad označeným textem. Vejde se do něj
   jen políčko s adresou — a právě to bylo v tmavém režimu bílé na bílém. */
.mce-inline-toolbar-grp,
.mce-inline-toolbar-grp .mce-panel,
.mce-inline-toolbar-grp .mce-stack-layout-item {
	background: var(--c-surface) !important; border-color: var(--c-line) !important;
	color: var(--c-ink) !important;
}
/* Ikony v plovoucí liště mají barvu ze skinu `lightgray`, tedy tmavou.
   Uvnitř formuláře se přebarvují o kus výš, sem ta pravidla nedosáhnou —
   lišta visí přímo pod `<body>`. */
.mce-inline-toolbar-grp .mce-ico, .mce-inline-toolbar-grp .mce-btn button { color: var(--c-ink-2); }
.mce-inline-toolbar-grp .mce-btn:hover .mce-ico { color: var(--c-brand); }
.wp-link-input input[type="text"], .mce-inline-toolbar-grp input[type="text"] {
	background: var(--c-surface-2); color: var(--c-ink);
	border: 1px solid var(--c-line); border-radius: var(--radius);
}
.wp-link-preview a { color: var(--c-brand); }

/* Výsledky ze znalostní báze. Je to jiný web — odznak i šipka u odkazu
   to mají říct dřív, než tam někdo klikne. */
.badge--kb {
	color: var(--c-accent); background: var(--c-surface-3);
	border-color: var(--c-brand-soft); font-weight: 600;
}
.slist__link--ext { display: inline-flex; align-items: baseline; gap: 4px; }
.suggest__ext { color: var(--c-ink-soft); font-size: .85em; }
.suggest__item--kb:hover .suggest__ext { color: var(--c-brand); }
.suggest__item--kb .badge--kb { font-size: .6875rem; padding: 1px 7px; }
.slist__ext { font-size: .8em; color: var(--c-ink-soft); }
.slist__link--ext:hover .slist__ext { color: var(--c-brand); }

/* Chyba u konkrétního pole. Doplňuje ji skript, když prohlížeč mlčí. */
.wh-form__chyba-pole {
	margin: 5px 0 0; font-size: .875rem; font-weight: 500; color: var(--c-danger);
}
.wh-form__pole--chyba, .wh-form .wh-form__pole--chyba {
	border-color: var(--c-danger);
}

/* Nabídka podobných otázek při psaní nové. */
.wh-form__podobne {
	margin-top: 8px; padding: 10px 12px;
	background: var(--c-surface-2); border: 1px solid var(--c-line);
	border-radius: var(--radius);
}
.wh-form__podobne-nadpis { margin: 0 0 6px; font-size: .8125rem; color: var(--c-ink-soft); }
.wh-form__podobne ul { margin: 0; padding-left: 1.1rem; font-size: .9375rem; }

/* --- hlasování -------------------------------------------------------------- */

/* Dvě samostatná odeslání formuláře, ne odkazy — hlasování je zápis.
   Proto se formuláře musí zbavit vlastního rozestupu a chovat se jako
   jeden svislý ovládací prvek. */

/* `overflow: hidden` je tu kvůli najetí myší: podbarvení šipky je obdélník
   se zaoblenými rohy a bez oříznutí vykukoval ven z kulatého rámečku. */
.wh-hlas {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 2px; border: 1px solid var(--c-line); border-radius: 999px;
	background: var(--c-surface-2); overflow: hidden;
}
/* Ve svém sloupci u příspěvku drží hlasování pohromadě. */
.qpost__hlasy .wh-hlas { gap: 0; }
/* Uvnitř rámečku ať šipky nemají vlastní obrys. */
.wh-hlas__tlacitko { border-radius: 999px; }
.wh-hlas__skore { padding-block: 2px; }
.wh-hlas__form { margin: 0; }

.wh-hlas__tlacitko {
	display: block; width: 2rem; height: 1.75rem; padding: 0;
	font-size: .875rem; line-height: 1; color: var(--c-ink-soft);
	background: none; border: 1px solid transparent;
	border-radius: var(--radius); cursor: pointer;
}
.wh-hlas__tlacitko:hover:not(:disabled) { background: var(--c-surface); color: var(--c-brand); }
.wh-hlas__tlacitko:disabled { opacity: .35; cursor: default; }
/* Můj hlas pozná barva šipky, ne rámeček. Rámeček uvnitř kulatého rámečku
   vypadal jako druhé tlačítko nalepené v prvním.

   Kurzor je obyčejný: druhé kliknutí na tutéž šipku nic neudělá, tak ať to
   nevypadá, že se čeká na další kliknutí. */
.wh-hlas__tlacitko--aktivni { color: var(--c-brand); border-color: transparent; cursor: default; }
.wh-hlas__tlacitko--aktivni:hover { background: none; }

.wh-hlas__skore { font-weight: 600; font-size: .9375rem; }

/* Našeptávač štítků pod polem. Kreslí ho `formular.js` z pluginu, ale
   vzhled patří sem — plugin styly na veřejnou část nepřidává. */
.wh-form__pole + .wh-stitky__nabidka { margin-top: 6px; }
.wh-stitky__nabidka {
	display: flex; flex-wrap: wrap; gap: 6px;
}
.wh-stitky__nabidka[hidden] { display: none; }
.wh-stitky__volba {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 999px;
	background: var(--c-surface-2); border: 1px solid var(--c-line);
	color: var(--c-ink-2); font: inherit; font-size: .8125rem; cursor: pointer;
}
.wh-stitky__volba:hover { border-color: var(--c-brand); color: var(--c-brand); }
.wh-stitky__volba span { font-size: .6875rem; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.wh-form__pole--chyba { border-color: var(--c-danger); }

/* Panel se smajlíky v liště editoru. Vykresluje ho náš plugin do TinyMCE,
   tedy do hlavního dokumentu — `theme.css` na něj dosáhne. */
.wh-smajlici {
	/* Pevná šířka sloupce, ne `1fr`: v panelu TinyMCE se podíl dělí z jeho
	   vlastní šířky a políčka by se srazila na pár pixelů. */
	display: grid; grid-template-columns: repeat(8, 2.75rem); gap: 5px;
	padding: 12px; width: max-content;
}
/* Znak je větší, než políčko okolo něj potřebuje — smajlík se vybírá okem,
   ne čtením, a na čtrnácti pixelech se od sebe nepoznají.

   `!important` tu není z lenosti: panel je uvnitř `.mce-floatpanel` a skin
   TinyMCE se načítá až po `theme.css`, takže při stejné váze vyhrává on.
   Naměřeno: šířku určila mřížka, ale výška zůstala na 14 px a písmo taky —
   z políček byly proužky. */
.wh-smajlici__znak {
	display: flex; align-items: center; justify-content: center;
	width: 2.75rem !important; height: 2.75rem !important;
	border-radius: var(--radius);
	font-size: 1.75rem !important; line-height: 1 !important; text-decoration: none;
}
.wh-smajlici__znak:hover { background: var(--c-surface-2); text-decoration: none; }

.wh-hlaska {
	padding: 12px 14px; border: 1px solid var(--c-line);
	border-radius: var(--radius); background: var(--c-surface-2);
}
.wh-hlaska p { margin: 0; }
.wh-hlaska--uspech { border-color: var(--c-ok, #1a7f47); }

/* Skládací pole: lišta s nahráváním sedí na editoru, ne pod ním.
   Discourse to má stejně a je to jediný způsob, jak dát vědět, že obrázek vůbec jde vložit. */
.wh-skladac {
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: var(--c-surface); overflow: hidden;
}
.wh-skladac .wh-form__pole,
.wh-skladac textarea.wh-form__pole { border: 0; border-radius: 0; }
.wh-skladac .wh-form__pole:focus { outline-offset: -2px; }
.wh-skladac .wp-editor-container { border: 0; border-radius: 0; }

/* Přiložení obrázku. */
.wh-priloha { position: relative; border-bottom: 1px solid var(--c-line); background: var(--c-surface-2); }

.wh-priloha__listva {
	display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
	padding: 8px 10px;
}

.wh-priloha__tlacitko {
	display: inline-flex; gap: 6px; align-items: center;
	padding: 6px 12px; font-size: .875rem; font-weight: 600; color: var(--c-brand);
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius); cursor: pointer;
}
.wh-priloha__tlacitko:hover { border-color: var(--c-brand); background: var(--c-surface-3); }
.wh-priloha:focus-within .wh-priloha__tlacitko { outline: 2px solid var(--c-brand-soft); outline-offset: 1px; }

.wh-priloha__tip { font-size: .8125rem; color: var(--c-ink-soft); }
.wh-priloha__stav { margin: 0; font-size: .8125rem; color: var(--c-brand); min-height: 1.2em; margin-left: auto; }

.wh-priloha__vstup { display: block; margin: 0 10px 8px; font: inherit; font-size: .875rem; }
.wh-priloha__meze { margin: 0 10px 8px; }

/* Se zapnutým JavaScriptem syrové pole nikdo nepotřebuje — vybírá se tlačítkem. */
.wh-priloha--js .wh-priloha__vstup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Přetažení souboru nad formulář. */
.wh-form--nad .wh-skladac { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-brand-soft); }

/* --- návody (příspěvky) ----------------------------------------------------- */

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-3); }

.pcard {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--c-surface); border: 1px solid var(--c-line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.pcard__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface-2); }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); flex: 1; }
.pcard__meta {
	display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
	font-size: .8125rem; color: var(--c-ink-soft);
}
.pcard__title {
	margin: 0; font-size: 1.0625rem; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title a { color: var(--c-ink-2); }
.pcard__title a:hover { color: var(--c-brand); text-decoration: none; }
/* Perex ořezáváme na tři řádky — obsah od redakce bývá různě dlouhý
   a bez ořezu by karty v řádku měly nesmyslně rozdílnou výšku. */
.pcard__excerpt {
	margin: 0; font-size: .9375rem; color: var(--c-ink-soft);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.panel--pad { padding: var(--sp-4); }
.article-hero { margin: 0 0 var(--sp-3); }
.article-hero img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-3); }
.postnav__item {
	display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
}
.postnav__item:hover { border-color: var(--c-brand); text-decoration: none; }
.postnav__item--next { text-align: right; }
.postnav__dir { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-soft); }
.postnav__title { font-weight: 600; color: var(--c-ink-2); }

.zprava--login { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.zprava--login p { margin: 0; }

/* Výzva k přihlášení pod odpovědmi. Vypadá jako formulář odpovědi, protože
   je to totéž místo a totéž rozhodnutí — jen se do něj musí projít
   přihlášením. */
.qprihlas__text { margin: 0 0 var(--sp-3); color: var(--c-ink-soft); }

/* Tlačítka, která vykresluje plugin wedos-login. */
.wedos_login_button, .wedos_logout_button { text-decoration: none; }

/* --- patička ---------------------------------------------------------------- */

.site-footer {
	margin-top: var(--sp-4);
	background: var(--c-hero); color: rgba(255, 255, 255, .78);
	padding-block: var(--sp-4); font-size: .9375rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--c-accent); text-decoration: none; }

.site-footer__cols {
	display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-4); padding-bottom: var(--sp-3);
}
.site-footer__heading {
	margin: 0 0 var(--sp-2);
	font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff;
}
.site-footer__logo { display: inline-block; font-size: 1.0625rem; color: #fff; margin-bottom: 6px; }
.site-footer__logo b { font-weight: 800; }
.site-footer__claim { margin: 0 0 var(--sp-2); max-width: 26rem; }

.site-footer__social, .site-footer__list {
	display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
	margin: 0; padding: 0; list-style: none;
}
.site-footer__social li, .site-footer__list li { list-style: none; }
.site-footer__list { flex-direction: column; gap: 7px; font-size: .875rem; }
.site-footer__list a { color: rgba(255, 255, 255, .78); }
.site-footer__list a:hover { color: #fff; }

.site-footer__note {
	margin: 0; padding-top: var(--sp-3);
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .875rem; color: rgba(255, 255, 255, .6);
}

/* --- responzivita ------------------------------------------------------------------ */

@media (max-width: 56rem) {
	/* Jeden sloupec a panel se přeskládá pod obsah.
	   Dřív to byla zásuvka vysouvaná hamburgerem z hlavičky. Tlačítko je
	   pryč (2026-09-22) a se zásuvkou by navigace na mobilu nebyla
	   dosažitelná vůbec — proto je panel normální blok v toku stránky.
	   `order` ho pošle za obsah: nikdo nepřišel číst kategorie, přišel
	   číst otázky. */
	.shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lnav {
		position: static; order: 2;
		border-top: 1px solid var(--c-line);
	}
	.site-main { order: 1; }
	.lnav__inner { padding-block: var(--sp-3); }

	.postnav { grid-template-columns: 1fr; }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
	.site-footer__brandcol { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
	.hero__grid { grid-template-columns: 1fr; }
}

/* Hlavička na telefonu. Je to až tady schválně: `.site-header__ask` má
   stejnou váhu jako `.btn`, takže o `display` rozhoduje pořadí v souboru. */
@media (max-width: 40rem) {
	.site-header__ask { display: none; }
	/* Jméno je v menu i uvnitř; v liště z něj zbyde ikona. */
	.umenu__name { display: none; }
}

@media (max-width: 48rem) {
	/* Na úzkém okně se hledání přesune pod značku přes celou šířku —
	   na tři sloupce tam místo není. */
	/* `minmax(0, …)`, ne `auto 1fr`: sloupec mřížky se jinak nesmrskne pod
	   šířku svého obsahu, takže hlavička zůstala široká podle sebe a celá
	   stránka se dala posouvat do stran. Všechno, co drží u pravého kraje —
	   hlavně nabídka akcí nad příspěvkem — pak na telefonu končilo za oknem.
	   Hlášeno z provozu 23. 9. 2026. */
	.site-header__row {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		padding-block: var(--sp-2); min-height: 0; row-gap: var(--sp-2);
	}
	.searchbox--bar { grid-column: 1 / -1; order: 3; }
	/* Rozpěrka je na úzkém okně k ničemu a založila by prázdný řádek. */
	.site-header__spacer { display: none; }
	.site-header__user { grid-column: 2; justify-self: end; min-width: 0; }

	/* Tabulka se pod malou šířku nesmrští — na mobilu z ní děláme karty.
	   Samotný spodní rám je málo: řádky na sebe navazovaly bez mezery
	   a výpis vypadal jako jeden slepený blok. */
	.tlist, .tlist tbody { display: block; width: 100%; }
	.tlist thead { display: none; }
	.tlist tbody tr {
		display: block; margin-block: var(--sp-2); padding: var(--sp-2) 0;
		background: var(--c-surface); border: 1px solid var(--c-line);
		border-radius: var(--radius-lg);
	}
	.tlist tbody tr:first-child { margin-block-start: 0; }
	.trow { border-bottom: 1px solid var(--c-line); }
	.trow--featured { box-shadow: inset 3px 0 0 var(--c-brand); }
	.tlist td { display: block; padding: 0 12px; }
	.tlist td.num {
		display: inline-block; width: auto; text-align: left;
		font-size: .8125rem; margin-top: 6px; margin-right: 12px;
	}
	.tlist td.num::after { content: " " attr(data-label); color: var(--c-ink-soft); font-weight: 400; }

	/* Na kartě nemá stavová ikona vlastní sloupec — plave nad názvem. */
	.tlist td.trow__stav { display: inline-block; width: auto; padding: 0 0 0 12px; }
	.tlist td.trow__aktivita { padding: 8px 12px 0; }

	/* `minmax(0, 1fr)`, ne holé `1fr`: samotné `1fr` má automatické minimum
	   ve velikosti nejužšího možného obsahu, takže sloupec s textem vyrostl
	   na šířku nezalomitelného řádku s autorem a tlačítky. */
	.qpost { grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2); }
	.qpost__avatar img { width: 36px; height: 36px; }
}