/* Gaya penggambar soal: Digit Symbol dan figural.

   Dipakai dua halaman yang tidak berbagi kerangka: halaman latihan yang
   memuat app.css lewat kepala(), dan ruang ujian yang berdiri sendiri dengan
   ujian.css. Keduanya memakai nama variabel yang berbeda untuk palet yang
   nilainya sama, jadi keduanya dipetakan dulu ke satu kosakata di bawah ini.

   Urutan var() dibaca begini: pakai nama app.css bila ada, kalau tidak pakai
   nama ujian.css, kalau tidak ada juga pakai nilai harfiahnya. Nilai harfiah
   itu penting - ia yang membuat berkas ini tetap benar bila kelak dimuat
   halaman ketiga yang tidak memakai kosakata mana pun. */

:root {
  --gs-teks:   var(--text-primary,   var(--teks,   #fff));
  --gs-teks2:  var(--text-secondary, var(--teks2,  #c1c1c1));
  --gs-redup:  var(--text-muted,     var(--redup,  #8a8a8a));
  --gs-garis:  var(--border-color,   var(--garis,  rgba(193,193,193,.16)));
  --gs-latar:  var(--bg-primary,     var(--bg,     #060606));
  --gs-latar2: var(--bg-secondary,   var(--bg3,    #171914));
  --gs-ui:     var(--font-ui,        var(--ui,     'Manrope', system-ui, sans-serif));
  --gs-judul:  var(--font-heading,   var(--judul,  'Big Shoulders Display', Impact, sans-serif));
}

/* --- penggambar soal figural (markup dirakit /js/app/gambar-soal.js) --- */
.gs-panel { padding: 18px 20px; border-radius: 8px; background: var(--gs-latar);
            border: 1px solid var(--gs-garis); margin-bottom: 22px; overflow-x: auto }
.gs-uji   { border-top: 1px solid var(--gs-garis); padding-top: 14px; margin-top: 4px }
.gs-baris { margin-bottom: 16px }
.gs-judul { font-family: var(--gs-ui); font-size: .7rem; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--gs-redup); margin-bottom: 8px }
.gs-deret { display: flex; gap: 12px; flex-wrap: wrap }
.gs-figur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px }
.gs-svg   { color: var(--gs-teks); border: 1px solid var(--gs-garis);
            border-radius: 8px; background: var(--gs-latar) }
.gs-label { font-family: var(--gs-ui); font-size: .68rem; letter-spacing: 1px;
            text-transform: uppercase; color: var(--gs-redup) }

/* --- Digit Symbol ---

   Aturan inilah yang paling menentukan. Simbolnya adalah jalur garis, bukan
   bidang; tanpa fill:none dan stroke, SVG memakai bawaannya - terisi hitam,
   tanpa garis - dan seluruh kunci simbol menjadi tidak terbaca. */
.gs-simbol { stroke: currentColor; stroke-width: 2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; color: var(--gs-teks) }
.gs-kunci  { margin-bottom: 18px }
.gs-kunci-tabel { border-collapse: collapse; width: auto }
.gs-kunci-tabel td { border: 1px solid var(--gs-garis); padding: 6px 10px;
                     text-align: center; min-width: 46px }
.gs-kunci-angka td { font-family: var(--gs-ui); font-weight: 700; font-size: .9rem;
                     color: var(--gs-teks2); background: var(--gs-latar2) }
.gs-kunci-simbol td { line-height: 0 }
.gs-tanya  { display: flex; flex-direction: column; align-items: center; gap: 10px;
             padding-top: 18px }
.gs-tanya-teks  { font-family: var(--gs-ui); font-size: .8rem; letter-spacing: 1px;
                  text-transform: uppercase; color: var(--gs-redup) }
.gs-tanya-angka { font-family: var(--gs-judul); font-size: 3rem; line-height: 1;
                  color: var(--gs-teks) }