/* Echo – rozvržení a komponenty. Barvy a písma jen přes proměnné z genlive.css. */
#app { min-height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--gl-black); color: var(--gl-white); position: sticky; top: 0; z-index: 40; }
.topbar .brand { text-decoration: none; font-family: var(--font-display); font-size: 1.55rem; line-height: 1; color: var(--gl-red); padding-bottom: 2px; }
.topbar nav { display: flex; gap: 2px; }
.topbar nav a { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; color: #b5b5b5; text-decoration: none; padding: 6px 10px; border-bottom: 2px solid transparent; }
.topbar nav a.on, .topbar nav a:hover { color: #fff; border-bottom-color: var(--gl-red); }
.topbar button { color: #d0d0d0; border-color: #454545; }
.topbar button:hover { color: #fff; border-color: #fff; }
.spacer { flex: 1; }
main { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 22px 20px 40px; min-width: 0; }
.pagehead { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead h1 { flex: 1; min-width: 240px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } main { padding: 14px 16px 30px; } }
.field { margin-bottom: 12px; }
.hint { color: var(--muted); font-size: .84rem; margin-top: 3px; }

/* přihlášení */
.login { margin: 9vh auto 0; width: min(400px, calc(100% - 32px)); padding: 28px; }
.login h1 { margin-bottom: 4px; font-size: 2.6rem; }
.login form { margin-top: 18px; }
.login .err { color: var(--bad); margin: 10px 0 0; }
.or { text-align: center; color: var(--muted); margin: 14px 0; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }

/* přehled souborů */
.drop { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; background: var(--panel); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop .big { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; font-size: 1.3rem; }
.drop .opts { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; flex: 1; min-width: 260px; }
.drop .opts .field { margin: 0; }
table.files { width: 100%; border-collapse: collapse; }
table.files th { text-align: left; font-family: var(--font-condensed); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .88rem; padding: 6px 10px; border-bottom: 1px solid var(--line-strong); }
table.files td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.files tr.item { cursor: pointer; }
table.files tr.item:hover td { background: var(--panel); }
table.files .title { font-weight: 700; }
table.files .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { height: 3px; background: var(--line); margin-top: 6px; width: 180px; max-width: 100%; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.tablewrap { overflow-x: auto; }
.empty { padding: 40px 10px; text-align: center; color: var(--muted); }

/* stránka souboru */
.mediahead { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 6px; }
.mediahead h1 { flex: 1; min-width: 240px; outline: none; }
.meta { color: var(--muted); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-strong); margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.tabs a { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; font-size: 1.1rem; padding: 8px 14px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--fg); border-bottom-color: var(--accent); }
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 20px; align-items: start; }
@media (max-width: 960px) { .work { grid-template-columns: 1fr; } }
.side { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 12px; }
.player { border-radius: var(--radius); }
.player .frame { background: #000; position: relative; overflow: hidden; display: flex; justify-content: center; container-type: inline-size; }
.player video { display: block; max-width: 100%; max-height: 46vh; background: #000; cursor: pointer; }
.player.audio video { width: 100%; height: 110px; }
.player .wait { color: #cfcfcf; padding: 40px 16px; text-align: center; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; }
.player .overlay { position: absolute; left: 4%; right: 4%; bottom: 7%; text-align: center; pointer-events: none; color: #fff; font-weight: 700; font-size: clamp(13px, 4.6cqw, 34px); line-height: 1.25; white-space: pre-line; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 4px #000; }
.player.audio .overlay { bottom: auto; top: 50%; transform: translateY(-50%); }
.player .seek { display: block; margin: 0; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 0; outline-offset: 4px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.player .seek::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--accent) var(--pos, 0%), var(--line-strong) var(--pos, 0%)); }
.player .seek::-moz-range-track { height: 4px; background: var(--line-strong); }
.player .seek::-moz-range-progress { height: 4px; background: var(--accent); }
.player .seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: -4px; }
.player .seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); }
.player:fullscreen { background: #000; display: flex; flex-direction: column; justify-content: center; }
.player:fullscreen .frame { flex: 1; align-items: center; } .player:fullscreen video { max-height: 100%; height: 100%; }
/* ovládání přehrávače: jedna řada přes celou šířku přehrávače, všechny prvky stejného vzhledu */
.transport { display: flex; gap: 6px; }
.transport > * { flex: 1 1 0; min-width: 0; justify-content: center; }
.transport select { font-family: var(--font-condensed); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1; min-height: 28px; padding: 5px 9px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--fg); text-align: center; text-align-last: center; cursor: pointer; appearance: none; -webkit-appearance: none; }
.transport select:hover { border-color: var(--fg); }
.player .seekrow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.player .seekrow .seek { flex: 1; min-width: 0; }
.player .time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .82rem; line-height: 18px; color: var(--muted); white-space: nowrap; }
.player:fullscreen .seekrow { padding: 0 14px 10px; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type=search], .toolbar input[type=text] { width: 180px; }
.menu { position: relative; }
.menu .pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 80; /* nad přilepeným videem (30) i hlavičkou (40) */ background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); min-width: 220px; padding: 6px; display: none; }
.menu.open .pop { display: block; }
.menu.open { z-index: 80; } /* otevřená nabídka musí být nad vším, co je na stránce přilepené */
.menu .pop a, .menu .pop button { display: flex; width: 100%; border: 0; padding: 8px 10px; text-decoration: none; color: var(--fg); font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: .95rem; justify-content: flex-start; min-height: 0; }
.menu .pop a:hover, .menu .pop button:hover { background: var(--panel-2); }
.menu .pop .label { padding: 6px 10px 2px; display: block; }

/* editor přepisu */
.transcript { max-width: 78ch; }
.para { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .para { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who del" "text text"; }
  .para .who { grid-area: who; } .para .text, .para > [contenteditable] { grid-area: text; } .para .pdel { grid-area: del; }
}
.para .who { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.para .who button { border: 0; padding: 0; min-height: 0; font-size: 1rem; color: var(--fg); text-align: left; white-space: normal; }
.para .who button:hover { color: var(--accent); }
.para button.pdel { color: var(--muted); display: inline-flex; align-self: start; border: 0; background: none; padding: 6px; min-height: 0; }
.para button.pdel:hover { color: var(--bad); background: none; }
.para .who .t { font-family: var(--mono); font-size: .8rem; color: var(--muted); cursor: pointer; }
/* na telefonu je záhlaví odstavce v jedné řadě: řečník, čas a vpravo smazat */
@media (max-width: 720px) { .para .who { flex-direction: row; align-items: center; gap: 4px 12px; } .para button.pdel { align-self: center; padding: 8px; } }
.para .text { outline: none; font-size: 1.05rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 4px; margin: 0 -4px; border-radius: var(--radius); }
.para .text:focus { background: var(--panel); box-shadow: 0 0 0 1px var(--line-strong); }
.w { cursor: pointer; border-radius: 2px; }
.w.unsure { text-decoration: underline wavy var(--warn); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.w.now { background: var(--accent); color: var(--accent-ink); }
.w.hit { background: var(--warn-soft); box-shadow: 0 0 0 1px var(--warn); }
.speakerpop { position: absolute; z-index: 50; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); padding: 10px; width: 250px; }
.speakerpop button.sp { display: flex; width: 100%; border: 0; justify-content: flex-start; font-family: var(--font); text-transform: none; letter-spacing: 0; padding: 6px 8px; min-height: 0; }
.speakerpop button.sp:hover, .speakerpop button.sp.cur { background: var(--panel-2); }
.findbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; margin-bottom: 12px; }
.findbar input[type=text] { width: 170px; }

/* editor titulků */
.cues { display: flex; flex-direction: column; padding-bottom: 12px; container: cues / inline-size; }
.cue { display: grid; grid-template-columns: 46px 104px minmax(0, 1fr) 132px 30px; gap: 10px; padding: 6px 6px 4px; align-items: start; border-left: 3px solid transparent; }
.cue.sel { background: var(--panel); border-left-color: var(--accent); }
/* levý sloupec: číslo titulku (001) a pod ním značka řečníka – dva stejně vysoké a stejně široké řádky.
   Časy vpravo od nich mají stejnou výšku řádků, takže číslo sedí se začátkem a řečník s koncem. */
.cue .n, .cue .times { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.cue .n > *, .cue .times input { height: 24px; min-height: 24px; box-sizing: border-box; }
.cue .n .no { display: flex; align-items: center; justify-content: center; font: 500 .78rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.cue.warned .n .no { color: var(--warn); }
.cue.bad .n .no { color: var(--bad); font-weight: 700; }
.cue.now .n .no { color: var(--accent); font-weight: 700; }
.cue .n .sp { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--muted); font: 600 .76rem/1 var(--font); opacity: .6; cursor: default; }
.cue .n .sp svg { display: block; flex: none; }
.cue .n .sp.turn { color: var(--fg); opacity: 1; }
.cue .times input { font-family: var(--mono); font-size: .76rem; line-height: 22px; padding: 0 6px; font-variant-numeric: tabular-nums; background: transparent; border-color: transparent; color: var(--muted); }
.cue .times input:hover, .cue .times input:focus, .cue.sel .times input { border-color: var(--line-strong); color: var(--fg); background: var(--input); }
/* buňka textu: pod průhledným polem leží vrstva se stejným textem, která podbarvuje právě mluvené slovo */
.cell { position: relative; background: var(--input); border: 1px solid var(--line); border-radius: var(--radius); }
.cue.sel .cell, .cell:focus-within { border-color: var(--line-strong); }
.cell textarea, .cell .mirror { font: 1rem/1.4 var(--font); padding: 8px 10px; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: 0; }
.cell textarea { position: relative; display: block; width: 100%; min-height: calc(2 * 1.4em + 16px); background: transparent; border: 0; resize: none; overflow: hidden; color: var(--fg); }
.cell textarea:focus { outline: none; }
.cell .mirror { position: absolute; inset: 0; color: transparent; pointer-events: none; }
.cell .mirror mark { background: var(--accent); color: transparent; border-radius: 2px; box-shadow: 0 0 0 2px var(--accent); }
.cue.now .cell { border-color: var(--accent); }
.cue .stats { font-family: var(--mono); font-size: .76rem; color: var(--muted); display: flex; flex-direction: column; gap: 1px; padding-top: 6px; font-variant-numeric: tabular-nums; }
.cue .stats .warn { color: var(--warn); } .cue .stats .err { color: var(--bad); font-weight: 700; }
.cue .stats .msg { font-family: var(--font); font-size: .8rem; }
/* křížek je nakreslený dvěma čarami přesně ve středu tlačítka (znak písma by seděl mimo střed) */
.cue .del { position: relative; width: 28px; height: 28px; min-height: 0; padding: 0; margin-top: 4px; visibility: hidden; justify-self: end; } /* pravý okraj = konec linky pod řádkem */
.cue .del::before, .cue .del::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; }
.cue .del::before { transform: translate(-50%, -50%) rotate(45deg); }
.cue .del::after { transform: translate(-50%, -50%) rotate(-45deg); }
.cue .del:hover { color: var(--bad); border-color: var(--bad); }
/* nástroje řádku: Zalomit řádek (jen na dotykových zařízeních, tam není Shift+Enter) a smazat */
.cue .rowtools { display: flex; gap: 4px; justify-self: end; }
.cue .rowtools .del { margin-top: 4px; }
.cue .brk { display: none; width: 28px; height: 28px; min-height: 0; padding: 0; margin-top: 4px; visibility: hidden; align-items: center; justify-content: center; }
.cue:hover .del, .cue.sel .del, .cue:focus-within .del, .cue:hover .brk, .cue.sel .brk, .cue:focus-within .brk { visibility: visible; }
/* linka mezi titulky má stejnou mřížku jako řádek titulku → začíná pod textovým polem a plus je na jeho středu */
.between { display: grid; grid-template-columns: 46px 104px minmax(0, 1fr) 132px 30px; gap: 10px; padding: 0 6px; border-left: 3px solid transparent; position: relative; }
.between .line { grid-column: 3; grid-row: 1; position: relative; height: 14px; display: flex; align-items: center; justify-content: center; }
/* linka vede přes celý řádek – dělí i čísla a časy; vpravo na ní sedí „mezera · navázat“ */
.between::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: center; border-top: 1px solid var(--line); }
.between button { position: relative; font-family: var(--font); text-transform: none; letter-spacing: 0; min-height: 0; line-height: 1; background: var(--bg); }
.between .plus { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; font-size: 1rem; color: var(--muted); border-color: var(--line-strong); opacity: 0; } /* plus je vidět až po najetí na linku (na dotykových zařízeních stále) */
/* křížek plusu nakreslený dvěma čarami přesně ve středu kroužku */
.between .plus::before, .between .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.between .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.between .line:hover .plus, .between .plus:focus-visible { opacity: 1; color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.between .gap { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: .74rem; padding: 2px 8px; color: var(--muted); border-color: var(--line); background: var(--bg); z-index: 1; }
.between .gap:hover { color: var(--fg); border-color: var(--fg); }
@media (hover: none) { .between .line { height: 26px; } .between .plus { width: 28px; height: 28px; opacity: 1; } .cue .del, .cue .brk { visibility: visible; } }
.keys { list-style: none; padding: 0; margin: 10px 0 0; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
kbd { font: .78rem var(--mono); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; color: var(--fg); background: var(--panel); white-space: nowrap; }
.timeline { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--line-strong); margin: 16px -20px -40px; padding: 8px 20px 12px; z-index: 20; }
.timeline canvas { display: block; width: 100%; height: 132px; background: var(--input); border: 1px solid var(--line); touch-action: none; user-select: none; -webkit-user-select: none; }
.timeline .row { margin-bottom: 6px; flex-wrap: nowrap; }
.timeline .row .small { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline .row .linkbtn { margin-left: auto; }
.timeline .row .small ~ .linkbtn { margin-left: 0; }
.timeline .probpop { top: auto; bottom: calc(100% + 4px); }
.timeline input[type=range] { width: 160px; }
dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin-bottom: 14px; }
dialog .row.end { justify-content: flex-end; margin-top: 16px; }

#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { background: var(--gl-black); color: var(--gl-white); border: 1px solid #454545; border-left: 4px solid var(--gl-white); padding: 10px 14px; box-shadow: var(--shadow); }
.toast.err { border-left-color: var(--gl-red); }

@media print {
  .topbar, .side, .tabs, .toolbar, .findbar, .timeline, #toasts, .mediahead .row { display: none !important; }
  body { background: #fff; color: #000; } h1 { color: #000; } .work { display: block; } .w.unsure { text-decoration: none; } .para { break-inside: avoid; }
}

/* styleguidy titulků */
.guides .g { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.guides .g .nm { flex: 1; min-width: 160px; font-weight: 700; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .grid3 { grid-template-columns: 1fr 1fr; } }

/* hlavička souboru a řádek záložek: žádná lišta tlačítek, jen Zpět / Znovu, Stáhnout, ⋯ a název stopy */
.headtools { flex-wrap: nowrap; }
button.icon { min-width: 32px; justify-content: center; padding: 5px 8px; font-family: var(--font); letter-spacing: 0; font-size: 1.05rem; }
.tabright { display: flex; gap: 8px; align-items: center; margin-left: auto; padding-bottom: 5px; min-width: 0; }
.tabbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.tabbar .track { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: .95rem; max-width: 46vw; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
:is(.tabbar, .timeline) button.pill { border: 1px solid transparent; min-height: 28px; cursor: pointer; }
:is(.tabbar, .timeline) button.pill:hover, .probmenu.open > button.pill { border-color: currentColor; }
:is(.tabbar, .timeline) button.pill { gap: 6px; padding: 0 9px; }
:is(.tabbar, .timeline) button.pill .pc { display: none; font: 700 .85rem/1 var(--mono); }
.zoomico { display: none; }
/* Stáhnout: ikona + slovo, stejná výška a písmo jako ostatní tlačítka v řadě */
.exp > button { display: inline-flex; align-items: center; gap: 7px; }
/* okno u štítku stavu: malé, úsporné, řádek problému je klikací (skok na titulek) */
.probpop { width: min(300px, calc(100vw - 32px)); max-height: 55vh; overflow-y: auto; padding: 0; font-size: .85rem; }
.probpop .pm-save { display: flex; align-items: center; gap: 6px; padding: 7px 10px; font: 700 .8rem/1 var(--font); color: var(--ok); }
.probpop .pm-save[data-state=wait] { color: var(--warn); } .probpop .pm-save[data-state=bad] { color: var(--bad); }
.probpop .pm-head { padding: 6px 10px 4px; font: .72rem/1 var(--font-condensed); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-top: 1px solid var(--line); }
.probpop .pm-none { padding: 6px 10px 8px; color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); }
.probpop .pm-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 4px 5px 10px; cursor: pointer; }
.probpop .pm-item:hover, .probpop .pm-item:focus-visible { background: var(--panel-2); outline: none; }
.probpop .pm-n { font: 600 .72rem/1 var(--mono); color: var(--muted); }
.probpop .pm-m { min-width: 0; line-height: 1.25; }
.probpop button.pm-x { width: 24px; height: 24px; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.probpop button.pm-x:hover { color: var(--fg); background: var(--panel-2); }
.probpop .pm-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 10px; border-top: 1px solid var(--line); }
.probpop button.pm-link { width: auto; min-width: 0; padding: 0; border: 0; background: none; font: .72rem/1.2 var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.probpop button.pm-link:hover { color: var(--fg); background: none; text-decoration: underline; }
.menu .pop button.cur::before { content: "✓ "; color: var(--accent); }
.menu .pop button:disabled { opacity: .45; }
.menu .pop { max-height: 70vh; overflow-y: auto; max-width: calc(100vw - 32px); }
button.icon svg { display: block; }
button.icon.flip svg { transform: scaleX(-1); }
/* řada v hlavičce i v záložkách: všechny prvky přesně stejně vysoké, ať je uvnitř text, ikona nebo tečky */
.headtools button, .tabbar button, .timeline .row button { height: 28px; min-height: 28px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* přeložená stopa: pod titulkem text originálu pro kontrolu */
.cellwrap { min-width: 0; }
.cue .srcline { font-size: .84rem; color: var(--muted); text-align: center; padding: 3px 8px 0; }

.transport .mob { display: none; }

/* ============ telefon a tablet na výšku (jeden sloupec) ============
   Video s ovládáním zůstává při rolování přilepené nahoře, titulky rolují pod ním, osa je dole.
   Vše nad videem (hlavička, název, záložky) odroluje pryč; Zpět / Znovu proto mají druhou dvojici u přehrávače. */
@media (max-width: 960px) {
  main { padding: 12px 16px 30px; }
  /* nad videem jen dva řádky: název + Stáhnout, pod ním záložky + stopa + stav + pohled + ⋯ */
  .exp .lbl { display: none; }
  /* všechna ikonová tlačítka v hlavičce a v řádku záložek jsou stejně velká (36 × 28) a leží na jedné lince */
  .exp > button, :is(.tabbar, .timeline) button.pill, .tabbar .viewtoggle, .tabright > .menu > button { min-width: 36px; padding: 0 6px; justify-content: center; }
  :is(.tabbar, .timeline) button.pill { padding: 0 4px; gap: 3px; }
  .headtools .menu, .tabright .menu { display: flex; }
  .zoomico { display: inline-flex; color: var(--muted); }
  .pagehead h1 { min-width: 0; }
  .pagehead { flex-wrap: nowrap; align-items: center; }
  .mediahead { flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 4px; }
  .mediahead h1 { flex: 1 1 0; min-width: 0; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .headtools { width: auto; flex: none; }
  .tabs { flex-wrap: nowrap; margin-bottom: 8px; }
  .tabright { flex: 1 1 0; justify-content: flex-end; gap: 6px; padding-bottom: 4px; }
  .tabbar { flex-wrap: nowrap; gap: 6px; flex: 0 1 auto; min-width: 0; }
  .tabbar .menu:first-child { min-width: 0; flex: 0 1 auto; }
  .tabbar .track { max-width: 100%; min-width: 0; }
  .tabbar .track .tn { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  :is(.tabbar, .timeline) button.pill .pl { display: none; }
  :is(.tabbar, .timeline) button.pill .pc { display: inline; }

  .topbar { position: static; padding: 8px 16px; gap: 6px; flex-wrap: nowrap; }
  .topbar nav { gap: 0; }
  .topbar nav a { padding: 6px 8px; }
  .topbar .spacer { flex: 1 1 0; min-width: 0; }
  .topbar .brand { font-size: 1.3rem; }
  .meta, .sideinfo, .headtools .hist { display: none; }
  .tabs a { font-size: 1rem; padding: 6px 8px; }
  .work { gap: 0; }
  /* stránka je aspoň tak vysoká, aby šlo odrolovat hlavičku (video nahoře, osa dole); výška viditelné plochy se bere bez lišt prohlížeče */
  .work { display: flex; flex-direction: column; align-items: stretch; min-height: 100vh; min-height: 100dvh; }
  /* editor je sloupec: osa s ovládáním sedí vždy úplně dole (nad ní zůstane volné místo), ne hned pod posledním titulkem */
  .work > div:first-child, .work > div:first-child > div { display: flex; flex-direction: column; flex: 1 1 auto; }
  .work > div:first-child > div > .timeline { margin-top: auto; }
  .work .side { order: -1; position: sticky; top: 0; z-index: 30; background: var(--bg); gap: 6px; margin: 0 -16px 6px; padding: 6px 16px 8px; border-bottom: 1px solid var(--line-strong); }
  .player video { max-height: 34vh; }
  /* titulky přes video jsou na telefonu o 30 % menší, ať je vidět, kde se řádky lámou */
  .player .overlay { font-size: clamp(9px, 3.2cqw, 24px); }
  /* pohled „po jednom“: video nižší, ať se karta, ovládání a osa vejdou na obrazovku bez rolování */
  /* video dostane to, co zbude po kartě, ovládání a ose (kolem 505 px), ale nejvýš 40 % výšky obrazovky */
  .work:has(.cues .focus) .player video { max-height: clamp(110px, calc(100vh - 505px), 40vh); max-height: clamp(110px, calc(100dvh - 505px), 40dvh); }
  .player .seekrow { margin-top: 6px; }
  .transport .mob { display: inline-flex; }
  /* na telefonu bez rychlosti (vždy 1×; viz resetSpeed v media.js) a bez celé obrazovky */
  .transport .wide, .transport .speed, .transport .fsbtn { display: none; }
  .timeline { margin: 12px -16px -30px; padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .timeline canvas { height: 96px; }
  .timeline .row { margin-bottom: 4px; flex-wrap: nowrap; }
  .timeline .row .small, .timeline .row .label { display: none; }
  .timeline input[type=range] { flex: 1; width: auto; }
  /* při psaní (klávesnice na obrazovce) osa uhne, aby zbylo místo na text */
  .work:has(.cues textarea:focus) .timeline canvas, .work:has(.cues textarea:focus) .timeline .row > :not(.probmenu) { display: none; } /* ovládání přehrávání zůstává */
  input, select, textarea { font-size: 16px; } /* menší písmo by v iOS při zaostření přiblížilo stránku */
}
/* řádek titulku v úzkém seznamu (telefon, tablet s dlouhým videem vpravo): nahoře číslo + řečník a nástroje, pod tím text přes celou šířku, pod ním časy.
   Rozhoduje šířka seznamu, ne okna (kontejner `cues`). */
@container cues (max-width: 580px) {
  .cue { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n . del" "cell cell cell" "times times times" "stats stats stats"; gap: 6px 10px; padding: 8px 0 6px 8px; align-items: center; }
  .cue .n { grid-area: n; flex-direction: row; padding-top: 0; gap: 6px; }
  .cue .n > * { min-width: 44px; padding-left: 6px; padding-right: 6px; }
  .cue .cellwrap { grid-area: cell; }
  .cell textarea, .cell .mirror { font-size: 16px; }
  .cue .rowtools { grid-area: del; } .cue .rowtools .del, .cue .brk { margin-top: 0; visibility: visible; }
  .cue .times { grid-area: times; flex-direction: row; padding-top: 0; gap: 4px; }
  .cue .times input { width: 8.4em; font-size: 16px; padding: 0 4px; }
  .cue .stats { grid-area: stats; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 10px; padding-top: 0; }
  .cue .stats:empty { display: none; }
  .between { grid-template-columns: minmax(0, 1fr); padding: 0; border-left: 0; }
  .between .line { grid-column: 1; }
  .between .gap { right: 0; }
}
@media (max-width: 720px) {
  table.files th:nth-child(n+4):nth-child(-n+5), table.files td:nth-child(n+4):nth-child(-n+5) { display: none; }
  .drop { padding: 14px; gap: 10px; }
}

/* ============ pohled „po jednom“ (výchozí na telefonu): jeden titulek, velké ovládací prvky ============ */
.viewtoggle { display: none; }
.focus { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.focus .fnav { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; }
.focus .fnav button { height: 40px; justify-content: center; font-family: var(--font); font-size: 1.9rem; line-height: 1; padding: 0 0 4px; }
.focus .fpos { text-align: center; font: 500 1rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.focus .fpos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.focus .fpos .sp { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: 600 .76rem/1 var(--font); color: var(--muted); }
.focus .fpos .sp.turn { color: var(--fg); }
.focus .cue { display: flex; flex-direction: column; gap: 4px; padding: 0; border-left: 0; background: none; }
.focus .cue .del, .focus .cue .rowtools { display: none; }
.focus .cue .stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 0; }
.focus .cue, .focus .cellwrap, .focus .cell { width: 100%; box-sizing: border-box; }
/* pole má vždy stejnou výšku (2 řádky základního písma 16 px); delší text zmenšuje písmo (fitFocusFont), takže ovládání pod ním neposkakuje */
.focus .cell textarea, .focus .cell .mirror { font-size: var(--ffs, 16px); line-height: 1.35; padding: 10px; }
.focus .cell textarea { height: calc(2 * 1.35 * 16px + 20px) !important; min-height: 0; overflow: hidden; }
/* řádky pod polem mají pevnou výšku, ať se karta nemění podle obsahu */
.focus .cue .srcline { box-sizing: border-box; line-height: 1.3; height: calc(2 * 1.3em + 8px); overflow-y: auto; padding: 3px 8px 5px; }
.focus .cue .stats { height: 1.3em; overflow: hidden; align-items: center; }
/* texty problémů se v kartě neukazují (řádek by se prodlužoval): červený rámeček, barevné údaje a okno u štítku stavu stačí */
.focus .cue .stats .msg { display: none; }
.focus .facts button { height: 40px; justify-content: center; padding: 0 6px; font-size: .95rem; }
.focus .facts { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px 48px; gap: 6px; }
.focus .facts button:not(.wide) { font-family: var(--font); font-size: 1.2rem; letter-spacing: 0; }
.focus .fhint { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 960px) {
  .viewtoggle { display: inline-flex; }
  .timeline canvas { height: 104px; }
  .focus .fhint { display: none; } /* na telefonu je každý řádek výšky drahý */
}

/* ikony jsou vektory v barvě textu (viz icon() v util.js) */
svg.ico { display: block; flex: none; }
.playbtn { gap: 5px; } .playbtn span { opacity: .6; font-family: var(--font); }
.focus .fnav button { padding: 0; }

/* přepínač vzhledu: tmavý = srpek měsíce vlevo, světlý = kotouč vpravo. Barvy jen ze značky (černá, White Whale, červená). */
.themetoggle { position: relative; flex: none; width: 52px; height: 28px; min-height: 0; padding: 0; border-radius: 14px; border: 1px solid #454545; background: #1a1a1a; transition: background .3s, border-color .3s; }
.themetoggle:hover { border-color: var(--gl-white); }
.themetoggle::before { content: ""; position: absolute; top: 4px; left: 5px; width: 18px; height: 18px; border-radius: 50%; background: #1a1a1a; box-shadow: inset 7px -1px 0 0 var(--gl-whale); transition: transform .3s, background .3s, box-shadow .3s; }
:root[data-theme="light"] .themetoggle { background: var(--gl-whale); border-color: var(--gl-whale); }
:root[data-theme="light"] .themetoggle::before { transform: translateX(22px); background: var(--gl-red); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .themetoggle, .themetoggle::before { transition: none; } }

/* telefon a tablet: velké tlačítko přehrávání, které ukazuje jen to, co udělá (přehrát / pauza) */
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  .transport > * { height: 44px; min-height: 44px; }
  .transport .playbtn { flex: 2.4 1 0; background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .transport .playbtn span { display: none; }
  .transport .playbtn svg { width: 22px; height: 22px; }
  .transport .playbtn .i-pause, .transport .playbtn.playing .i-play { display: none; }
  .transport .playbtn.playing .i-pause { display: block; }
}

/* časová osa bez stopy (žádné titulky, překlad běží) */
.timeline.empty { display: none; }
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  /* telefon a tablet: nahoře ovládání přehrávání, pod ním osa, úplně dole přiblížení, „Držet navázané“ a stav */
  .timeline { display: flex; flex-direction: column; gap: 6px; }
  .timeline .transport { order: 1; }
  .timeline canvas { order: 2; }
  .timeline .row { order: 3; margin-bottom: 0; }
  .timeline.empty { display: flex; }
  .timeline.empty canvas, .timeline.empty .row { display: none; }
}


/* ============ dotyková zařízení (telefon i tablet): bez rychlosti, celé obrazovky a nápovědy ke zkratkám ============ */
@media (hover: none) and (pointer: coarse) {
  .transport .speed, .transport .fsbtn, .transport .wide, .side .keys, .focus .fhint, .timeline .row .small { display: none; }
  .cue .brk { display: inline-flex; }
}
/* tablet na šířku (rozložení jako na počítači): osa je v pravém sloupci pod přehrávačem, upravuje se v seznamu vlevo */
@media (hover: none) and (pointer: coarse) and (min-width: 961px) {
  .transport .mob { display: none; }
  .side .timeline { position: static; margin: 0; padding: 6px 0 0; border-top: 0; background: none; }
  .side .timeline canvas { height: 104px; }
  /* v širokém seznamu místo pro dvě tlačítka vpravo (zalomit, smazat) */
  @container cues (min-width: 581px) { .cue, .between { grid-template-columns: 46px 104px minmax(0, 1fr) 132px 64px; } }
}