/* Каркас демонстрационных работ Itqan Code (задание № 1458, Дизайнер, 20.10.2026).
   Один файл на все 8 демо: плашка студии внизу (.itq-demo-plashka), лента сверху (.itq-demo-lenta),
   пометка в окне чата и мини-приложении (.itq-demo-pometka).
   Облик — студии (тёмная бирюза, неон, Geologica); бренд демо этим файлом не трогается.
   Подключать ПОСЛЕ стилей бренда: <link rel="stylesheet" href="../_obshchee/karkas.css">
   Шрифт лежит рядом: _obshchee/shrifty/ (url() считается от этого файла). Правила — OBLIK.md рядом. */

@font-face { font-family: "Itqan Geologica"; font-weight: 100 900; font-display: swap;
  src: url(shrifty/geologica-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Itqan Geologica"; font-weight: 100 900; font-display: swap;
  src: url(shrifty/geologica-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --itq-fon: #04201f;        /* тёмная бирюза студии */
  --itq-fon-2: #0a3635;      /* шаг тона: раскрытые «Источники», нажатие */
  --itq-neon: #a3ffcf;       /* ссылки, знак, кольцо фокуса — 13,9:1 на фоне */
  --itq-chernila: #eafff8;   /* главный текст плашки — 16:1 */
  --itq-chernila-2: #b4d9d0; /* вторичный — 9:1 */
  --itq-shrift: "Itqan Geologica", "Segoe UI", system-ui, sans-serif;
  --itq-lenta-h: 2.25rem;    /* высота ленты: бренд вычитает её из первого экрана */
  --itq-pole: clamp(1rem, 3.2vw, 3rem); /* поля страницы студии */
}

/* Общая основа трёх частей: свой шрифт, свой цвет, без наследства от бренда */
.itq-demo-plashka, .itq-demo-lenta, .itq-demo-pometka {
  box-sizing: border-box;
  font-family: var(--itq-shrift);
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}
.itq-demo-plashka *, .itq-demo-lenta *, .itq-demo-pometka * { box-sizing: inherit; }

.itq-demo-plashka a, .itq-demo-lenta a, .itq-demo-pometka a {
  color: var(--itq-neon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-thickness .15s ease, color .15s ease;
}
.itq-demo-plashka a:hover, .itq-demo-lenta a:hover, .itq-demo-pometka a:hover {
  color: var(--itq-chernila);
  text-decoration-thickness: 2px;
}
.itq-demo-plashka :focus-visible, .itq-demo-lenta :focus-visible, .itq-demo-pometka :focus-visible {
  outline: 2px solid var(--itq-neon);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ───────── Плашка внизу каждой страницы ───────── */
.itq-demo-plashka {
  position: relative;
  z-index: 2;                       /* выше «шторки» подвала бренда */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: .875rem var(--itq-pole) calc(.875rem + env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--itq-pole), env(safe-area-inset-left, 0px)) max(var(--itq-pole), env(safe-area-inset-right, 0px));
  background: var(--itq-fon);
  color: var(--itq-chernila-2);
  font-size: .875rem;               /* 14 px — нижний шаг, не мельче */
  font-weight: 400;
  line-height: 1.45;
}
.itq-demo-plashka__znak {
  display: inline-flex;
  flex: none;
  width: 2.5rem;
  height: 1.5625rem;                /* знак 160×100 */
  color: var(--itq-neon);
  text-decoration: none;
}
.itq-demo-plashka__znak svg { display: block; width: 100%; height: 100%; }
.itq-demo-plashka__kursor { animation: itq-migat 1.05s steps(1) infinite; }
@keyframes itq-migat { 50% { opacity: 0; } }

.itq-demo-plashka__tekst {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  color: var(--itq-chernila);
}
.itq-demo-plashka__ssylka { font-weight: 500; white-space: nowrap; }

/* «Шрифты и картинки» — список источников и лицензий, раскрывается без скрипта */
.itq-demo-plashka__istochniki { flex: 0 1 auto; margin: 0; }
.itq-demo-plashka__istochniki[open] { flex-basis: 100%; order: 9; }
.itq-demo-plashka__istochniki > summary {
  display: inline-block;
  cursor: pointer;
  color: var(--itq-chernila-2);
  text-decoration: underline dotted;
  text-underline-offset: .22em;
  list-style: none;
}
.itq-demo-plashka__istochniki > summary::-webkit-details-marker { display: none; }
.itq-demo-plashka__istochniki > summary:hover { color: var(--itq-chernila); }
.itq-demo-plashka__istochniki[open] > summary { color: var(--itq-chernila); }
.itq-demo-plashka__istochniki ul {
  margin: .625rem 0 .25rem;
  padding: .875rem 1rem;
  list-style: none;
  background: var(--itq-fon-2);
  border-radius: 6px;
  color: var(--itq-chernila-2);
  columns: 2 22rem;
  column-gap: 2rem;
}
.itq-demo-plashka__istochniki li { margin: 0 0 .375rem; break-inside: avoid; overflow-wrap: anywhere; }

/* ───────── Лента сверху (по желанию) ───────── */
/* Не прилипает: уезжает с первой прокруткой. Бренд вычитает её высоту из первого экрана:
   .hero { min-height: calc(100svh - var(--itq-lenta-h)); } */
.itq-demo-lenta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--itq-lenta-h);
  margin: 0;
  padding: .375rem var(--itq-pole);
  padding-top: max(.375rem, env(safe-area-inset-top, 0px));
  background: var(--itq-fon);
  color: var(--itq-chernila-2);
  font-size: .8125rem;              /* 13 px — меньше нельзя (правило дома) */
  line-height: 1.35;
}
.itq-demo-lenta p { margin: 0; min-width: 0; }
.itq-demo-lenta a { white-space: nowrap; font-weight: 500; }

/* ───────── Пометка в окне чата, в мини-приложении и в боте ───────── */
.itq-demo-pometka {
  display: block;
  margin: 0;
  padding: .5rem .75rem;
  background: var(--itq-fon);
  color: var(--itq-chernila-2);
  font-size: .8125rem;
  line-height: 1.4;
}

/* Телефон: плашка в две строки — знак и текст, ниже ссылка */
@media (max-width: 34rem) {
  .itq-demo-plashka { font-size: .875rem; }
  .itq-demo-plashka__tekst { flex-basis: calc(100% - 3.75rem); }
  .itq-demo-lenta { flex-wrap: wrap; justify-content: flex-start; gap: .125rem .75rem; }
}

/* № 1088 (Верстальщик): на телефоне и под палец — цели плашки не меньше 44 px по высоте */
@media (max-width: 34rem), (pointer: coarse) {
  .itq-demo-plashka { row-gap: 0; }
  .itq-demo-plashka__znak { height: 2.75rem; }
  .itq-demo-plashka__ssylka, .itq-demo-plashka__istochniki > summary { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .itq-demo-lenta a { display: inline-block; padding-block: .8rem; margin-block: -.8rem; }   /* цель больше, лента той же высоты */
}

@media (prefers-reduced-motion: reduce) {
  .itq-demo-plashka__kursor { animation: none; }
  .itq-demo-plashka a, .itq-demo-lenta a, .itq-demo-pometka a { transition: none; }
}
@media (prefers-contrast: more) {
  .itq-demo-plashka, .itq-demo-lenta, .itq-demo-pometka { color: var(--itq-chernila); }
}
@media print {
  .itq-demo-lenta { display: none; }
  .itq-demo-plashka { background: none; color: #000; }
  .itq-demo-plashka a { color: #000; }
}