/* Vzhled podpisové appky pro kauzu BICZ — v jazyce webu bicz.elementz.legal,
   odkud sem lidé přicházejí. Načítá se jen u téhle kauzy (server vkládá
   odkaz podle ui.vzhled) a všechno je zapouzdřené pod .kauza-bicz, takže
   Wood Seeds, H2 ani ThomasLloyd se to nedotkne.

   Barvy, typografie i rozměry jsou převzaté ze sestaveného CSS webu
   (bicz-app/public/_astro/global.*.css), ne odhadnuté. Proti H2 je tmavý
   pruh světlejší (--color-ink místo ink-deep), sazba širší a tlačítka
   se při najetí zvedají — tak to má web BICZ. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600&display=swap');

html.kauza-bicz {
  /* Web je jen světlý; appka dědila color-scheme: light dark. */
  color-scheme: light;
  --bicz-papir: oklch(97.5% .004 200);
  --bicz-papir-tmavsi: oklch(94.5% .006 200);
  --bicz-inkoust: oklch(32% .052 196);
  --bicz-inkoust-tmavy: oklch(26% .05 196);
  --bicz-svetly: oklch(96% .005 200);
  --bicz-svetly-tlumeny: oklch(78% .015 200);
  --bicz-zlata: oklch(70% .11 92);
  --bicz-zlata-jasna: oklch(78% .12 92);
  --bicz-zlata-tmava: oklch(55% .1 92);
  --bicz-linka: oklch(88% .008 200);
  --bicz-text-tlumeny: oklch(45% .02 205);
  --bicz-sirka: 1152px;
  --bicz-okraj: 32px;
}

html.kauza-bicz body {
  font-family: 'Instrument Sans', Helvetica, Arial, sans-serif;
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
  line-height: 1.65;
  color: var(--bicz-inkoust);
  background: var(--bicz-papir);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------- záhlaví
   Hlavička, nadpis, perex i návratový kód jsou sourozenci. Společné pozadí
   a nulové okraje z nich udělají jeden tmavý pruh jako úvod webu. */

html.kauza-bicz header,
html.kauza-bicz h1#nadpis,
html.kauza-bicz p#uvod,
html.kauza-bicz details.lookup {
  background: var(--bicz-inkoust);
  color: var(--bicz-svetly);
  margin: 0;
  border: 0;
  border-radius: 0;
}

html.kauza-bicz header {
  max-width: none;
  padding: 16px var(--bicz-okraj);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid oklch(42% .05 196);
}
html.kauza-bicz header::after {
  content: attr(data-kauza);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--bicz-svetly-tlumeny);
}
/* Výchozí logo je tmavé a na tmavém pruhu zaniká — kauza si bere negativní
   variantu, stejnou jako web bicz.elementz.legal. */
html.kauza-bicz header img {
  height: 30px;
  content: url('/assets/elementz-logo-negative.svg');
}

/* Vnitřní šířku drží padding, aby pruh zůstal přes celou stránku. */
html.kauza-bicz header,
html.kauza-bicz h1#nadpis,
html.kauza-bicz p#uvod,
html.kauza-bicz details.lookup,
html.kauza-bicz #lhuta,
html.kauza-bicz #kroky ol,
html.kauza-bicz form#mainForm,
html.kauza-bicz #signSection,
html.kauza-bicz body > footer {
  padding-left: max(var(--bicz-okraj), calc((100% - var(--bicz-sirka)) / 2));
  padding-right: max(var(--bicz-okraj), calc((100% - var(--bicz-sirka)) / 2));
}

/* Zlatý nadtitulek nad nadpisem — stejný prvek jako v úvodu webu. */
html.kauza-bicz h1#nadpis {
  padding-top: 52px;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--bicz-svetly);
}
html.kauza-bicz h1#nadpis::before {
  content: 'Dluhopisy BICZ';
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--bicz-zlata);
}

html.kauza-bicz p#uvod {
  padding-top: 18px;
  max-width: none;
  font-size: 17px;
  color: var(--bicz-svetly-tlumeny);
}
html.kauza-bicz p#uvod::after { content: ''; display: block; height: 22px; }

/* Návratový kód je pro ty, kdo se vracejí — tichý řádek, ne box nahoře. */
html.kauza-bicz details.lookup {
  padding-bottom: 44px;
  font-size: 14px;
}
html.kauza-bicz details.lookup summary {
  font-weight: 400;
  color: var(--bicz-svetly-tlumeny);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.kauza-bicz details.lookup summary:hover { color: var(--bicz-zlata); }
html.kauza-bicz details.lookup .hint { color: var(--bicz-svetly-tlumeny); }
html.kauza-bicz details.lookup input[type=text] { background: #fff; color: var(--bicz-inkoust); }

/* ---------------------------------------------------------- zlatý pruh
   U BICZ v něm neběží žádná lhůta — nese větu o tom, co zmocnění umožní. */

html.kauza-bicz #lhuta {
  background: var(--bicz-zlata);
  color: var(--bicz-inkoust-tmavy);
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------------------------------------------------------- kroky */

html.kauza-bicz #kroky {
  background: var(--bicz-papir-tmavsi);
  border-bottom: 1px solid var(--bicz-linka);
}
html.kauza-bicz #kroky ol {
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 15px;
}
html.kauza-bicz #kroky li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--bicz-text-tlumeny);
}
html.kauza-bicz #kroky li > span {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--bicz-text-tlumeny);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
html.kauza-bicz #kroky li.je-aktivni { color: var(--bicz-inkoust); font-weight: 600; }
html.kauza-bicz #kroky li.je-aktivni > span {
  background: var(--bicz-zlata);
  border-color: var(--bicz-zlata);
  color: var(--bicz-inkoust-tmavy);
  font-weight: 700;
}

/* ---------------------------------------------------------- formulář */

html.kauza-bicz form#mainForm,
html.kauza-bicz #signSection { padding-top: 48px; }

html.kauza-bicz fieldset {
  border: 1px solid var(--bicz-linka);
  border-radius: 8px;
  background: #fff;
  padding: 26px 30px 30px;
  margin-bottom: 22px;
}
html.kauza-bicz legend {
  padding: 0 10px;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--bicz-inkoust);
}
html.kauza-bicz label {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bicz-text-tlumeny);
}
html.kauza-bicz input[type=text],
html.kauza-bicz textarea,
html.kauza-bicz select {
  margin-top: 6px;
  padding: 10px 13px;
  font-size: 15px;
  color: var(--bicz-inkoust);
  background: #fff;
  border: 1px solid var(--bicz-linka);
  border-radius: 6px;
}
html.kauza-bicz input[type=text]:focus,
html.kauza-bicz textarea:focus,
html.kauza-bicz select:focus {
  outline: 2px solid var(--bicz-zlata);
  outline-offset: 1px;
  border-color: var(--bicz-zlata);
}
html.kauza-bicz .hint { font-size: 13px; color: var(--bicz-text-tlumeny); }
html.kauza-bicz .row { gap: 18px; }

/* Blok jednoho dluhopisu. Emitent je první pole a jeho poznámka (jestli
   je u emise sjednáno i ručení BICZ a.s.) se vypisuje hned pod ním —
   proto má vlastní, výraznější vzhled než ostatní poznámky. */
html.kauza-bicz .inv-block {
  border: 1px solid var(--bicz-linka);
  border-radius: 8px;
  background: var(--bicz-papir);
  padding: 20px 22px;
  margin-top: 16px;
}
html.kauza-bicz .inv-emitent-poznamka {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--bicz-zlata);
  background: var(--bicz-papir-tmavsi);
  border-radius: 0 6px 6px 0;
  color: var(--bicz-inkoust);
}
html.kauza-bicz .inv-emitent-hint,
html.kauza-bicz .inv-jistina-hint { margin: 6px 0 0; }

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

html.kauza-bicz button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 24px;
  margin-top: 18px;
  border: none;
  border-radius: 6px;
  background: var(--bicz-zlata);
  color: var(--bicz-inkoust);
  transition: background-color .15s, transform .15s;
}
html.kauza-bicz button:hover { background: var(--bicz-zlata-jasna); transform: translateY(-1px); }
html.kauza-bicz button:disabled { background: var(--bicz-linka); color: var(--bicz-text-tlumeny); transform: none; }
html.kauza-bicz #addInvestment,
html.kauza-bicz .inv-remove {
  background: none;
  color: var(--bicz-zlata-tmava);
  border: 1px solid var(--bicz-zlata-tmava);
  font-size: 15px;
  padding: 10px 18px;
}
html.kauza-bicz #addInvestment:hover,
html.kauza-bicz .inv-remove:hover { background: var(--bicz-zlata-tmava); color: #fff; }
html.kauza-bicz .inv-remove { padding: 4px 10px; font-size: 13px; margin-top: 0; }
html.kauza-bicz .lookup-row button { margin-top: 0; padding: 10px 18px; font-size: 15px; }

/* ---------------------------------------------------------- dokumenty a podpis */

html.kauza-bicz #downloads a,
html.kauza-bicz .dl-inline a {
  background: #fff;
  color: var(--bicz-inkoust);
  border: 1px solid var(--bicz-linka);
  border-radius: 6px;
  padding: 11px 18px;
  font-size: 15px;
}
html.kauza-bicz #downloads a:hover,
html.kauza-bicz .dl-inline a:hover { border-color: var(--bicz-zlata); opacity: 1; }

html.kauza-bicz #returnCodeBox {
  background: var(--bicz-papir-tmavsi);
  border: 1px solid var(--bicz-linka);
  border-radius: 8px;
  padding: 18px 22px;
}
/* Kód se opisuje z e-mailu — patkové písmo webu ho dělá čitelnějším, stejně
   jako velká čísla na bicz.elementz.legal. */
html.kauza-bicz #returnCodeBox .code {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--bicz-zlata-tmava);
}

html.kauza-bicz .sign-options { gap: 18px; margin-top: 20px; }
html.kauza-bicz .sign-option {
  border: 1px solid var(--bicz-linka);
  border-radius: 8px;
  background: #fff;
  padding: 24px 28px;
}
/* Bank iD je nejrychlejší cesta — nevyžaduje tiskárnu ani úřad a dává
   ověřenou totožnost. Proto vede, zbylé dvě zůstávají rovnocenné.
   Pořadí mění jen CSS, takže ostatní kauzy mají volby pořád 1-2-3;
   tady čísla nesedí na nové pořadí, a tak se skryjí. */
html.kauza-bicz .sign-option:has(#bankIdBtn) {
  border: 2px solid var(--bicz-zlata);
  order: -1;
}
/* Dokud kauza nemá vlastní registraci v Bank iD, volba se nezvýrazňuje. */
html.kauza-bicz .sign-option.disabled:has(#bankIdBtn) {
  border: 1px solid var(--bicz-linka);
  order: 0;
}
html.kauza-bicz .sign-option .poradi { display: none; }
html.kauza-bicz .sign-option > summary { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
html.kauza-bicz .sign-option .badge {
  background: var(--bicz-zlata);
  color: var(--bicz-inkoust-tmavy);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
}
html.kauza-bicz .sign-option-body { font-size: 15px; color: var(--bicz-text-tlumeny); margin-top: 12px; }
html.kauza-bicz .sign-option.disabled { opacity: .7; }

html.kauza-bicz #status,
html.kauza-bicz #lookupStatus,
html.kauza-bicz #uploadStatus { font-size: 14px; color: var(--bicz-text-tlumeny); }

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

/* Patičky jsou v šabloně dvě (kontakt a právní odkazy). Aby z nich byl jeden
   tmavý pruh a ne dva pásy s dírou mezi nimi, druhá dostává stejné pozadí
   a přebíjí svoje inline rozměry — proto to !important. */
html.kauza-bicz body > footer {
  margin-top: 56px;
  padding-top: 30px;
  padding-bottom: 12px;
  border-top: 0;
  background: var(--bicz-inkoust-tmavy);
  color: var(--bicz-svetly-tlumeny);
  font-size: 14px;
}
html.kauza-bicz body > footer + footer,
html.kauza-bicz body > footer:last-of-type {
  margin: 0 !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding-bottom: 30px !important;
  padding-left: max(var(--bicz-okraj), calc((100% - var(--bicz-sirka)) / 2)) !important;
  padding-right: max(var(--bicz-okraj), calc((100% - var(--bicz-sirka)) / 2)) !important;
  font-size: 14px !important;
  color: var(--bicz-svetly-tlumeny) !important;
}
html.kauza-bicz body > footer a { color: var(--bicz-zlata); }

@media (max-width: 640px) {
  html.kauza-bicz { --bicz-okraj: 20px; }
  html.kauza-bicz h1#nadpis { padding-top: 32px; }
  html.kauza-bicz details.lookup { padding-bottom: 28px; }
  html.kauza-bicz form#mainForm,
  html.kauza-bicz #signSection { padding-top: 28px; }
  html.kauza-bicz fieldset { padding: 20px 18px 24px; }
  html.kauza-bicz .row { flex-direction: column; gap: 0; }
  html.kauza-bicz header { flex-wrap: wrap; gap: 10px; }
  /* Na telefonu se prsty míří hůř. */
  html.kauza-bicz button { width: 100%; }
  html.kauza-bicz .inv-remove,
  html.kauza-bicz .lookup-row button { width: auto; }
}