/* Průvodce majitele — textové kapitoly pod /kona/.
 * Navazuje na site.css (tokeny, masthead, footer) a přidává jen to, co
 * dlouhý čtený text potřebuje: užší sloupec, rámečky, kroky, navigaci. */

:root { --kona: #4c9aff; }

.guide-head { padding: 34px 0 30px; }

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
	color: var(--text-faint);
	font-size: 13.5px;
}
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs span::before { content: "›"; margin-right: 6px; }

.chapter-no {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--kona);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.guide-head h1 { font-size: clamp(26px, 4.5vw, 38px); }
.guide-head .lede { font-size: 17px; }

/* ---------- navigace kapitol ---------- */

.chapters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.chapters a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px 7px 9px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--bg-raised);
	color: var(--text-dim);
	font-size: 13.5px;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.chapters a:hover { border-color: #34405c; color: var(--text); }
.chapters a b {
	display: inline-grid;
	place-items: center;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--line);
	color: var(--text);
	font-size: 11px;
	font-weight: 700;
}
.chapters a[aria-current="page"] {
	border-color: var(--kona);
	color: var(--text);
	background: color-mix(in srgb, var(--kona) 12%, var(--bg-raised));
}
.chapters a[aria-current="page"] b { background: var(--kona); color: #08111f; }

/* ---------- článek ---------- */

.guide { padding: 36px 0 20px; }
.guide article { max-width: 76ch; }

.guide h2 {
	margin: 44px 0 12px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	font-size: 23px;
}
.guide h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.guide h3 { margin: 28px 0 8px; font-size: 17px; }
.guide p { margin: 0 0 14px; }
.guide p, .guide li { color: #cfd6e4; }
.guide strong { color: var(--text); }
.guide ul, .guide ol { margin: 0 0 16px; padding-left: 22px; }
.guide li { margin-bottom: 6px; }
.guide li::marker { color: var(--text-faint); }
.guide kbd {
	padding: 1px 7px;
	border: 1px solid var(--line);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--bg-sunken);
	color: var(--text);
	font: 600 13px/1.5 inherit;
	font-family: inherit;
	white-space: nowrap;
}
.guide code {
	padding: 1px 6px;
	border-radius: 5px;
	background: var(--bg-sunken);
	color: var(--text);
	font-size: 14px;
}

/* Shrnutí na začátku kapitoly — pro ty, kdo chtějí jen pointu. */
.tldr {
	margin: 0 0 30px;
	padding: 18px 22px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--kona);
	border-radius: var(--radius);
	background: var(--bg-raised);
}
.tldr .t {
	display: block;
	margin-bottom: 8px;
	color: var(--kona);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin-bottom: 5px; }

/* Rámečky: tip (zelený), pozor (oranžový), fakt (modrý). */
.box {
	margin: 18px 0 22px;
	padding: 14px 18px 14px 20px;
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: 10px;
	background: var(--bg-raised);
	font-size: 15px;
}
.box p:last-child, .box ul:last-child, .box ol:last-child { margin-bottom: 0; }
.box .t {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.box.tip { border-left-color: var(--good); }
.box.tip .t { color: var(--good); }
.box.warn { border-left-color: #f0883e; }
.box.warn .t { color: #f0883e; }
.box.fact { border-left-color: var(--kona); }
.box.fact .t { color: var(--kona); }

/* Postup krok za krokem. */
.steps {
	counter-reset: step;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.steps li {
	position: relative;
	margin: 0 0 10px;
	padding: 0 0 0 42px;
}
.steps li::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0; top: 1px;
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--line);
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
}

/* Klíč–hodnota: čísla, která stojí za zapamatování. */
.kv {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1px;
	margin: 0 0 22px;
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	background: var(--line-soft);
	overflow: hidden;
}
.kv div { padding: 12px 14px; background: var(--bg-raised); }
.kv dt { color: var(--text-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.kv dd { margin: 3px 0 0; font-size: 19px; font-weight: 600; }
.kv dd small { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }

/* Tabulky v textu. */
.guide .table-scroll { margin: 0 0 22px; }
.guide table { font-size: 14px; }
.guide thead th { text-align: left; padding: 11px 14px; }
.guide tbody td, .guide tbody th { padding: 9px 14px; text-align: left; white-space: normal; vertical-align: top; }
.guide tbody th { font-weight: 600; color: var(--text); }
.guide td.num, .guide th.num { text-align: right; white-space: nowrap; }

/* Ukázky YAML. */
.guide pre {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg-sunken);
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.5;
}
.guide pre code { padding: 0; background: none; font-size: inherit; color: #d6dced; }
.guide table code { overflow-wrap: anywhere; }

/* Slovníček. */
.glossary { margin: 0; }
.glossary dt { margin-top: 18px; font-weight: 700; color: var(--text); }
.glossary dd { margin: 4px 0 0; color: #cfd6e4; }

/* Přehled kapitol na úvodní stránce. */
.chapter-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0 0 10px;
}
.chapter-card {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-raised);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, transform .15s;
}
.chapter-card:hover { border-color: var(--kona); color: inherit; transform: translateY(-1px); }
.chapter-card .n { color: var(--kona); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.chapter-card h3 { margin: 6px 0 6px; font-size: 17px; }
.chapter-card p { margin: 0; color: var(--text-dim); font-size: 14px; }

/* Předchozí / další. */
.pager {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 1fr;
	margin: 48px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
}
.pager a {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg-raised);
	color: inherit;
	text-decoration: none;
}
.pager a:hover { border-color: var(--kona); }
.pager a small { display: block; color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.pager a.next { text-align: right; }

.guide .sources-list { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--text-dim); }
.guide .sources-list li { margin-bottom: 5px; }

@media (max-width: 560px) {
	.guide thead th, .guide tbody td, .guide tbody th { padding: 8px 9px; }
	.guide h2 { font-size: 20px; }
	.pager { grid-template-columns: 1fr; }
	.pager a.next { text-align: left; }
	.kv { grid-template-columns: 1fr 1fr; }
}

/* Odškrtávací seznamy v checklistu. */
.check { list-style: none; padding-left: 0; }
.check li { position: relative; padding-left: 32px; margin-bottom: 9px; }
.check li::before {
	content: "";
	position: absolute;
	left: 4px; top: 5px;
	width: 15px; height: 15px;
	border: 2px solid var(--kona);
	border-radius: 4px;
	opacity: .8;
}