/* Страница /jshshir/ — инфографика разбора номера и декодер. Префикс jr- (jshshir raqami). 02.10.2026 */

/* ——— карта 14 цифр ——— */
.jr-map{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.jr-grp{flex:1 1 150px;min-width:140px;border:1px solid #dbe4f0;border-radius:12px;padding:10px 10px 12px;background:#fff}
.jr-grp .jr-dg{display:flex;gap:4px;justify-content:center;margin-bottom:8px}
.jr-grp .jr-dg span{display:flex;align-items:center;justify-content:center;width:26px;height:34px;border-radius:7px;font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff}
.jr-grp .jr-cap{text-align:center;font-size:13px;line-height:1.35;color:#4a5568}
.jr-grp .jr-cap b{display:block;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:#1b3a63;margin-bottom:2px}
.jr-g1 .jr-dg span{background:#134e8e}
.jr-g2 .jr-dg span{background:#1f7a4d}
.jr-g3 .jr-dg span{background:#b7791f}
.jr-g4 .jr-dg span{background:#7b4fb5}
.jr-g5 .jr-dg span{background:#b23a48}
.jr-g1{border-color:#b9cde5;background:#f4f8fd}
.jr-g2{border-color:#bfe0cd;background:#f4fbf7}
.jr-g3{border-color:#ecd9ae;background:#fdfaf2}
.jr-g4{border-color:#d8c9ee;background:#faf7fd}
.jr-g5{border-color:#eec4ca;background:#fdf5f6}
.jr-full{margin:4px 0 20px;text-align:center;font:700 clamp(17px,4.6vw,25px)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:#12283f;word-break:break-all}
.jr-full i{font-style:normal;padding:0 1px}
.jr-full i:nth-child(1){color:#134e8e}
.jr-full i:nth-child(2){color:#1f7a4d}
.jr-full i:nth-child(3){color:#b7791f}
.jr-full i:nth-child(4){color:#7b4fb5}
.jr-full i:nth-child(5){color:#b23a48}

/* ——— таблица кода пола и века ——— */
.jr-sex{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.jr-sex div{flex:1 1 150px;border:1px solid #dbe4f0;border-radius:10px;padding:10px 12px;background:#fff;font-size:14px;line-height:1.4}
.jr-sex div b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#134e8e;color:#fff;font:700 15px/1 system-ui;margin-right:8px;vertical-align:middle}
.jr-sex div.jr-old b{background:#8a97a8}

/* ——— где искать номер: схемы документов ——— */
.jr-docs{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0}
.jr-doc{flex:1 1 280px;border:1px solid #dbe4f0;border-radius:14px;padding:14px;background:#fff}
.jr-doc h3{margin:0 0 4px;font-size:16px;color:#12283f}
.jr-doc p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#4a5568}
.jr-doc svg{display:block;width:100%;height:auto;margin:6px 0 2px;border-radius:8px}

/* ——— декодер ——— */
.jr-dec{border:1px solid #c9d8ea;border-radius:14px;padding:16px;background:linear-gradient(180deg,#f6f9fd,#fff);margin:18px 0}
.jr-dec>label{display:block;font-weight:700;color:#12283f;margin-bottom:8px}
.jr-row{display:flex;flex-wrap:wrap;gap:8px}
.jr-row input{flex:1 1 220px;min-width:0;padding:12px 14px;border:1px solid #b9cde5;border-radius:10px;font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#12283f;background:#fff}
.jr-row input:focus{outline:2px solid #134e8e;outline-offset:1px}
.jr-row button{padding:12px 18px;border:0;border-radius:10px;background:#134e8e;color:#fff;font:600 15px/1 system-ui;cursor:pointer}
.jr-row button.ghost{background:#fff;color:#134e8e;border:1px solid #b9cde5}
.jr-row button:hover{filter:brightness(1.08)}
.jr-cnt{margin:8px 0 0;font-size:13px;color:#6b7b8f}
.jr-cnt b{color:#134e8e}
.jr-err{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fdecee;border:1px solid #f0bcc3;color:#8a2733;font-size:14px;line-height:1.45}
.jr-out{margin:14px 0 0}
.jr-out table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #dbe4f0;border-radius:10px;overflow:hidden}
.jr-out th,.jr-out td{padding:9px 12px;text-align:left;font-size:14px;border-bottom:1px solid #eef3f9}
.jr-out th{width:46%;color:#4a5568;font-weight:600;background:#f8fbfe}
.jr-out td{color:#12283f;font-weight:600}
.jr-out tr:last-child th,.jr-out tr:last-child td{border-bottom:0}
.jr-priv{margin:10px 0 0;font-size:13px;line-height:1.5;color:#6b7b8f}

/* ——— чего по номеру узнать нельзя ——— */
.jr-no{margin:14px 0;padding:0;list-style:none}
.jr-no li{position:relative;padding:8px 10px 8px 34px;border-bottom:1px solid #eef3f9;font-size:14px;line-height:1.5;color:#3d4a5c}
.jr-no li:last-child{border-bottom:0}
.jr-no li:before{content:"✕";position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;background:#fdecee;color:#b23a48;font:700 11px/18px system-ui;text-align:center}
.jr-ok li:before{content:"✓";background:#eaf7f0;color:#1f7a4d}

@media (max-width:560px){
  .jr-grp{flex:1 1 100%}
  .jr-grp .jr-dg span{width:30px;height:38px;font-size:17px}
}

/* Предупреждающая плашка: .callout.warn живёт в edu.css, который на этой странице
   не подключается, поэтому правило повторено здесь — вид тот же. */
.callout.warn{background:#fffbeb;border:1px solid #fcd34d;color:#78350f}
.callout.ok{background:#f0fdf4;border:1px solid #86efac;color:#14532d}