/* Базовые стили встраиваемых виджетов /widget/** (Карточка сбора, Платёжный виджет).
   Отдельно от assets/css/na.css: страницы виджетов показываются в чужом iframe и не должны
   тянуть стили секций основного сайта (копилка на главной, /manage, «Команда друзей» и т.д.).

   [decision] Токены --na-* ниже задублированы, а не подключены через @import na.css: в
   na.css :root-блок с токенами не вынесен в отдельный файл, импорт всего файла притащил бы
   в iframe все несвязанные стили секций сайта. Значения нужно синхронизировать вручную с
   :root в site/assets/css/na.css, если они там поменяются. */

:root{
  --na-blue:#0d6eff;
  --na-blue-dark:#1763d3;
  --na-ink:#191919;
  --na-text:#404040;
  --na-muted:#828282;
  --na-line:#d5dade;
  --na-tint:#f3fbfe;
  --na-page:#fafbf9;
  --na-danger:#c0392b;
  --na-orange:#ff5426;
  --na-font:'TildaSans',Arial,sans-serif;

  /* Токены эталона вёрстки (https://agent.nastart.app/sports-widget/, спека §Эталон вёрстки)
     сверх токенов сайта: у сайта таких элементов нет, значения перенесены из CSS эталона. */
  --na-font-accent:'TTBluescreens','TildaSans',sans-serif;
  --na-chip-bg:#f1f3f6;
  --na-track:#eef1f5;
  --na-urgent:#d6362c;
  --na-urgent-bg:rgba(214,54,44,.1);
  --na-success:#1a7f3c;
  --na-success-bg:#e9f7ee;
  --na-info:#0d4fbd;
  --na-info-bg:#eef4ff;
  --na-danger-bg:#fdecec;
  --na-shadow:0 14px 34px rgba(48,108,246,.10);
  --na-radius-card:22px;
  --na-radius-card-sm:18px;
  --na-radius-block:14px;
  --na-radius-pill:50px;
  /* Логотип — тот же файл, что на сайте; для фоновой подстановки (состояние «без фото»). */
  --na-logo:url('/assets/img/logo_color.svg');
}

/* Шрифт уже лежит на сайте (site/assets/fonts/tildasans) — здесь только ссылка на тот же
   файл, второй копии нет. Вариативный шрифт покрывает весь диапазон насыщенности одним
   файлом, как в assets/css/fonts.css. */
@font-face{
  font-family:'TildaSans';
  font-style:normal;
  font-weight:250 1000;
  font-display:swap;
  src:url('/assets/fonts/tildasans/TildaSans-VF.woff2') format('woff2-variations');
}

/* Акцидентный шрифт эталона (суммы Карточки, «НА СТАРТ» в шапке формы). Тот же файл, что в
   assets/css/fonts.css, с нашего origin: без него на чужой Площадке суммы падают в системный
   шрифт. Имя семейства совпадает с сайтом. */
@font-face{
  font-family:'TTBluescreens';
  font-style:italic;
  font-weight:900;
  font-display:swap;
  src:url('/fonts/TTBluescreensPro-BlackItalic.woff2') format('woff2');
}

/* Сброс: страницы виджетов не наследуют стили встраивающей Площадки и не должны требовать
   скролла внутри iframe фиксированной высоты. */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  font-family:var(--na-font);
  color:var(--na-ink);
  background:var(--na-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
}

button{
  font-family:inherit;
  color:inherit;
}

a{
  color:var(--na-blue);
}

/* Общий логотип НА СТАРТ: <img class="np-logo" src="/assets/img/logo_color.svg" alt="НА СТАРТ">.
   Высота — по эталону; Карточка на мобильной раскладке уменьшает её своим правилом. */
.np-logo{
  display:block;
  flex:0 0 auto;
  width:auto;
  height:20px;
}

/* Кобрендинг (_shared/partners.js): «НА СТАРТ × Партнёр». Высоту обоих логотипов задаёт то же
   правило .np-logo (и уменьшение Карточки на мобильной раскладке); лого Партнёра чуть ниже —
   у него нет вылетов над строкой, и на одной высоте он выглядит крупнее нашего. */
.np-lockup{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
}
.np-lockup .np-logo--partner{
  height:17px;
}
.np-lockup__x{
  font-size:14px;
  line-height:1;
  color:var(--na-muted);
}

/* Шторка (_shared/sheet.js): оферта, согласие, «Отчёт фонда» открываются внутри виджета —
   из новой вкладки во встроенном браузере приложения вернуться некуда. Шторка занимает весь
   виджет (хост получает .np-sheet-host), заголовок и «Назад» закреплены, прокручивается только
   тело — спека §Габариты. */
.np-sheet-host{
  position:relative;
}

.np-sheet{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:inherit;
  background:#fff;
}

.np-sheet[hidden]{
  display:none;
}

.np-sheet__top{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--na-line);
}

.np-sheet__title{
  margin:0;
  min-width:0;
  font-size:14px;
  line-height:1.3;
  font-weight:700;
  overflow-wrap:break-word;
}

.np-sheet__close{
  flex:0 0 auto;
  padding:6px 14px;
  border:1.5px solid var(--na-line);
  border-radius:var(--na-radius-pill);
  background:#fff;
  font-size:13px;
  font-weight:700;
  color:var(--na-ink);
  cursor:pointer;
}

.np-sheet__close:hover,
.np-sheet__close:focus-visible{
  border-color:var(--na-blue);
  color:var(--na-blue);
}

.np-sheet__body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.np-sheet__body--frame{
  overflow:hidden;
}

.np-sheet__frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.np-sheet__docs{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
}

.np-sheet__heading{
  margin:6px 0 0;
  font-size:13px;
  font-weight:700;
  color:var(--na-muted);
}

.np-sheet__link{
  padding:12px 14px;
  border:1.5px solid var(--na-line);
  border-radius:var(--na-radius-block);
  font-size:14px;
  font-weight:700;
  color:var(--na-ink);
  text-decoration:none;
  overflow-wrap:anywhere;
}

.np-sheet__link:hover,
.np-sheet__link:focus-visible{
  border-color:var(--na-blue);
  color:var(--na-blue);
}

.np-sheet__caption{
  font-size:12px;
  line-height:1.4;
  color:var(--na-muted);
}

/* «Как всё прошло» — лента фото отчёта, как в эталоне: кадры высотой 132 px листаются вбок с
   привязкой; по нажатию кадр раскрывается просмотрщиком внутри шторки. */
.np-sheet__gallery{
  display:flex;
  flex:0 0 auto;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:2px;
}

.np-sheet__gallery::-webkit-scrollbar{
  display:none;
}

.np-sheet__thumb{
  flex:0 0 auto;
  padding:0;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--na-line);
  scroll-snap-align:start;
  line-height:0;
  cursor:zoom-in;
}

.np-sheet__thumb:focus-visible{
  outline:2px solid var(--na-blue);
  outline-offset:2px;
}

.np-sheet__thumb img{
  display:block;
  height:132px;
  min-width:88px;
  max-width:240px;
  width:auto;
  object-fit:cover;
}

.np-sheet__viewer{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  background:#111;
}

.np-sheet__viewer-top{
  border-bottom-color:transparent;
  background:#fff;
}

.np-sheet__viewer-counter{
  font-size:14px;
  font-weight:700;
}

.np-sheet__viewer-track{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.np-sheet__viewer-track::-webkit-scrollbar{
  display:none;
}

.np-sheet__viewer-slide{
  display:flex;
  flex:0 0 100%;
  align-items:center;
  justify-content:center;
  min-width:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.np-sheet__viewer-slide img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.np-sheet__viewer-nav{
  position:absolute;
  top:calc(50% + 24px);
  width:36px;
  height:36px;
  margin-top:-18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.9) no-repeat center / 16px 16px;
  cursor:pointer;
}

.np-sheet__viewer-nav[hidden]{
  display:none;
}

.np-sheet__viewer-nav--prev{
  left:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3 5 8l5 5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.np-sheet__viewer-nav--next{
  right:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3 5 5-5 5' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.np-sheet__viewer-nav:focus-visible{
  outline:2px solid var(--na-blue);
  outline-offset:2px;
}

/* QR с маркой НА СТАРТ в центре (_shared/qr.js). --np-qr-size — сторона блока, --np-qr-code-size —
   сторона самого кода: qr.js подгоняет её под целое число пикселей на модуль и центрирует код
   на белом поле блока. Марка — та же доля стороны кода, что в эталоне (42 px на коде 184 px);
   белая подложка с «ореолом» 4 px закрывает модули под собой — их восстанавливает коррекция
   ошибок (уровень выбирает qr.js). */
.np-qr-code{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--np-qr-size);
  height:var(--np-qr-size);
  background:#fff;
  line-height:0;
}

.np-qr-code svg{
  display:block;
  flex:0 0 auto;
  width:var(--np-qr-code-size);
  height:var(--np-qr-code-size);
  shape-rendering:crispEdges;
}

.np-qr-code__mark{
  position:absolute;
  left:50%;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--np-qr-code-size) * .228);
  height:calc(var(--np-qr-code-size) * .228);
  border-radius:calc(var(--np-qr-code-size) * .06);
  background:#fff;
  box-shadow:0 0 0 4px #fff;
  transform:translate(-50%,-50%);
}

.np-qr-code__mark img{
  width:71%;
  height:auto;
}