/* =============================================================================
 * PSANÍ PŘÍMO VE FORMÁTOVANÉM TEXTU (coral-editor.js), základní vzhled.
 *
 * Jen stavba a rozumné výchozí hodnoty pod :where(), ať je web přebije bez
 * boje o specifičnost. Písmo, barvy, nadpisy a posuvník si web nastaví ve
 * svém jádře (třídy coral-ed__*), nebo přes proměnné:
 *   --coral-ed-znacka   průhlednost značek #, *, 1. (výchozí 0.4); hvězdičky
 *                       tučného jsou vidět jen u kurzoru (coral-ed__tucne.je-videt)
 *   --coral-ed-odrazka  barva tečky odrážky (výchozí barva textu)
 *   --coral-ed-odrazka-misto  místo pro tečku před textem odrážky (výchozí 1.3em)
 *   --coral-ed-px, --coral-ed-py  vnitřní odsazení plochy (i pro nápovědu)
 * ============================================================================= */

:where(.coral-ed) { position: relative; display: flex; flex-direction: column; min-width: 0; }
:where(.coral-ed) > .coral-ed__zdroj { display: none !important; }

:where(.coral-ed__plocha) {
  position: relative;
  flex: 1 1 auto;
  min-height: 6em;
  padding: var(--coral-ed-py, 8px) var(--coral-ed-px, 10px);
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
}
.coral-ed__plocha:focus, .coral-ed__plocha:focus-visible { outline: none; }

:where(.coral-ed__r) { min-height: 1.5em; }
:where(.coral-ed__zn) { opacity: var(--coral-ed-znacka, 0.4); }
:where(.coral-ed__h2) { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
:where(.coral-ed__h3) { font-weight: 800; font-size: 1.12em; }
:where(.coral-ed__h4) { font-weight: 800; }
:where(.coral-ed__plocha b) { font-weight: 800; }
:where(.coral-ed__citat) { font-weight: 700; }

/* Odrážka: pomlčka v textu zůstává (kurzor přes ni chodí), vidět je tečka.
   Značka má pevnou šířku a řádek visící odsazení, takže text začíná vždy
   stejně daleko za tečkou a zalomené řádky lícují s textem, ne s tečkou. */
.coral-ed__li {
  padding-left: var(--coral-ed-odrazka-misto, 1.3em);
  text-indent: calc(-1 * var(--coral-ed-odrazka-misto, 1.3em));
}
.coral-ed__zn--odrazka {
  position: relative;
  display: inline-block;
  width: var(--coral-ed-odrazka-misto, 1.3em);
  text-indent: 0;
  color: transparent;
  /* Stín písma plochy (odlesk webu) by z průhledné pomlčky udělal čárku vedle tečky. */
  text-shadow: none;
  opacity: 1;
}
.coral-ed__zn--odrazka::before {
  content: '';
  position: absolute;
  left: 0.22em;
  top: 50%;
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.21em;
  border-radius: 50%;
  background: var(--coral-ed-odrazka, currentColor);
}

/* Hvězdičky tučného jsou vidět, jen když se slova dotýká kurzor (třídu je-videt
   přepíná coral-editor.js); jinak plynule zajedou a text za nimi dojede.
   Zmenšuje se písmo, ne display, takže kurzor přes hvězdičky dál chodí. */
.coral-ed__tucne > .coral-ed__zn--tucne {
  transition: font-size 0.2s ease, opacity 0.2s ease, letter-spacing 0.2s ease;
}
.coral-ed__tucne:not(.je-videt) > .coral-ed__zn--tucne { font-size: 0; opacity: 0; letter-spacing: 0; }
.coral-ed__tucne.bez-prechodu > .coral-ed__zn--tucne { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .coral-ed__tucne > .coral-ed__zn--tucne { transition: none; }
}

/* Nápověda v prázdném poli (placeholder původního pole). */
.coral-ed.je-prazdne .coral-ed__plocha::before {
  content: attr(data-placeholder);
  position: absolute;
  left: var(--coral-ed-px, 10px);
  right: var(--coral-ed-px, 10px);
  top: var(--coral-ed-py, 8px);
  opacity: 0.6;
  pointer-events: none;
  white-space: normal;
}