/* Форматировщик телефонов — стайл-скоуп #tel. Бренд-переменные из article.css,
   ключевые продублированы как фолбэк. Mobile-first от 390px. */
#tel{
  --paper:#F4F3EE;--surface:#fff;--ink:#15181C;--ink-soft:#3A4048;--muted:#5f666e;
  --line:#E2E0D7;--line-strong:#CFCDC2;--lime:#C8F048;--lime-ink:#161a08;--danger:#B23B3B;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  max-width:900px;margin:0 auto;padding:0 20px 72px;color:var(--ink);
}
#tel *{box-sizing:border-box}

/* ── Хиро ── */
.tel-hero{padding:clamp(24px,5vw,52px) 0 clamp(10px,3vw,22px)}
.tel-crumbs{font-size:13px;color:var(--muted);margin:0 0 16px}
.tel-crumbs a{color:var(--muted);text-decoration:none}
.tel-crumbs a:hover{color:var(--ink)}
.tel-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.tel-eyebrow b{color:var(--ink)}
.tel-hero h1{font-size:clamp(27px,5.2vw,44px);font-weight:800;letter-spacing:-.022em;line-height:1.08;margin:0 0 16px;text-wrap:balance;hyphens:manual}
.tel-lead{font-size:clamp(16px,2.3vw,19px);line-height:1.6;color:var(--ink-soft);margin:0;max-width:64ch;text-wrap:pretty}

/* ── Карточки ── */
.tel-card{background:var(--surface);border:1.5px solid rgba(21,24,28,.10);border-radius:20px;padding:clamp(18px,3vw,26px);margin:0 0 22px;box-shadow:0 14px 40px rgba(20,24,28,.05)}
.tel-card-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}

/* ── Drop-zone ── */
.tel-drop{border:2px dashed var(--line-strong);border-radius:16px;background:var(--paper);
  padding:clamp(26px,5vw,44px) 20px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;outline:none}
.tel-drop:hover,.tel-drop:focus-visible{border-color:var(--ink);background:#fff}
.tel-drop.is-drag{border-color:var(--lime);background:#fbffe9;border-style:solid}
.tel-drop-ic{width:44px;height:44px;margin:0 auto 12px;display:block;color:var(--ink-soft)}
.tel-drop-t{font-weight:700;font-size:16px;margin:0 0 6px}
.tel-drop-t u{color:var(--ink);text-underline-offset:3px}
.tel-drop-sub{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.tel-filename{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin:12px 0 0;text-align:center;overflow-wrap:anywhere}

.tel-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:13px}
.tel-or::before,.tel-or::after{content:"";flex:1;height:1px;background:var(--line)}
.tel-paste-btn{width:100%;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);padding:12px;font-weight:600;font-size:14.5px;color:var(--ink-soft);cursor:pointer;transition:border-color .15s ease,color .15s ease}
.tel-paste-btn:hover{border-color:var(--ink);color:var(--ink)}
.tel-paste-wrap{margin-top:12px}
.tel-paste-wrap textarea{width:100%;min-height:110px;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 14px;font-family:var(--mono);font-size:14px;background:var(--paper);color:var(--ink);resize:vertical}
.tel-paste-wrap textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.tel-paste-go{margin-top:10px;border:1.5px solid var(--ink);border-radius:11px;background:var(--ink);color:#fff;padding:10px 20px;font-weight:700;font-size:14px;cursor:pointer}
.tel-example{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--lime);padding-bottom:1px}
.tel-example:hover{border-bottom-color:var(--ink)}

/* ── Настройки ── */
.tel-set-group{margin:0 0 22px}
.tel-set-group:last-child{margin-bottom:0}
.tel-set-h{font-weight:700;font-size:15px;margin:0 0 4px}
.tel-set-hint{font-size:13px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.tel-cols{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tel-col{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;background:var(--surface);transition:border-color .15s ease,background .15s ease}
.tel-col:hover{border-color:var(--line-strong)}
.tel-col:has(input:checked){border-color:var(--ink);background:#fbfbf8}
.tel-col input{width:17px;height:17px;accent-color:var(--ink);flex:none;cursor:pointer}
.tel-col-t{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.tel-toggle{display:inline-flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.tel-toggle input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}

/* Формат вывода — radio-карточки */
.tel-fmts{display:grid;gap:9px}
.tel-fmt{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface);padding:13px 16px;cursor:pointer;text-align:left;width:100%;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.tel-fmt:hover{border-color:var(--line-strong)}
.tel-fmt:focus-visible{outline:none;border-color:var(--ink)}
.tel-fmt.is-on{border-color:var(--ink);background:var(--lime);box-shadow:0 8px 20px rgba(200,240,72,.35)}
.tel-fmt-radio{width:19px;height:19px;border-radius:50%;border:2px solid var(--line-strong);flex:none;position:relative;transition:border-color .15s}
.tel-fmt.is-on .tel-fmt-radio{border-color:var(--ink)}
.tel-fmt.is-on .tel-fmt-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.tel-fmt-ex{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.tel-fmt-d{font-size:12.5px;color:var(--muted);margin-left:auto;text-align:right;line-height:1.35}
.tel-fmt.is-on .tel-fmt-d{color:var(--lime-ink)}

/* Опции-чекбоксы и radio-списки */
.tel-opts{display:grid;gap:11px}
.tel-opt{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.4}
.tel-opt input{width:18px;height:18px;accent-color:var(--ink);flex:none;margin-top:1px;cursor:pointer}
.tel-radios{display:grid;gap:9px}
.tel-radio{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:11px;padding:11px 14px;cursor:pointer;background:var(--surface);font-size:14px;transition:border-color .15s}
.tel-radio:hover{border-color:var(--line-strong)}
.tel-radio:has(input:checked){border-color:var(--ink);background:#fbfbf8}
.tel-radio input{width:17px;height:17px;accent-color:var(--ink);flex:none;margin-top:1px;cursor:pointer}
.tel-radio b{font-weight:600}
.tel-radio span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.tel-cols-grid{display:grid;gap:22px}
@media(min-width:680px){.tel-cols-grid{grid-template-columns:1fr 1fr}}

.tel-process{width:100%;margin-top:6px;border:1.5px solid var(--lime);border-radius:14px;background:var(--lime);color:var(--lime-ink);
  padding:16px;font-weight:800;font-size:17px;letter-spacing:-.01em;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.tel-process:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 12px 28px rgba(200,240,72,.5)}
.tel-process[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.tel-status{font-size:13.5px;color:var(--muted);margin:12px 0 0;min-height:1.2em;line-height:1.5}

/* ── Прогресс ── */
.tel-progress{margin:0 0 22px}
.tel-progress-track{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.tel-progress-bar{height:100%;width:0;background:var(--lime);border-radius:999px;transition:width .2s ease}
.tel-progress-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.tel-progress-pct{font-weight:700;font-size:15px;color:var(--ink)}

/* ── Результат ── */
.tel-stats{display:grid;gap:11px;grid-template-columns:repeat(2,1fr);margin:0 0 22px}
@media(min-width:620px){.tel-stats{grid-template-columns:repeat(4,1fr)}}
.tel-stat{border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;background:var(--surface)}
.tel-stat-n{font-size:clamp(22px,4vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1}
.tel-stat-l{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.tel-stat.is-danger .tel-stat-n{color:var(--danger)}
.tel-stat.is-valid .tel-stat-n{color:#1f7a34}

.tel-tabs{display:flex;gap:8px;margin:0 0 12px}
.tel-tab{border:1.5px solid var(--line);border-radius:10px;background:var(--surface);padding:9px 16px;font-weight:600;font-size:13.5px;color:var(--ink-soft);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tel-tab:hover{border-color:var(--line-strong)}
.tel-tab.is-on{border-color:var(--ink);background:var(--ink);color:#fff}

.tel-table-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:14px;margin:0 0 18px}
.tel-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.tel-table th{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-align:left;padding:11px 13px;background:var(--paper);border-bottom:1.5px solid var(--line);white-space:nowrap;font-weight:600}
.tel-table td{padding:10px 13px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top;overflow-wrap:anywhere}
.tel-table tr:last-child td{border-bottom:none}
.tel-table .tel-num{font-family:var(--mono);font-size:13.5px;color:var(--ink);white-space:nowrap}
.tel-table .tel-empty{text-align:center;color:var(--muted);font-style:italic;padding:26px}

.tel-exports{display:flex;flex-wrap:wrap;gap:9px}
.tel-btn{border:1.5px solid var(--line-strong);border-radius:11px;background:var(--surface);padding:11px 16px;font-weight:600;font-size:13.5px;color:var(--ink);cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.tel-btn:hover:not([disabled]){transform:translateY(-2px);border-color:var(--ink);box-shadow:0 8px 18px rgba(20,24,28,.08)}
.tel-btn[disabled]{opacity:.45;cursor:default;transform:none}
.tel-btn.tel-btn-lime{border-color:var(--lime);background:var(--lime);color:var(--lime-ink)}
.tel-btn.tel-btn-lime:hover:not([disabled]){box-shadow:0 8px 20px rgba(200,240,72,.5)}
.tel-report-row{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-strong)}

/* ── Текстовые блоки ── */
.tel-block{margin:36px 0 0;max-width:68ch}
.tel-block h2{font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
.tel-block h3{font-size:16px;font-weight:700;margin:20px 0 5px;text-wrap:balance}
.tel-block p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 12px;text-wrap:pretty}
.tel-block code{font-family:var(--mono);font-size:13.5px;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink)}

/* ── Тост ── */
.tel-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:12px 22px;border-radius:12px;font-weight:600;font-size:14.5px;box-shadow:0 12px 40px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:60;max-width:90vw;text-align:center}
.tel-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#tel.is-busy .tel-process{opacity:.5}

@media(max-width:560px){
  .tel-cols{grid-template-columns:1fr}
  .tel-fmt-d{display:none}
  .tel-fmt-ex{font-size:14px}
  .tel-exports .tel-btn{flex:1 1 auto;text-align:center}
}