/* Registrace. Jedna karta, jedno pole, žádné rozptylování —
   klient sem přišel s jedním úmyslem a nemá se kde ztratit. */

:root {
  --ink: #14171a;
  --ink-soft: #5b656e;
  --ink-faint: #8c959d;
  --paper: #ffffff;
  --bg: #f3f4f6;
  --line: #e2e5e8;
  --brand: #1f6feb;
  --brand-dark: #1a5ec4;
  --ok: #157f4a;
  --error: #b3261e;
  --radius: 12px;
}

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

body.ob {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.ob__main { display: grid; place-items: center; min-height: 100dvh; padding: 1.5rem 1rem 3rem; }
.ob__main--wide .ob__card { max-width: 560px; }

.ob__card {
  width: 100%; max-width: 460px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 2rem;
}

.ob__brand { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin: 0 0 1rem; }
.ob__step { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 .5rem; }
.ob__step--ok { color: var(--ok); }

.ob__title { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .75rem; }
.ob__title--small { font-size: 1.5rem; }
.ob__lead { color: var(--ink-soft); margin: 0 0 1.75rem; }

.ob__alert { background: #fdecea; color: var(--error); padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; }

/* --- Formulář --- */
.ob__form { margin: 0; }
.ob__field { display: block; margin-bottom: 1.25rem; }
.ob__label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; }
.ob__optional { font-weight: 400; color: var(--ink-faint); font-size: .8rem; }
.ob__hint { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: .35rem; }

.ob__input {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.ob__input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* Nápověda musí být na první pohled poznat od vyplněné hodnoty.
   Dokud měla barvu jen o odstín světlejší, čekal klient, že už je
   pole hotové, a přešel dál — na web se pak dostal příklad místo
   jeho vlastních slov. Proto výrazně světlejší a kurzívou. */
.ob__input::placeholder {
  color: #a8b0b8;
  font-style: italic;
  opacity: 1;
}
.ob__input--ico { font-size: 1.5rem; letter-spacing: .15em; text-align: center; font-variant-numeric: tabular-nums; }

/* Blok otázek o podnikání. Orámovaný, aby bylo vidět, že patří k sobě
   a že je to jiný druh práce než vyplnit e-mail. */
.ob__fieldset {
  margin: 0 0 1.5rem; padding: 1rem 1rem .25rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-soft, transparent);
}
.ob__legend { padding: 0 .4rem; font-size: .88rem; font-weight: 600; }
.ob__hint--lead { margin: 0 0 1rem; }
.ob__textarea { resize: vertical; min-height: 4.5rem; }

.ob__domain { display: flex; gap: .5rem; }
.ob__domain .ob__input { flex: 1; min-width: 0; }
.ob__select { padding: .8rem .6rem; font: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }

.ob__btn {
  display: block; width: 100%; padding: .9rem 1.5rem;
  font: inherit; font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
}
.ob__btn:hover { background: var(--brand-dark); }
.ob__btn--big { padding: 1.1rem; font-size: 1.05rem; margin-top: .5rem; }

.ob__fineprint { text-align: center; font-size: .8rem; color: var(--ink-faint); margin: .75rem 0 0; }

.ob__points { list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); }
.ob__points li { position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: .5rem; }
.ob__points li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

/* --- Nalezená firma --- */
.ob__found { background: var(--bg); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.25rem; }
.ob__found-name { font-weight: 700; font-size: 1.1rem; margin: 0 0 .3rem; }
.ob__found-line { font-size: .88rem; color: var(--ink-soft); margin: 0 0 .15rem; }

.ob__preset { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.5rem; }
.ob__preset-head { margin: 0 0 .35rem; font-size: .95rem; }
.ob__preset-note { margin: 0 0 .75rem; font-size: .85rem; color: var(--ink-soft); }
.ob__chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ob__chips li { font-size: .78rem; padding: .25rem .6rem; background: var(--bg); border-radius: 999px; color: var(--ink-soft); }
.ob__chips-more { font-style: italic; }

/* --- Hotovo --- */
.ob__card--done { text-align: center; }
.ob__url { font-size: 1.05rem; font-weight: 600; margin: 0 0 1.5rem; word-break: break-all; }
.ob__url a { color: var(--brand); text-decoration: none; }

.ob__summary { list-style: none; margin: 0 0 1.5rem; padding: 1.25rem 0; border-block: 1px solid var(--line); text-align: left; }
.ob__summary li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--ink-soft); margin-bottom: .45rem; }
.ob__summary li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.ob__summary strong { color: var(--ink); }

.ob__next { text-align: left; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.ob__next-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 .5rem; }
.ob__dev { background: #fff6e0; color: #9a6200; padding: .7rem .9rem; border-radius: var(--radius); font-family: ui-monospace, monospace; font-size: .85rem; }

@media (max-width: 480px) {
  .ob__card { padding: 1.5rem 1.25rem; border-radius: 12px; }
  .ob__title { font-size: 1.7rem; }
}

/* Výběr oboru, když ho rejstřík neupřesnil. */
/* Oprava uhodnutého oboru. Schovaná, aby nekazila hlavní cestu —
   většině lidí obor sedí a nemají co řešit. */
.ob__other { margin-top: .9rem; }
.ob__other-toggle { font-size: .85rem; color: var(--ink-soft); cursor: pointer; }
.ob__other-toggle:hover { color: var(--brand); }

.ob__choices { display: grid; gap: .4rem; margin-top: .75rem; }
.ob__choice {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .9rem; cursor: pointer; background: var(--paper);
}
.ob__choice:has(input:checked) { border-color: var(--brand); background: #f5f8ff; }
.ob__choice input { accent-color: var(--brand); }

/* Délka zkoušky, řečená hned po založení. Kdo se to dozví až
   z upomínky, připadá si napálený — a ten nezaplatí. */
.ob__trial { text-align: left; margin-top: 1.5rem; padding: 1rem 1.1rem; background: #fff8e8; border: 1px solid #f0dcae; border-radius: var(--radius); font-size: .9rem; }
/* Nadpis verzálkami: je to jediné místo na stránce, které má
   prodávat, a mezi dvěma odstavci by se jinak ztratil. */
.ob__trial-head {
  font-weight: 800;
  margin: 0 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
}
.ob__trial p { margin: 0; color: #7a5b16; }

/* --- Kroky průvodce -----------------------------------------------------
   Registrace má tři obrazovky a klient na první z nich neví, do čeho
   jde. Je to orientace, ne navigace: zpátky se chodí tlačítkem
   prohlížeče, protože krok zpět by znamenal držet rozdělaný stav. */

/* Jeden řádek, vždycky. Zalomené kroky zabraly dva řádky z první
   obrazovky a vypadalo to jako dva seznamy pod sebou. Na úzkém
   displeji se proto popisky schovají a zůstanou kolečka s čísly —
   ta se vejdou i na nejužší telefon a pořád je z nich vidět, kde
   klient je a kolik toho zbývá. */
.ob__kroky {
  display: flex; flex-wrap: nowrap; gap: .5rem;
  list-style: none; margin: 0 0 1.3rem; padding: 0;
  font-size: .78rem; color: var(--ink-faint, #7d8790);
}
.ob__kroky li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.ob__kroky li > * { display: flex; align-items: center; gap: .3rem; }
.ob__kroky li span {
  display: grid; place-items: center; flex: none;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1px solid currentColor; font-size: .74rem; font-weight: 700;
}

/* Hotový krok je tlačítko v témže formuláři — odkaz by zahodil
   rozdělaný stav a klient by začínal od IČA. */
.ob__kroky button,
.ob__kroky a {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: none;
}
@media (hover: hover) {
  .ob__kroky button:hover,
  .ob__kroky a:hover { color: var(--brand); }
  .ob__kroky button:hover span,
  .ob__kroky a:hover span { background: var(--brand); border-color: var(--brand); color: #fff; }
}

/* Popisky jen tam, kde je na ně místo. Zůstává ten u kroku, na kterém
   klient stojí — bez něj by z průvodce byla řada koleček. */
@media (max-width: 460px) {
  .ob__kroky li { font-size: 0; gap: 0; }
  .ob__kroky li span { font-size: .74rem; }
  .ob__kroky .je-tady { font-size: .78rem; gap: .3rem; }
}
.ob__kroky .je-tady { color: var(--brand); font-weight: 650; }
.ob__kroky .je-tady span { background: var(--brand); border-color: var(--brand); color: #fff; }
.ob__kroky .je-hotovo { color: var(--ink-soft, #55606b); }
.ob__kroky .je-hotovo span { background: var(--ink-soft, #55606b); border-color: var(--ink-soft, #55606b); color: #fff; }

/* Celý seznam oborů. Zavřený je to jeden řádek, otevřený plnohodnotný
   výběr — nabídka nahoře se trefí většinou, ale ne vždycky. */
.ob__vsechny { margin: 0 0 1.2rem; }
.ob__vsechny > summary {
  cursor: pointer; font-size: .9rem; color: var(--brand);
  padding: .45rem 0;
}
.ob__vsechny[open] > summary { margin-bottom: .6rem; }
.ob__vsechny select { background: #fff; }

/* Dvě akce po založení. Vedle sebe na širokém displeji, pod sebou na
   telefonu — a obě do nové záložky, ať klient neztratí odkaz do správy
   ani větu o zkušební době. */
.ob__akce { display: grid; gap: .6rem; margin: 1.2rem 0; }
.ob__btn--druhy {
  background: transparent; color: var(--ink, #12161b);
  border: 1px solid var(--line, #e1e5ea);
}
.ob__btn--druhy:hover { background: var(--muted, #f4f6f8); }

/* Text uprostřed tlačítka, ne nahoře.
   Tlačítka jsou v mřížce roztažená na stejnou výšku, ale text se
   drží u horního okraje výplně — u dvou různě vysokých tlačítek
   vedle sebe to vypadá rozbitě. Vycentruje to flex, ne padding:
   ten by se musel dopočítávat ke konkrétní výšce. */
.ob__akce .ob__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  margin-top: 0;
}

@media (min-width: 560px) {
  .ob__akce { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* --- Výběr oboru --------------------------------------------------------
   Stojí nad panelem s rozpoznaným oborem a je vidět. Dokud byl dole
   ve složeném rozbalovátku, klient ho nenašel a zůstal s oborem,
   který nedělá — a z rejstříku se obor netrefí ani v polovině
   případů. */

.ob__vyber {
  background: var(--brand-soft, #fdf1ec);
  border: 1px solid var(--brand, #b5451b);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-bottom: 1.1rem;
}
.ob__vyber .ob__label { font-weight: 700; }
.ob__select--velky { font-size: 1.02rem; padding: .6rem .7rem; background: #fff; }

/* Obor vybraný klientem se od rozpoznaného liší jen linkou, ne
   uspořádáním: je to pořád tentýž obor, na kterém web stojí. */
.ob__preset--vlastni { border-color: var(--brand, #b5451b); }

.ob__lead--small { font-size: .95rem; margin-bottom: 1.1rem; }

/* --- Štítky pod polem ---------------------------------------------------
   Nápověda v prázdném poli řekne, co tam patří, ale klient pořád kouká
   na prázdný řádek a musí začít psát. Štítek je hotové slovní spojení:
   klikne na tři a má odpověď, kterou pak opraví svými slovy.

   Bez JavaScriptu se neukážou vůbec — byla by to tlačítka, která nic
   nedělají. Proto se zapínají třídou, kterou si stránka nasadí sama. */

.ob__tipy { display: none; }
.js .ob__tipy { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }

.ob__tip {
  font: inherit;
  font-size: .82rem;
  line-height: 1.3;
  padding: .28rem .6rem;
  border: 1px dashed var(--line, #e1e5ea);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft, #55606b);
  cursor: pointer;
}
.ob__tip::before { content: '+ '; color: var(--brand, #b5451b); font-weight: 700; }

/* Chování pod myší patří do hover dotazu: na dotykovém displeji se
   `:hover` po klepnutí zasekne a vypadá to jako rozbité rozhraní. */
@media (hover: hover) {
  .ob__tip:hover { border-style: solid; border-color: var(--brand, #b5451b); color: var(--ink, #12161b); }
}

/* --- Celá adresa webu ---------------------------------------------------
   V poli je jen první půlka a zbytek v rozbalovátku vedle — klient pak
   neví, co mu vlastně vznikne, a rozdíl mezi značkami nevidí vůbec.
   Tohle je ta adresa nahlas a překresluje se při psaní. */

.ob__url {
  display: block;
  margin-bottom: .5rem;
  padding: .6rem .8rem;
  background: var(--brand-soft, #fdf1ec);
  border: 1px solid var(--brand, #b5451b);
  border-radius: 10px;
  font-size: 1rem;
  color: var(--ink-soft, #55606b);
  word-break: break-all;
}
.ob__url b { color: var(--brand, #b5451b); font-weight: 700; }

/* --- Služby s křížkem ---------------------------------------------------
   Preset jich nabízí osm až dvanáct a část z nich firma nedělá.
   Odebrat je jedním kliknutím hned je levnější než je potom hledat
   ve správě. */

.ob__chips--mazatelne li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-right: .25rem;
}
.ob__chip-x {
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 .2rem;
  color: var(--ink-faint, #7d8790);
  cursor: pointer;
  border-radius: 50%;
}
@media (hover: hover) {
  .ob__chip-x:hover { color: #b42318; background: #fdf3f2; }
}
.ob__hint--sluzby { margin-top: .5rem; }

/* --- Co dál -------------------------------------------------------------
   Dvě věci, na kterých klientovi doopravdy záleží: projít texty
   a uložit kartu. Číslovaný seznam je tu proto, že je to pořadí,
   ne výčet. */

.ob__ukoly { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .6rem; }
.ob__ukoly li { font-size: .95rem; line-height: 1.55; }
.ob__ukoly strong { display: block; }

/* Obě adresy natvrdo. Správa běží na adrese klientova webu, ne na
   naší — kdo ji nezná, nemá se kam vrátit. */
.ob__adresy {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--muted, #f4f6f8);
  border-radius: 10px;
  font-size: .92rem;
}
.ob__adresy dt { color: var(--ink-faint, #7d8790); font-size: .8rem; }
.ob__adresy dt + dd { margin: .1rem 0 .6rem; }
.ob__adresy dd:last-child { margin-bottom: 0; }
.ob__adresy a { word-break: break-all; }

/* Odbočka z kroku: „IČO nemám“ a cesta zpátky k němu.
   Tiché, ale skutečně viditelné — kdo tu možnost nenajde, se
   na prvním kroku zastaví a z registrace odejde. */
.ob__alt { margin: 1rem 0 0; text-align: center; font-size: .9rem; }
.ob__alt a { color: var(--ink-soft); }

/* Poznámka u popisku pole, ne pod ním: „nepovinné“ patří k názvu. */
.ob__label .ob__hint { display: inline; margin: 0 0 0 .35rem; font-weight: 400; }