/* Спільний вигляд панелі "Обрати емблему" — gramota-editor.html і
   portrait.html підключають цей файл, тож зміна тут одразу оновлює обидві
   сторінки. Очікує, що сторінка вже має свій власний .sym-option/
   .sym-option-lbl (Символ/Печатка/Підпис/Фон й інші пікери лишаються
   локальними — це лише 3-варіантний "груповий" ряд Емблеми поверх них). */

/* Один підрозділ = ОДНА плитка (та сама рамка/відступи, що й звичайний
   .sym-option), а всередині — 3 варіанти (польова / стандартна / значок)
   поруч, без власних рамок кожен, лише тонкий розділювач між ними. */
.sym-option-group { border:2px solid var(--border); border-radius:0; padding:24px 32px; cursor:default; display:flex; flex-direction:column; align-items:center; gap:14px; transition:border-color 150ms; }
.sym-option-group:hover { border-color:#FF6B3A; }
.sym-option-group .sym-option-row { display:flex; flex-direction:row; align-items:center; gap:0; }
/* Фіксована коробка на варіант (не лише висота) — інакше широкий значок
   (напр. 9-й армійський корпус) розтягує рядок і зсуває сусідні емблеми.
   Картинка масштабується всередині коробки, зберігаючи пропорції
   (object-fit:contain), а не просто задає власну ширину. box-sizing:
   content-box (не успадковує сторінковий border-box) — інакше фіксована
   ширина з'їдає власний padding і стискає картинку до смужки. */
.sym-option-group .sym-option { border:none; border-radius:0; padding:0 14px; cursor:pointer; background:none; transition:background 150ms; width:130px; height:160px; display:flex; align-items:center; justify-content:center; box-sizing:content-box; }
.sym-option-group .sym-option:hover,.sym-option-group .sym-option.active { border:none; background:#FFF1EC; }
.sym-option-group .sym-option + .sym-option { border-left:1.5px solid var(--border); }
.sym-option-group .sym-option img { max-height:160px; max-width:130px; width:auto; height:auto; object-fit:contain; display:block; }