/* Heligonka Tabulator — style.css */
:root {
  --ink: #1a1a1a;
  --paper: #fdfdf8;
  --line: #333;
  --accent: #8a3324;
}
* { box-sizing: border-box; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #f4f1e8;
  color: var(--ink);
  margin: 0;
  padding: 1.2rem;
  max-width: 1100px;
  margin-inline: auto;
}
header h1 { margin: 0 0 .2em; font-size: 1.6rem; }
header .lead { color: #555; margin-top: 0; }
main { display: grid; gap: 1.2rem; }
section {
  background: var(--paper);
  border: 1px solid #d8d2c0;
  border-radius: 8px;
  padding: 1rem 1.2rem;
}
section h2 { margin-top: 0; font-size: 1.15rem; }
textarea {
  width: 100%;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: .85rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: .6rem;
  background: #fffef9;
}
.hint { font-size: .78rem; color: #666; margin: .5rem 0; line-height: 1.5; }
button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: .5em 1.1em;
  font-size: .95rem;
  cursor: pointer;
  font-family: inherit;
}
button:hover { filter: brightness(1.1); }
.actions { margin-top: .8rem; display: flex; gap: .5rem; }

/* ---- Tabulatura (zpěvníkový styl) ---- */
.sheet { overflow-x: auto; padding: .5rem 0; }
.sheet-inner {
  background: #fffdf5;
  border: 1px solid #999;
  padding: 1rem;
  min-width: 700px;
}
.song-title { text-align: center; font-size: 1.4rem; margin: 0 0 .8em; }
.system {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  border: 2px solid var(--line);
  margin-bottom: 1rem;
  break-inside: avoid;
}
.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
}
.rowlab, .lab {
  /* levý sloupec popisků: bez vnitřních vodorovných čar — jen svislá linka vpravo (drží kontejner) a vnější rám */
  font-weight: bold;
  text-align: center;
  padding: .15em .2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lab.alt-slot { font-weight: normal; color: #7a4a1d; }
.cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.cell {
  display: grid;
  grid-template-rows: 2.4em 2.4em 2.4em 1.2em 1.6em;
}
/* svislé dělící čáry jen u hudevních řádků — text (rT) je bez nich (jen vnější rám) */
.cell > div { border-right: 1px solid var(--line); }
.cell:last-child > div { border-right: 0; }
.cell > div.rT { border-right: 0; }
.cell > div {
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1.05;
  white-space: pre;
  text-align: center;
}
.rII { font-weight: bold; }
.rI  { font-style: normal; }
.rB  { font-weight: bold; font-size: 1.25rem; }
.rM  { font-size: .6rem; color: #444; border-bottom: 2px solid var(--line); }
.rT  { font-size: .72rem; color: #111; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; }
/* Alternativy hmatů — náhradní knoflíky pod notou */
.alt-hint { font-size: .62rem; color: #7a4a1d; border-bottom: 1px dashed var(--line); padding: 0 .1em; }
#toggle-alts.on { background: #7a4a1d; color: #fff8e6; }
/* Klikací hmatník */
#hmatnik-box { display: inline-flex; flex-direction: column; gap: .3rem; vertical-align: top; }
.hmatnik-grid { display: inline-block; background: #fffdf5; border: 1px solid #b8a878; border-radius: 6px; padding: .5rem; }
.hm-row { display: flex; align-items: center; gap: .25rem; margin: .2rem 0; }
.hm-lab { font-weight: bold; width: 2rem; text-align: center; color: #7a4a1d; }
.hm-btn { min-width: 2.6rem; padding: .25em .3em; font-family: inherit; font-size: .95rem; background: #f5ecd8; border: 1px solid #b8a878; border-radius: 4px; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.hm-btn:hover { background: #e8d9b5; }
.hm-btn small { font-size: .6rem; color: #7a4a1d; }
.hm-btn.hm-bass { min-width: 2rem; background: #efe6f2; border-color: #a88ac0; }
#toggle-hmatnik.on { background: #7a4a1d; color: #fff8e6; }
/* Notová osnova */
#osnova-output { background: #fff; border: 1px solid #b8a878; border-radius: 6px; padding: .5rem; margin-top: .5rem; overflow-x: auto; }
.osnova-inner { min-width: 100%; }
#toggle-osnova.on { background: #7a4a1d; color: #fff8e6; }
/* M řádek — souvislá šipka měchu přes skupinu not (CSS čára, ne text) */
/* oblouček (legato/tie): dlouhé mělké údolí JEN nad řadou noty (tie-II → rII, tie-I → rI),
   vpravo od čísla, přesahuje k další notě (jako notová ligatura) */
.cell.tie-II .rII::after, .cell.tie-I .rI::after {
  content: '';
  position: absolute;
  /* dle Vildova nákresu: KRÁTKÝ ÚZKÝ oblouček hned napravo od čísel,
     v horní části řádku, končí cca v polovině buňky (ne přes celou šířku) */
  left: 45%;
  width: 45%;
  top: 12%;
  height: 30%;
  border-bottom: 2px solid #222;
  border-radius: 0 0 150% 150% / 0 0 180% 180%;
  pointer-events: none;
  z-index: 1;
}
/* fallback pro starý formát (bez tie-II/tie-I): řada II */
.cell.tie:not(.tie-II):not(.tie-I) .rII::after {
  content: '';
  position: absolute;
  left: 45%;
  width: 45%;
  top: 12%;
  height: 30%;
  border-bottom: 2px solid #222;
  border-radius: 0 0 150% 150% / 0 0 180% 180%;
  pointer-events: none;
  z-index: 1;
}
/* Grid-Text: taktové čáry — PRAVÝ okraj buňky (grid potomek by rozbil 1fr šířky);
   repetice |: :| = tlustá linka + tenká tečka/dvojlinka */
/* repetiční čáry |: :| — dvě svislé tečky u čáry, vertikálně na středu řádku I */
.cell.bar-rstart::before, .cell.bar-rend::before, .cell.bar-lstart::before, .cell.bar-both::before {
  content: '';
  position: absolute;
  top: 40%; /* střed řádku I */
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #222;
  box-shadow: 0 -9px 0 #222; /* druhá tečka nad */
  z-index: 2;
}
.cell.bar-rstart::before { right: -12px; } /* |: na konci buňky — tečky vpravo od čáry, odsazené */
.cell.bar-rend::before   { right: 9px; }     /* :| — tečky vlevo od čáry, odsazené */
.cell.bar-lstart::before { left: 10px; }    /* |: na začátku řádku — tečky vpravo od levé čáry */
.cell.bar-both::before   { right: 9px; }    /* :||: — tečky uzavírací (vlevo) … */
.cell.bar-both::after {                     /* … a tečky otevírací (vpravo) */
  content: '';
  position: absolute;
  top: 40%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #222;
  box-shadow: 0 -9px 0 #222;
  right: -12px;
  z-index: 2;
}
.cell.bar-single { border-right: 2px solid #555; }
.cell.bar-rstart, .cell.bar-rend, .cell.bar-both { border-right: 3px solid #222; box-shadow: inset -6px 0 0 -4px #222; }
.cell.bar-lstart { border-left: 3px solid #222; box-shadow: inset 6px 0 0 -4px #222; }
/* volta [1]/[2]: malé číslo s vodorovnou linkou nad řádkem II (notový zápis),
   NE velké [1] přes buňku */
.volta-mark {
  position: absolute;
  top: -0.35em;
  left: 0;
  font-size: .6rem;
  color: #222;
  font-weight: bold;
  z-index: 2;
  padding: 0 .2em;
  border-top: 1.5px solid #222;
  background: transparent;
}
.volta-mark::before { content: ''; }
.cell { position: relative; }
.m-arrow { position: relative; }
.m-arrow::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%); /* střed čáry přesně na 50 % — zarovnáno s hrotem (margin-top:-5px) */
  border-top: 2.5px solid #222;
}
/* čára i hrot končí stejně daleko od rámečku jako začátek (12 % inset) —
   ale na hranici skupin se inset zdvojnásobí, aby sousední šipky nesplynuly */
/* šipky měchu: začátek i konec 20 % od okraje buňky (Vilda 7.10.) */
.m-push.m-start::before { left: 20%; }
.m-pull.m-end::before { right: 20%; }
.m-push.m-end::before { right: 20%; }
.m-pull.m-start::before { left: 20%; }
/* hranice skupin: extra odsazení na straně BEZ hrotu, aby sousední šipky nesplynuly
   (push má hrot vpravo → extra inset vlevo; pull má hrot vlevo → extra inset vpravo,
   čára začíná u hrotu na 12 %, aby na něj navazovala) */
.m-push.m-start.m-end::before { left: 20%; }
.m-pull.m-start.m-end::before { left: 20%; right: 20%; }
/* hrot šipky: push → hrot vpravo na konci skupiny, pull ← hrot vlevo na začátku */
.m-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.m-push.m-end::after { right: calc(20% - 9px); border-left: 9px solid #222; }
.m-pull.m-start::after { left: calc(20% - 9px); border-right: 9px solid #222; }
/* patička tisků — na obrazovce skrytá, při tisku viditelná */
.print-footer { text-align: center; font-size: .75rem; color: #999; margin-top: 1.2rem; }
.print-footer.screen-hidden { display: none; }
@media print { .print-footer.screen-hidden { display: block !important; } }
/* v5 — horní menu, stránkování, knihovna/admin tabulky */
.topmenu { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; border-bottom: 2px solid var(--line); padding: .3rem 0 .5rem; margin-bottom: .8rem; }
.topmenu a { text-decoration: none; color: var(--accent); padding: .15em .6em; border-radius: 4px; font-size: .95rem; }
.topmenu a:hover { background: #efe8d8; }
.topmenu a.active { background: var(--accent); color: #fff8e6; }
.pager { margin: .5rem 0; }
.pager a { color: var(--accent); text-decoration: none; }
.libtable { width: 100%; border-collapse: collapse; font-size: .9rem; }
.libtable th, .libtable td { border-bottom: 1px solid #ddd; text-align: left; padding: .35em .5em; }
.libtable th { font-size: .8rem; text-transform: uppercase; color: #777; }
.libtable td.actions { white-space: nowrap; display: table-cell; margin-top: 0; }
.cell.tie .rII::after, .cell.tie .rI::after { content: ''; } /* nahrazeno CSS údolím výše */
.slide-right .rM::after { content: '→'; font-size: .9rem; }
.slide-left  .rM::after { content: '←'; font-size: .9rem; }
.verse { font-size: .95rem; margin: .2em 0; }

footer { margin-top: 1.4rem; font-size: .8rem; color: #777; text-align: center; }
footer a { color: var(--accent); }

@media print {
  body { background: #fff; padding: 0; }
  #editor, header, footer, .actions { display: none; }
  section { border: 0; padding: 0; }
  .sheet-inner { border: 0; min-width: 0; }
}
/* v2 přídavky */
.controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; align-items: center; }
.controls label { font-size: .9rem; }
.controls select, .controls input[type=file] { font-family: inherit; font-size: .9rem; padding: .25em; }
.labs { display: grid; grid-template-rows: 2.4em 2.4em 2.4em 1.2em 1.6em; border-right: 2px solid var(--line); }
/* režim Alternativ: 6 řádků (II/I/alt/B/M/text) — buňky i levý sloupec */
.alts .cell { grid-template-rows: 2.4em 2.4em 1.2em 2.4em 1.2em 1.6em; }
.alts .labs { grid-template-rows: 2.4em 2.4em 1.2em 2.4em 1.2em 1.6em; }

/* v3 — knihovna + auth */
#library table { width: 100%; border-collapse: collapse; font-size: .9rem; }
#library th, #library td { border-bottom: 1px solid #ddd; text-align: left; padding: .35em .5em; }
#library th { font-size: .8rem; text-transform: uppercase; color: #777; }
#library td.actions { white-space: nowrap; display: table-cell; margin-top: 0; }
button.mini { padding: .15em .5em; font-size: .8rem; background: #555; }
.star { cursor: pointer; font-size: .9rem; }
.authline { display: flex; gap: .4rem; align-items: center; margin: .4rem 0; flex-wrap: wrap; }
.authline input { font-family: inherit; padding: .25em; }
#admin-box h3 { margin: 1rem 0 0; font-size: 1rem; }
.admintable { width:100%; border-collapse:collapse; font-size:.85rem; margin:.3rem 0; }
.admintable th, .admintable td { border-bottom:1px solid #ddd; padding:.3em .4em; text-align:left; }
.nowrap { white-space:nowrap; }
#admin-box h3 { margin-top:1.2rem; }
#admin-box h4 { margin:.8rem 0 .2rem; font-size:.9rem; }
.sharebox { margin-top:.4rem; display:none; }
.sharebtn { display:inline-block; background:#5a4a8a; color:#fff; padding:.15em .6em; border-radius:4px; font-size:.8rem; text-decoration:none; margin-right:.3rem; }
.sharebtn:hover { filter:brightness(1.15); }
#song-url { background:#f2eeda; padding:.05em .3em; border-radius:3px; }
/* nápověda */
.hinttable { width:100%; border-collapse:collapse; font-size:.88rem; margin:.4rem 0; }
.hinttable th, .hinttable td { border-bottom:1px solid #ddd; padding:.3em .5em; text-align:left; vertical-align:top; }
.hinttable th { font-size:.78rem; text-transform:uppercase; color:#777; }
section ul { margin:.3rem 0 .6rem 1.2rem; }
section li { margin:.15rem 0; line-height:1.45; }