/* Math-pole se šablonami (matpole.js) — pole + sdílený panel klávesnice.
   Barvy jen přes CSS proměnné kvůli tmavému režimu. */

/* ── pole ── */
.mp-obal { width: 100%; position: relative; }

/* text jen pro čtečku (hodnota pole, hlášky o přepnutí patra) */
.mp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* upozornění pod polem (neúplný zlomek / mocnina) */
.mp-tip {
  margin-top: 6px; font-size: .9rem; font-weight: 700; line-height: 1.3;
  color: var(--warn-ink, var(--oranzova-tmava, #a15c07));
}
.mp-pole--neuplne .mp-prazdno { border-color: var(--warn-ink, var(--oranzova-tmava, #a15c07)); border-style: solid; }

.mp-pole {
  min-height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  font-size: 1.7rem;
  line-height: 1.2;
  padding: 10px 14px;
  border: 1.5px solid var(--ram-tmavy);
  border-radius: 12px;
  background: var(--pozadi);
  color: var(--text);
  cursor: text;
  overflow-x: auto;
}
.mp-pole--akt { border-color: var(--fialova); box-shadow: 0 0 0 3px var(--fialova-svetla); }
.mp-pole--zamceno { opacity: .6; }
.mp-pole:focus { outline: none; }
/* fokus z klávesnice musí být vidět (WCAG 2.4.7) — i když pole ještě nepíše */
.mp-pole:focus-visible { border-color: var(--fialova); box-shadow: 0 0 0 3px var(--fialova-svetla); }

.mp-vyzva { font-size: 1rem; color: var(--text-tlumeny); font-style: italic; }
.mp-znak { display: inline-block; white-space: pre; }
/* znaky a výzva se sází z data-atributu: hodnotu textboxu pro čtečku pak tvoří jen
   skrytý text .mp-sr („12", ne „1⏎2") — viz matpole.js prekresli */
.mp-znak::before { content: attr(data-z); }
.mp-vyzva::before { content: attr(data-vyzva); }

.mp-zlomek { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .08em; }
.mp-cara { height: 2px; width: 100%; background: currentColor; margin: 2px 0; border-radius: 2px; }
.mp-mocnina { font-size: .62em; vertical-align: super; }

.mp-box {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: .7em; min-height: 1em; padding: 0 .16em;
  border: 1.5px solid transparent; border-radius: 6px;
}
.mp-box--akt { border-color: var(--fialova); background: var(--fialova-svetla); }
/* na dotyku větší terč pro ťuknutí do patra (jmenovatel měl 26 × 27 px, A1-3) */
@media (pointer: coarse) {
  .mp-zlomek .mp-box { min-width: 1.3em; min-height: 1.15em; }
}
.mp-prazdno {
  display: inline-block; width: .55em; height: .85em;
  border: 1.5px dashed var(--ram-tmavy); border-radius: 3px;
}

/* režim abc (slovní odpověď) */
.mp-text-radek { display: flex; gap: 8px; align-items: stretch; }
.mp-text {
  flex: 1; box-sizing: border-box; font-size: 1.2rem; font-family: var(--font);
  padding: 12px 14px; border: 1.5px solid var(--ram-tmavy); border-radius: 12px;
  background: var(--pozadi); color: var(--text);
}
.mp-text:focus { outline: none; border-color: var(--fialova); box-shadow: 0 0 0 3px var(--fialova-svetla); }
.mp-zpet-num {
  flex: 0 0 auto; width: 52px; font-size: 1.3rem; cursor: pointer;
  border: 1.5px solid var(--ram); border-radius: 12px; background: var(--pozadi-tlumene); color: var(--text);
}

/* ── sdílený panel klávesnice (dole) ── */
body.mp-panel-otevren { padding-bottom: var(--mp-panel-vyska, 0); }

.mp-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--hlavicka-pozadi, var(--pozadi));
  backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--ram);
  padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
}
.mp-panel-mrizka {
  display: grid;
  grid-template-columns: repeat(var(--mp-sloupcu, 4), 1fr);
  gap: 6px;
  max-width: 520px;
  margin: 0 auto;
}
.mp-klavesa {
  min-height: 46px;
  font-size: 1.3rem;
  font-family: var(--font);
  border: 1.5px solid var(--ram);
  border-radius: 12px;
  background: var(--pozadi);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mp-klavesa:active { background: var(--fialova-svetla); transform: translateY(1px); }
.mp-klavesa sup { font-size: .6em; }
.mp-kl-spec { background: var(--fialova-svetla); color: var(--fialova); font-weight: 800; }
.mp-kl-abc { background: var(--pozadi-tlumene); font-weight: 700; }
.mp-kl-smaz { color: var(--cervena); }
.mp-kl-hotovo { background: var(--fialova); color: var(--on-brand,#fff); font-weight: 800; border-color: var(--fialova); }

.mp-ik-zl { display: inline-flex; flex-direction: column; align-items: center; font-size: .6em; line-height: 1; }
.mp-ik-zl span:nth-child(2) { height: 2px; width: 1.2em; background: currentColor; margin: 2px 0; }