/* ============================================================================
   COINEE.io — aktivacni cesta (redesign 2026-09, etapa 1b)
   onboarding.html (pruvodce 01 Pristup / 02 Propojeni / 03 Stav overeni), exchange.html (volba burzy), uid.html (zadani UID)
   Predloha: source/coinee-final-design.html (#cx-onboarding: .cx-steps, .cx-choice, .cx-intro-note, .cx-progress-list, .cx-list,
   .cx-state). Stavi na design-tokens.css + coinee-ui.css. Stavy (chip) maji vzdy slovo, barva ho jen doprovazi.
   ============================================================================ */

/* odsazeni verejne verze; v ramu aplikace (body.cn-app) plati .ap-main z app-shell.css */
body:not(.cn-app) .ac-main { padding: 26px 0 48px; }
.ac-col { width: 100%; max-width: 670px; margin: 0 auto; }
.ac-col--wide { max-width: 860px; }

/* kroky pruvodce: skutecna tlacitka, aktivni = zlata linka + aria-current */
.ac-steps { display: flex; gap: 10px; margin: 0 0 24px; }
.ac-steps button { flex: 1; min-width: 0; min-height: 44px; padding: 12px 8px; border: 0; border-bottom: 2px solid var(--cn-line); background: none; color: var(--cn-muted); font-size: var(--cn-fs-small); text-align: left; cursor: pointer; }
.ac-steps button:hover:not(:disabled) { color: var(--cn-text); }
.ac-steps button[aria-current="step"] { border-bottom-color: var(--cn-gold); color: var(--cn-text); }
.ac-steps button:disabled { cursor: not-allowed; opacity: .6; }
.ac-steps .ac-step-no { font-variant-numeric: tabular-nums; }

.ac-col h1 { margin: 12px 0 10px; font-size: 29px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; }
.ac-lead { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: var(--cn-muted); }
.ac-section-title { margin: 22px 0 10px; font-size: var(--cn-fs-h3); font-weight: 600; }

/* volba burzy (karta = tlacitko s aria-pressed) */
.ac-choice { display: block; width: 100%; margin: 11px 0; padding: 15px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); background: var(--cn-panel); color: var(--cn-text); font-size: var(--cn-fs-body); font-weight: 600; text-align: left; cursor: pointer; }
.ac-choice:hover { border-color: var(--cn-field-line); }
.ac-choice[aria-pressed="true"] { border-color: var(--cn-gold); box-shadow: inset 0 0 0 1px var(--cn-gold); }
.ac-choice small { display: block; margin-top: 5px; font-size: var(--cn-fs-small); font-weight: 400; color: var(--cn-muted); line-height: 1.55; }
.ac-choice .ac-tag { margin-left: 8px; vertical-align: 1px; }
.ac-tag { display: inline-block; padding: 2px 7px; border-radius: var(--cn-r-sm); background: var(--cn-gold-bg); color: var(--cn-gold); font-size: var(--cn-fs-min); font-weight: 600; letter-spacing: .3px; }

/* situace: skupina prepinacu (radio), zadna predvolba — clovek musi vybrat sam */
.ac-situation { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.ac-situation legend { margin-bottom: 8px; padding: 0; font-size: var(--cn-fs-small); color: var(--cn-muted); }
.ac-radio { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 6px 0; padding: 11px 13px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); background: var(--cn-panel); cursor: pointer; font-size: 13px; line-height: 1.45; }
.ac-radio:hover { border-color: var(--cn-field-line); }
.ac-radio input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--cn-gold); }
.ac-radio:has(input:checked) { border-color: var(--cn-gold); }
.ac-radio input:focus-visible { outline: var(--cn-focus-ring); outline-offset: 3px; }

/* navod (vlevo zlata linka) + cislovany postup */
.ac-guide { margin: 16px 0 4px; padding: 14px 16px; border-left: 2px solid var(--cn-gold); background: var(--cn-panel); font-size: 13px; line-height: 1.6; color: var(--cn-muted); }
.ac-guide > strong { display: block; margin-bottom: 6px; color: var(--cn-text); font-weight: 600; }
.ac-guide p + p { margin-top: 8px; }
.ac-guide .cn-actions { margin-top: 12px; }
.ac-progress { counter-reset: ac; display: grid; gap: 14px; margin: 12px 0 2px; }
.ac-progress > li { counter-increment: ac; position: relative; padding-left: 30px; }
.ac-progress > li::before { content: counter(ac); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--cn-raised); color: var(--cn-text); font-size: var(--cn-fs-min); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.ac-progress strong { display: block; color: var(--cn-text); font-weight: 600; }
.ac-progress p { margin: 4px 0 0; }
.ac-progress .cn-btn { margin-top: 9px; }
.ac-code { font-variant-numeric: tabular-nums; color: var(--cn-text); font-weight: 600; letter-spacing: .3px; }

.ac-requirement { margin: 16px 0 18px; font-size: var(--cn-fs-small); line-height: 1.6; color: var(--cn-muted); }
.ac-form-error { margin: -4px 0 12px; font-size: var(--cn-fs-small); color: var(--cn-red); }

/* napoveda (details) */
.ac-help { margin-top: 16px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); background: var(--cn-panel); }
.ac-help summary { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.ac-help summary::-webkit-details-marker { display: none; }
.ac-help summary::before { content: "▸"; margin-right: 8px; color: var(--cn-muted); transition: transform .15s ease; }
.ac-help[open] summary::before { transform: rotate(90deg); }
.ac-help > div { padding: 0 14px 14px; font-size: 13px; line-height: 1.65; color: var(--cn-muted); }
.ac-help > div p + p { margin-top: 8px; }

/* stav overeni: seznam radku + stavovy chip */
.ac-list { margin: 0; padding: 0; list-style: none; }
.ac-list > li { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 15px 16px; border-top: 1px solid var(--cn-line); }
.ac-list > li:first-child { border-top: 0; }
.ac-list .ac-k { font-size: 13px; font-weight: 600; }
.ac-list .ac-k small { display: block; margin-top: 3px; font-size: var(--cn-fs-min); font-weight: 400; color: var(--cn-muted); }
.ac-list .ac-v { font-size: 13px; color: var(--cn-muted); text-align: right; overflow-wrap: anywhere; }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--cn-r-sm); background: var(--cn-raised); color: var(--cn-muted); font-size: var(--cn-fs-min); font-weight: 600; white-space: nowrap; }
.ac-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ac-chip--ok { color: var(--cn-green); }
.ac-chip--wait { color: var(--cn-gold); }
.ac-chip--bad { color: var(--cn-red); }
.ac-chip--none::before { background: transparent; border: 1px solid currentColor; }
.ac-status-note { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: var(--cn-muted); }
.ac-status-note strong { color: var(--cn-text); font-weight: 600; }
.ac-status-extra { margin-top: 16px; }
.ac-status .cn-actions { margin-top: 20px; }
.ac-busy { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cn-muted); }
.ac-busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cn-line); border-top-color: var(--cn-gold); animation: ac-spin .8s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ac-busy::before { animation-duration: 3s; } }

/* volba burzy — verejna stranka (exchange.html): dve karty vedle sebe */
.ac-exchanges { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.ac-ex { display: flex; flex-direction: column; padding: 19px; }
.ac-ex h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.ac-ex .ac-ex-cond { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--cn-muted); }
.ac-ex .ac-ex-cond strong { color: var(--cn-text); font-weight: 600; }
.ac-ex .ac-progress { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--cn-muted); }
.ac-ex .ac-help { margin-top: auto; }
.ac-ex .ac-ex-spacer { flex: 1 0 12px; }
.ac-ex .ac-meta { margin-top: 12px; font-size: var(--cn-fs-min); color: var(--cn-muted); }
.ac-foot-note { margin-top: 18px; font-size: var(--cn-fs-small); line-height: 1.6; color: var(--cn-muted); }

/* prepinac burzy na uid.html (skupina radio jako tlacitka) */
.ac-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; border: 0; }
.ac-seg legend { width: 100%; margin-bottom: 7px; padding: 0; font-size: var(--cn-fs-small); color: var(--cn-muted); }
.ac-seg label { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--cn-line); border-radius: var(--cn-r-md); background: var(--cn-panel); font-size: 13px; font-weight: 600; cursor: pointer; }
.ac-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-seg label:has(input:checked) { border-color: var(--cn-gold); box-shadow: inset 0 0 0 1px var(--cn-gold); }
.ac-seg label:has(input:focus-visible) { outline: var(--cn-focus-ring); outline-offset: var(--cn-focus-offset); }

@media (max-width: 760px) {
  .ac-exchanges { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  body:not(.cn-app) .ac-main { padding: 16px 0 36px; }
  .ac-col h1 { font-size: 24px; }
  .ac-steps { gap: 6px; margin-bottom: 18px; }
  .ac-steps button { padding: 10px 4px; font-size: var(--cn-fs-min); }
  .ac-list .ac-v { text-align: left; }
  .ac-status .cn-actions .cn-btn, .ac-form .cn-btn--primary { width: 100%; }
}
@media (pointer: coarse) {
  .ac-seg label { min-height: var(--cn-touch); }
}

/* ============================================================================
   review 1. 10. 2026, bod 5 — exchange.html a uid.html nesou DVA ramy v jedne strance:
   verejnou hlavicku a paticku (.ac-pub) a ram aplikace (.ap-bar / .ap-side / .ap-foot z app-shell.css).
   Viditelny je jeden podle tridy na <body>: host = "cn ac-public", prihlaseny = "cn cn-app" (prepina activation.js frame()).
   ============================================================================ */
body.ac-public .ap-bar, body.ac-public .ap-side, body.ac-public .ap-foot,
body.ac-public > [class^="ap-"]:not(.ap-layout), body.ac-public > [class*=" ap-"]:not(.ap-layout) { display: none !important; }
body.ac-public .ap-layout { display: block; }
/* integrace review 1. 10.: host se starou stopou sezeni ma app-shell.js nacteny (html.ap-has-tabbar), ale spodni lista je skryta —
   vyska listy pro cookie pruh a plovouci prvky je proto 0 (promenna se dedi z body na vse uvnitr) */
body.ac-public { --ap-bottom: 0px; }
body.cn-app .ac-pub { display: none !important; }
/* v ramu aplikace je obsah zarovnany vlevo jako na ostatnich strankach (zadne vystredeni verejne stranky) */
body.cn-app .ac-main > .cn-wrap { max-width: none; margin: 0; padding: 0; }
body.cn-app .ac-col { margin: 0; }
/* prihlaseny (stopa sezeni): volba burzy / formular se ukaze az po odpovedi /api/user/me, at neproblikne pred stavem "Mas aktivovano" */
body.ac-wait [data-ac-wait] { visibility: hidden; }

/* stav "Mas aktivovano" (activation.js renderActive) */
.ac-active h1, .ac-active h2 { margin: 12px 0 10px; }
.ac-list .ac-v--strong { color: var(--cn-text); font-weight: 600; }
.ac-active .ac-help { margin-top: 20px; }