/* v250: Sami keyboard — mobile-first responsive grid.
   Reference mockup: dev_samples/screenshots/screenshot_keys1.jpeg
   v264: 8 sarainta per rivi (6 oli liian leveä, mahtui huonosti puhelimen
   ruudulle), max-width 480 px → kahdeksan ympyrää á ~55 px puhelimella. */

.sami-kb-v2 {
  display: grid;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: 6px;
  max-width: 600px;
  margin: 8px 0;
  user-select: none;
  -webkit-user-select: none;
}
.sami-kb-v2.sami-kb-wide { grid-template-columns: repeat(12, minmax(34px, 1fr)); max-width: 900px; }

.sami-kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v261: aspect-ratio pakottaa nappi-leveyden ja korkeuden samaksi, joten
     1fr-grid:n leveydestä riippumatta nappi pysyy täydellisenä ympyränä. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #cfe8ff 0%, #5ea4ee 100%);
  color: #0a2a4a;
  border: none;
  /* v307: nappi on container-query -kontti, jotta merkki/ikoni (.sami-kb-glyph)
     voidaan mitoittaa SUHTEESSA pallukan halkaisijaan (cqi). Näin fontti pysyy
     aina pallukan sisällä ja täyttää sen tasaisesti KAIKISSA kolmessa
     fonttikoossa (A-/A/A+) ja kaikilla saamen kielten merkeillä sekä
     aputoimintojen ikoneilla — eikä jää liian pieneksi leveillä ruuduilla
     (Windows) eikä vuoda yli kapeilla. */
  container-type: inline-size;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  touch-action: manipulation;
  padding: 0;
}
.sami-kb-btn:active { transform: scale(0.95); }

/* v307: Merkki/ikoni-kääre. Täyttää pallukan ja keskittää sisällön sekä
   VAAKA- että PYSTYSUUNNASSA (flex center + line-height:1). Fonttikoko on
   suhteessa pallukan halkaisijaan (cqi = 1% napin leveydestä; nappi on neliö
   joten leveys = halkaisija). min()-katto 62cqi takaa ettei merkki koskaan
   vuoda yli vaikka A+ skaalaisi. Fallback 24px jos selain ei tue cq-yksiköitä.
   v292-font-stack pidetään (Sámi-glyfit ǧ ǩ ǥ tarkkeineen oikein). */
.sami-kb-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-family: 'Segoe UI', 'Helvetica Neue', 'Noto Sans', 'DejaVu Sans',
               'Arial Unicode MS', system-ui, sans-serif;
  font-variant-ligatures: none;
  font-feature-settings: "ccmp" off;
  font-weight: bold;
  font-size: 24px; /* fallback ilman container-query-tukea */
  font-size: min(calc(46cqi * var(--pt-scale, 1)), 62cqi);
}
.sami-kb-btn.sami-kb-caps {
  background: radial-gradient(circle at 30% 30%, #fff4c2 0%, #f0b410 100%);
}
.sami-kb-btn.sami-kb-caps.on { background: radial-gradient(circle at 30% 30%, #f4dc3c 0%, #d18a00 100%); color: #fff; }
.sami-kb-btn.sami-kb-backspace { background: radial-gradient(circle at 30% 30%, #ffd0d0 0%, #d9534f 100%); color: #fff; }
.sami-kb-btn.sami-kb-clear     { background: radial-gradient(circle at 30% 30%, #ffcfa0 0%, #e67e22 100%); color: #fff; }
/* v307: aputoiminto-ikonit (caps/backspace/clear) hieman merkkejä pienemmiksi,
   jotta ne ovat visuaalisesti tasapainossa ja varmasti pallukan sisällä. */
.sami-kb-caps .sami-kb-glyph,
.sami-kb-backspace .sami-kb-glyph,
.sami-kb-clear .sami-kb-glyph {
  font-size: 18px; /* fallback */
  font-size: min(calc(40cqi * var(--pt-scale, 1)), 52cqi);
}
/* v317: korosta yhden merkin poisto (backspace, x) ja koko sanan poisto (clear,
   roskakori) -ikonit muita aputoimintoja suuremmiksi. */
.sami-kb-backspace .sami-kb-glyph,
.sami-kb-clear .sami-kb-glyph {
  font-size: 22px; /* fallback */
  font-size: min(calc(52cqi * var(--pt-scale, 1)), 60cqi);
}

/* v308: Matkapuhelimilla (kapea ruutu, pallukat pieniä) näppäinten fontit
   isommiksi. Uusi A- vastaa entistä A+ -kokoa ja A/A+ kasvavat siitä
   (kerroin --pt-scale: A- 0.85, A 1.0, A+ 1.2). Tietokoneen (leveä ruutu)
   koot EIVÄT muutu — tämä media query osuu vain <=600px ruutuihin. */
@media (max-width: 600px) {
  .sami-kb-glyph {
    font-size: min(calc(65cqi * var(--pt-scale, 1)), 74cqi);
  }
  .sami-kb-caps .sami-kb-glyph,
  .sami-kb-backspace .sami-kb-glyph,
  .sami-kb-clear .sami-kb-glyph {
    font-size: min(calc(57cqi * var(--pt-scale, 1)), 64cqi);
  }
  /* v317: backspace + clear korostettuina myös mobiilissa. */
  .sami-kb-backspace .sami-kb-glyph,
  .sami-kb-clear .sami-kb-glyph {
    font-size: min(calc(68cqi * var(--pt-scale, 1)), 74cqi);
  }
}

.sami-kb-capture { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* v326: Tehtäväeditorin näppäimistön pallukat selvästi pienemmiksi, jotta ne eivät vie
   turhaa tilaa lomakkeessa.
   v327: SAMA pieni koko myös tehtäväsivulla (julkaistu koe) — aiemmin oppilaan
   näppäimistö venyi 1fr-sarakkeilla 600 px leveäksi ja oli tietokoneen näytöllä
   turhan iso ja hallitseva. Nyt molemmat käyttävät samaa mitoitusta. */
.sami-keyboard .sami-kb-v2,
.exam-keyboard .sami-kb-v2 {
  grid-template-columns: repeat(8, minmax(22px, 38px));
  max-width: 340px;
  gap: 4px;
}
.sami-keyboard .sami-kb-v2.sami-kb-wide,
.exam-keyboard .sami-kb-v2.sami-kb-wide {
  grid-template-columns: repeat(12, minmax(22px, 38px));
  max-width: 500px;
}
/* Editorissa näppäimistö lomakkeen vasempaan laitaan... */
.sami-keyboard:not(.exam-keyboard) .sami-kb-v2 { justify-content: start; }
/* ...ja tehtäväsivulla keskelle näyttöä (v327). */
.exam-keyboard .sami-kb-v2 {
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}