/* =============================================================================
 * 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)
 *   --coral-ed-naznak, --coral-ed-naznak-fokus  jak daleko delší text mizí na
 *                       hraně mimo fokus a při psaní (2.2em a 0.9em)
 * ============================================================================= */

: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; }

/* Světlina 181: pole se roluje až po kliknutí do něj, mimo fokus kolečko i prst
   roluje stránku. Místo pro posuvník drží delší pole pořád, ať se text po
   kliknutí nepřelije. Delší text měkce mizí na hraně, kudy pokračuje, mimo
   fokus víc (--coral-ed-naznak), při psaní jen kousek (--coral-ed-naznak-fokus);
   pruh posuvníku s rohem pro změnu výšky (--coral-ed-posuvnik-misto) nemizí. */
.coral-ed.je-delsi > .coral-ed__plocha { scrollbar-gutter: stable; }
.coral-ed:not(:focus-within) > .coral-ed__plocha { overflow-y: hidden; }
.coral-ed.je-vic-nahore > .coral-ed__plocha { --coral-ed-vic-nahore: var(--coral-ed-naznak, 2.2em); }
.coral-ed.je-vic-dole > .coral-ed__plocha { --coral-ed-vic-dole: var(--coral-ed-naznak, 2.2em); }
.coral-ed.je-vic-nahore:focus-within > .coral-ed__plocha { --coral-ed-vic-nahore: var(--coral-ed-naznak-fokus, 0.9em); }
.coral-ed.je-vic-dole:focus-within > .coral-ed__plocha { --coral-ed-vic-dole: var(--coral-ed-naznak-fokus, 0.9em); }
/* ZÁMĚR (Světlina 603): dlouhý dokument (volby.rolovat) se roluje vlastním
   posuvníkem i bez kliknutí a na hraně mizí jen kousek jako při psaní; na konci
   textu kolečko pokračuje stránkou. Ostatní pole drží pravidlo 181 výš. */
.coral-ed.coral-ed--rolovat:not(:focus-within) > .coral-ed__plocha { overflow-y: auto; }
.coral-ed.coral-ed--rolovat.je-vic-nahore > .coral-ed__plocha { --coral-ed-vic-nahore: var(--coral-ed-naznak-fokus, 0.9em); }
.coral-ed.coral-ed--rolovat.je-vic-dole > .coral-ed__plocha { --coral-ed-vic-dole: var(--coral-ed-naznak-fokus, 0.9em); }
.coral-ed:is(.je-vic-nahore, .je-vic-dole) > .coral-ed__plocha {
  -webkit-mask: linear-gradient(transparent, #000 var(--coral-ed-vic-nahore, 0px), #000 calc(100% - var(--coral-ed-vic-dole, 0px)), transparent) left top / calc(100% - var(--coral-ed-posuvnik-misto, 16px)) 100% no-repeat, linear-gradient(#000, #000) right top / var(--coral-ed-posuvnik-misto, 16px) 100% no-repeat;
  mask: linear-gradient(transparent, #000 var(--coral-ed-vic-nahore, 0px), #000 calc(100% - var(--coral-ed-vic-dole, 0px)), transparent) left top / calc(100% - var(--coral-ed-posuvnik-misto, 16px)) 100% no-repeat, linear-gradient(#000, #000) right top / var(--coral-ed-posuvnik-misto, 16px) 100% no-repeat;
}

/* Světlina 269: roh pro změnu výšky (coral-editor.js ho přidá, když má plocha
   resize: vertical). Jede myší i prstem, cíl má 40 px a kreslí se jen rožek
   v barvě textu (--coral-ed-roh, --coral-ed-roh-aktivni, --coral-ed-roh-odsazeni).
   Sedí v rohu obalu; boxík kolem pole ho převezme, když obalu dá position: static. */
:where(.coral-ed__roh) {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  cursor: ns-resize;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  opacity: var(--coral-ed-roh, 0.42);
  transition: opacity 0.2s ease;
}
.coral-ed__roh::before {
  content: '';
  position: absolute;
  right: var(--coral-ed-roh-odsazeni, 3px);
  bottom: var(--coral-ed-roh-odsazeni, 3px);
  width: 11px;
  height: 11px;
  background: linear-gradient(135deg, transparent 50%, currentColor 50% 59%, transparent 59% 72%, currentColor 72% 81%, transparent 81%);
}
.coral-ed__roh:hover, .coral-ed.je-tazeno .coral-ed__roh { opacity: var(--coral-ed-roh-aktivni, 0.8); }
.coral-ed.je-tazeno, .coral-ed.je-tazeno * { cursor: ns-resize; }

: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;
}