/* Šifra — pure B&W minimal */
@font-face {
  font-family: 'JinePismo';
  /* Primary cipher font. Bump the ?v= query whenever the font file
     is regenerated (e.g. after running scripts/extend-font.py) so
     browsers pick up the new glyphs instead of serving the cached
     copy. */
  src: url('assets/fonts/jinepismo-jine.otf?v=3') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inkove';
  /* Per-glyph fallback for codepoints the new font is missing:
     U+00DE (Þ, "noha"), U+021F (ȟ, "den"), U+248B/D/F/2490
     (⒋⒍⒏⒐ — 4/6/8/9), U+E000-U+E00C (ligature glyphs for
     "Dobrý den", "fi", etc.). The browser only reaches this
     declaration for glyphs JinePismo lacks. */
  src: url('assets/fonts/inkove-Regular.otf?v=7') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'StarePismo';
  /* Serif companion to JinePismo — used for every body-text / Latin
     surface (page background, Czech input textarea, fallback for
     unknown glyphs, etc.). Covers the full Czech alphabet (Á-Ž). */
  src: url('assets/fonts/starepismo-Regular.otf?v=1') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100vh;
  background: #fff;
  color: #000;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: 2rem 1rem 4rem;
  display: flex;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 720px;
}

/* Header */
.hd { margin-bottom: 1.5rem; }
.hd h1 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.hd p {
  font-size: 13px;
  margin-top: 4px;
}

/* Frame — thin black bordered card */
.frame {
  border: 1px solid #000;
  margin-bottom: 14px;
  background: #fff;
}

.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 14px 8px;
  border-bottom: 1px solid #000;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
}

.divider {
  height: 1px;
  background: #000;
}

/* Input */
textarea {
  width: 100%;
  min-height: 110px;
  border: none;
  background: transparent;
  resize: vertical;
  font-family: 'JinePismo', 'Inkove', 'StarePismo', 'Georgia', serif;
  font-size: 32px;
  color: #000;
  outline: none;
  line-height: 1.5;
  padding: 14px;
  letter-spacing: 0.04em;
  /* Enable both standard and discretionary ligatures so the font's
     GSUB substitutions fire — "Dl" → D_l, "U." → U_period, "fi" → f_i,
     "o9" → o_nine, etc. liga is on by default in most browsers but dlig
     isn't, and the font splits its substitutions across both. */
  font-feature-settings: 'liga' 1, 'dlig' 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Translated token strip */
.tokens {
  padding: 14px;
  min-height: 56px;
  font-size: 16px;
  line-height: 1.8;
}
.tokens .gly { font-weight: 600; }
.tokens .sep { margin: 0 6px; }
.tokens .unk { text-decoration: underline dotted; }
.muted {
  font-style: italic;
  font-size: 13px;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
}

/* Buttons */
.btnrow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.btn {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  letter-spacing: 0.02em;
}
.btn:hover { background: #000; color: #fff; }
.btn:active { background: #000; color: #fff; }
.btn.primary { background: #000; color: #fff; }
.btn.primary:hover { background: #fff; color: #000; }

.stat {
  font-size: 12px;
  margin-left: auto;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
}

/* Output */
.output {
  padding: 14px;
  font-size: 17px;
  line-height: 1.75;
  min-height: 60px;
}

/* Czech input — keep in a plain serif so the user sees what they're
   typing in normal Latin letters. The default textarea rule uses
   JinePismo, which would render "ahoj" as cipher glyphs and defeat the
   point of the cs→glyphs translator. */
#cs-input {
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  font-size: 18px;
  letter-spacing: normal;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
  min-height: 80px;
}

/* Czech → Glyphs output: render in JinePismo so the user sees the cipher
   the same way it appears in the keygrid / text input. Latin
   fallbacks (proper names, untranslated words) render in the system
   serif because the font's Latin coverage is limited. */
.cs-output {
  padding: 14px;
  font-family: 'JinePismo', 'Inkove', 'StarePismo', 'Georgia', serif;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  min-height: 60px;
  word-break: break-word;
  font-feature-settings: 'liga' 1, 'dlig' 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.cs-output .muted {
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
}
.output .meta {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #000;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
}

/* Key search */
.keyhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
}
#search {
  border: 1px solid #000;
  padding: 6px 10px;
  font-size: 12px;
  background: #fff;
  color: #000;
  outline: none;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  min-height: 32px;
  width: 160px;
  max-width: 50%;
}

/* Key grid */
.keygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.kcell {
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  min-height: 64px;
  background: #fff;
  user-select: none;
}
.kcell:hover, .kcell:active { background: #000; }
.kcell:hover .kg, .kcell:active .kg,
.kcell:hover .kw, .kcell:active .kw { color: #fff; }
.kg {
  font-size: 26px;
  line-height: 1;
  color: #000;
  font-family: 'JinePismo', 'Inkove', 'StarePismo', 'Georgia', serif;
  font-feature-settings: 'liga' 1, 'dlig' 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.kw {
  font-size: 10px;
  color: #000;
  text-align: center;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove grid right-border on last column edges — visually clean */
.keygrid { border-top: 0; }

/* Cells that host multiple meanings — subtle indicator (bottom-right dot)
   so the user knows clicking will open a picker menu. */
.kcell.has-menu { position: relative; }
.kcell.has-menu::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
  opacity: 0.55;
}
.kcell.has-menu:hover::after,
.kcell.has-menu:active::after { background: #fff; opacity: 1; }

/* Translation-less cells — font shape only, shown with an em-dash. */
.kcell .kw { opacity: 1; }
.kcell .kw:empty::before { content: '—'; opacity: 0.35; }

/* Multi-char combo cells (U., 9o, -D, …) — slight emphasis so the
   composite nature reads. */
.kcell.combo .kg { letter-spacing: -0.02em; }

/* ─── Picker menu (shown when a cell has multiple meanings) ─── */
.gmenu {
  position: absolute;
  z-index: 50;
  min-width: 160px;
  max-width: 260px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 3px 3px 0 #000;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.gmenu[hidden] { display: none; }
.gmenu-item {
  appearance: none;
  border: 0;
  border-bottom: 1px solid #000;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  min-height: 40px;
}
.gmenu-item:last-child { border-bottom: 0; }
.gmenu-item:hover,
.gmenu-item:focus { background: #000; color: #fff; outline: none; }
.gmenu-g {
  font-family: 'JinePismo', 'Inkove', 'StarePismo', 'Georgia', serif;
  font-size: 22px;
  line-height: 1;
  min-width: 28px;
  text-align: center;
  font-feature-settings: 'liga' 1, 'dlig' 1;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.gmenu-w { flex: 1; }

/* Footer */
.ft {
  margin-top: 2rem;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.05em;
  font-family: 'StarePismo', 'Georgia', 'Times New Roman', serif;
}

/* Mobile */
@media (max-width: 520px) {
  body { padding: 1rem 0.75rem 3rem; }
  textarea { font-size: 20px; }
  .keygrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .kcell { min-height: 60px; }
  .kg { font-size: 18px; }
  #search { width: 120px; }
  .hd h1 { font-size: 20px; }
  .btn { flex: 1 0 auto; }
  .stat { flex-basis: 100%; text-align: right; }
}