/* ──────────────────────────────────────────────────────────────────────────
   app.css — «вид мобильного приложения» для информационных страниц.
   Включается флагом 'app' => true в $A: article-head.php ставит body.appmode
   и подключает этот файл, article-foot.php — parts/app-tabs.php и app.js.
   ПРАВИЛО: всё, что меняет вид, живёт внутри @media (max-width:760px).
   Шире 760px страница обязана выглядеть ровно так же, как раньше.
   27.10.2026
   ────────────────────────────────────────────────────────────────────────── */

/* нижняя панель вкладок на десктопе не существует */
.apptabs{display:none}

@media (max-width:760px){

/* ── общий фон: в приложении полотно белое, разделение даёт карточка ── */
body.appmode{background:#eef3f8;font-size:16.5px;-webkit-tap-highlight-color:rgba(36,120,212,.12)}
body.appmode .wrap{padding:0 13px}

/* ── шапка-герой: компактный верхний экран, декор убран ── */
body.appmode .site-header{padding:16px 0 18px}
body.appmode .site-header:before,
body.appmode .site-header:after{display:none}
body.appmode .site-header h1{font-size:21.5px;font-weight:800;margin:0 0 7px;letter-spacing:-.01em}
body.appmode .site-header .sub{font-size:14.5px;line-height:1.5;opacity:.92;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
body.appmode .badge{font-size:11px;padding:4px 11px;margin-bottom:9px;border-radius:30px}
body.appmode .hcta{margin-top:13px;gap:8px}
body.appmode .hcta-btn,body.appmode .hcta-ghost{padding:12px 16px;font-size:15.5px;border-radius:13px}
body.appmode .hcta-note{font-size:12.5px;margin-top:8px;line-height:1.45}
body.appmode .ylang{margin-bottom:9px}

/* ── лента разделов: сегменты под фиксированной шапкой сайта ── */
body.appmode .toc{top:var(--sn-hh,62px);border-bottom:0;box-shadow:0 4px 14px rgba(19,78,142,.07)}
body.appmode .toc .wrap{gap:5px;padding-top:7px;padding-bottom:7px}
body.appmode .toc a{font-size:13.5px;padding:7px 12px;border-radius:999px;background:#f1f5fa;
  color:#50657d;font-weight:600}
body.appmode .toc a.is-on{background:linear-gradient(135deg,#2478d4,#134e8e);color:#fff}

/* ── содержимое: каждый раздел — карточка-экран ── */
body.appmode main{padding:13px 0 18px}
body.appmode section{margin:0 0 13px;background:#fff;border:1px solid #e4ecf5;border-radius:18px;
  padding:15px 15px 6px;scroll-margin-top:calc(var(--sn-hh,62px) + 50px)}
body.appmode section h2{font-size:19px;margin:0 0 9px;padding-bottom:0;border-bottom:0;letter-spacing:-.01em}
body.appmode section h3{font-size:16.5px;margin:18px 0 6px}
body.appmode section p,body.appmode section li{font-size:15.5px}
body.appmode .lead{font-size:16.5px;margin:0 0 14px;background:#fff;border:1px solid #e4ecf5;
  border-radius:18px;padding:15px}
body.appmode .callout{margin:0 0 12px;padding:13px 15px;font-size:14.5px;border-radius:16px}
body.appmode .answer{border-radius:14px;border-left:3px solid #2478d4;padding:12px 14px;font-size:15.5px}

/* ── карточки: список строк, без наездов и теней ── */
body.appmode .grid,body.appmode .cards,body.appmode .steps{grid-template-columns:1fr;gap:10px;margin:12px 0}
body.appmode .card{padding:14px;border-radius:14px}
body.appmode .card:hover,body.appmode .step:hover{transform:none;box-shadow:none;border-color:#e4ecf5}
body.appmode .card h3{font-size:16.5px}
body.appmode .card p{font-size:14.5px}
body.appmode .card .ic{width:40px;height:40px;border-radius:11px;font-size:20px;margin-bottom:10px}
body.appmode .steps{margin:22px 0 6px}
body.appmode .step{padding:22px 15px 15px;border-radius:14px}

/* ── таблицы: мелкий кегль и прокрутка с гаснущим краем ── */
body.appmode .tblwrap,body.appmode .kk__tw{margin:12px -15px;padding:0 15px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
body.appmode .tbl{font-size:13.5px;margin:0}
body.appmode .tbl th,body.appmode .tbl td{padding:8px 10px}
body.appmode .tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.02em}

/* ── вопросы: строки списка ── */
body.appmode #faq{padding-bottom:12px}
body.appmode details{border-radius:13px;padding:12px 14px;margin-bottom:9px}
body.appmode summary{font-size:15.5px}
body.appmode details .fa{font-size:14.5px}
body.appmode .uzblock{border-radius:18px;padding:16px;margin-top:14px}

/* ── блок официального входа: плотнее ── */
body.appmode .ofc{padding:15px;border-radius:18px;box-shadow:none;margin-bottom:13px}
body.appmode .ofc-head{gap:10px;margin-bottom:13px}
body.appmode .ofc-mark{width:38px;height:38px;border-radius:11px;font-size:14px}
body.appmode .ofc-name b{font-size:16px}
body.appmode .ofc-name small{font-size:13px}
body.appmode .ofc-btn{font-size:15.5px;padding:13px 14px;border-radius:13px}

/* ── формы: 16px, иначе iOS зумит страницу при фокусе ── */
body.appmode input,body.appmode select,body.appmode textarea{font-size:16px!important}
body.appmode button{-webkit-appearance:none}

/* ── обсуждение под статьёй ── */
body.appmode .comments{padding:14px 15px;border-radius:18px;margin-top:13px}

/* ── подвал: минимум, ссылки в две колонки, дисклеймер под раскрытие ── */
body.appmode .site-footer{padding:16px 0 20px;border-radius:18px 18px 0 0;font-size:14px}
body.appmode .site-footer .flinks{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin-bottom:14px}
body.appmode .site-footer .flinks a{font-size:14px}
body.appmode .site-footer .disc{font-size:11.5px;line-height:1.5}
body.appmode .site-footer .disc.app-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.appmode .app-more{display:inline-block;margin-top:9px;background:none;border:0;padding:0;
  color:#c0d4ea;font:600 12px/1 inherit;text-decoration:underline;cursor:pointer}

/* ── лишнее в приложении: кнопка «наверх» и вторая липкая полоса ── */
body.appmode .totop{display:none!important}
body.appmode .mcta{display:none!important}
body.appmode main{padding-bottom:18px}

/* ── нижняя панель вкладок ── */
body.appmode{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
.apptabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:2px;
  padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);border-top:1px solid #e2e8f0;
  box-shadow:0 -6px 20px rgba(12,18,34,.08)}
.apptab,.apptab:link,.apptab:visited{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;padding:6px 2px 4px;min-height:48px;
  border:0;background:none;border-radius:13px;color:#64748b;text-decoration:none;
  font-size:10.5px;font-weight:700;letter-spacing:-.01em;line-height:1.1;text-align:center;
  font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.apptab:hover,.apptab:active{text-decoration:none;color:#2478d4;background:rgba(36,120,212,.08)}
.apptab svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.apptab span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apptab.is-on{color:#134e8e;background:rgba(36,120,212,.1)}
.apptab.is-on svg{stroke-width:2.1}


/* ── встроенные виджеты темы: тесты, калькуляторы, карточки-сводки ── */
body.appmode .tabs{margin:12px 0}
body.appmode .tab-btns{gap:6px;margin-bottom:10px}
body.appmode .tab-btn{padding:9px 13px;font-size:14px;border-radius:999px}
body.appmode .tab-pane{padding:14px;border-radius:14px}
body.appmode .ia,body.appmode .ys,body.appmode .kk{padding:14px;border-radius:16px;box-shadow:none}
body.appmode .ia-h{font-size:17px}
body.appmode .iq-q{padding:12px 0}
body.appmode .iq-o{padding:11px 12px;border-radius:12px}
body.appmode .ys__in,body.appmode .ys__sel{border-radius:12px}
body.appmode .kk__t,body.appmode .ys__tbl{font-size:13.5px}
body.appmode .jr-no li{font-size:14px;padding:8px 8px 8px 32px}
body.appmode .status{padding:13px 14px;border-radius:14px}

}/* /max-width:760px */

/* шире 760px нижней панели нет совсем — вид страницы прежний */
@media (min-width:761px){.apptabs{display:none!important}}
