/* /caste-otazky/ — Tibor 8 Oct 2026 (designs/tibor/2026-10-08). Theme tokens only; light and dark follow tokens.css. */
.stg-qa{--stg-font:var(--stg-font-stable);font-family:var(--stg-font);--stg-qa-accent:var(--stg-orange);--stg-qa-solid:var(--stg-solid);--stg-qa-solid-hover:var(--stg-solid-hover);--stg-qa-ink:var(--stg-ink);--stg-qa-muted:var(--stg-ink2);--stg-qa-line:var(--stg-line);--stg-qa-surface:var(--stg-surface);--stg-qa-soft:var(--stg-soft);--stg-qa-tint:var(--stg-tint);--stg-qa-tint-line:var(--stg-tint-line);color:var(--stg-qa-ink);padding-block:32px 72px}
.stg-qa a{color:var(--stg-qa-accent);text-underline-offset:3px}
.stg-qa__title{font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.stg-qa__intro{max-width:39em;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--stg-qa-muted);margin:0 0 28px}

/* Topics: compact links instead of three big tiles; one scrollable row on phones. */
.stg-qa__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.stg-qa__nav a{display:inline-block;padding:8px 14px;border:1px solid var(--stg-qa-line);border-radius:999px;background:var(--stg-qa-surface);color:var(--stg-qa-ink);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.stg-qa__nav a:hover,.stg-qa__nav a:focus-visible{border-color:var(--stg-qa-accent);color:var(--stg-qa-accent)}
@media(max-width:640px){.stg-qa__nav ul{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.stg-qa__nav ul::-webkit-scrollbar{display:none}}

.stg-qa__topic{margin-top:56px;scroll-margin-top:96px}
.stg-qa__topic-title{font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 8px}

/* Question */
.stg-qa__item{border-bottom:1px solid var(--stg-qa-line);scroll-margin-top:96px}
.stg-qa__item>summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer}
.stg-qa__item>summary::-webkit-details-marker{display:none}
.stg-qa__item>summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stg-qa-line);color:var(--stg-qa-accent);font-size:20px;line-height:1}
.stg-qa__item[open]>summary::after{content:"−"}
.stg-qa__item>summary:focus-visible{outline:2px solid var(--stg-qa-accent);outline-offset:4px;border-radius:4px}
.stg-qa__q{margin:0;font-size:clamp(17px,1.4vw,19px);font-weight:600;line-height:1.4}

/* Answer: readable line length and larger type. */
.stg-qa__a{display:grid;gap:10px;max-width:39em;padding:0 0 22px;font-size:17px;line-height:1.7;color:var(--stg-qa-muted)}
.stg-qa__a p,.stg-qa__a ul{margin:0}
.stg-qa__a ul{padding-left:1.2em}
.stg-qa__a li+li{margin-top:4px}
.stg-qa__a strong{color:var(--stg-qa-ink);font-weight:600}

/* The one place that explains activating and using the lock; the SMS carries the same link. */
.stg-qa__guide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:12px 0 8px;padding:18px 20px;border:1px solid var(--stg-qa-tint-line);border-radius:var(--stg-r2);background:var(--stg-qa-tint)}
.stg-qa__guide>div{flex:1 1 320px;display:grid;gap:4px}
.stg-qa__guide p{margin:0;font-size:16px;line-height:1.55;color:var(--stg-qa-muted)}
.stg-qa__guide .stg-qa__guide-title{font-size:18px;font-weight:700;color:var(--stg-qa-ink)}

/* Help and call to action */
.stg-qa__help{margin-top:56px;border:1px solid var(--stg-qa-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;background:var(--stg-qa-soft);border-radius:var(--stg-r3);padding:24px}
.stg-qa__help-title{font-size:22px;margin:0 0 6px}
.stg-qa__help p{margin:0;font-size:17px;line-height:1.6;color:var(--stg-qa-muted)}
.stg-qa__help-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.stg-qa .stg-qa__btn{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--stg-qa-solid);color:var(--stg-on-accent);font-weight:600;text-decoration:none}
.stg-qa .stg-qa__btn:hover{background:var(--stg-qa-solid-hover)}
.stg-qa .stg-qa__link{font-weight:600;text-decoration:none}
.stg-qa .stg-qa__link:hover{text-decoration:underline}
@media(prefers-reduced-motion:no-preference){html:has(.stg-qa){scroll-behavior:smooth}}