/* brand-27 («Гардеробна Каті», 27.09): экран загрузки (brand/BRAND.md, раздел 7) и лист «Постав значок на екран»
   (js/install-guide.js, данные js/install.js). Подключается последним после styles.css: порядок пластов задан там.
   Сырые значения только в tokens; screens только раскладывает. */

/* ========================================================================== tokens */
@layer tokens {
  :root {
    /* экран загрузки: колонка по центру, её центр на 45% высоты экрана (как на картинке запуска iOS) */
    --splash-z: 1000;
    --splash-mark-w: 96.49px;      /* коробка mark.svg вместе с полями файла; само платье 150 */
    --splash-mark-h: 159.73px;
    --splash-name-w: 155.04px;     /* splash-wordmark.svg: «Гардеробна» и «Каті», Cormorant 32 */
    --splash-name-h: 62.98px;
    --splash-gap: 14px;
    --splash-y: -5vh;              /* index.html поднимает выше, если окно значка начинается под строкой состояния */
    --splash-pivot: 50% 6.85%;     /* платье качается вокруг внутреннего верха завитка крючка */
    --dur-splash-sway: calc(900ms * var(--motion-scale));
    --dur-splash-out: var(--dur-state);         /* 200: затухание, когда первый экран готов */

    /* лист «Постав значок на екран» (доски 27-install-ios, 27-install-android) */
    --inst-num: 24px;              /* кружок с номером шага */
    --inst-num-inset: 8px;         /* номер в левом верхнем углу картинки */
    --inst-num-ic: 16px;           /* галочка в кружке «Готово» на компьютере */
    --inst-ok-ic: 18px;            /* галочка в строке «Уже на екрані» */
    --inst-text-top: 2px;          /* первая строка шага на уровне кружка */
    --inst-note-gap: 6px;          /* мелкая записка под строкой шага */
    --inst-thumb-w: 170px;         /* картинка шага слева: 360 × 280, уменьшенная */
    --inst-pic-ratio: 360 / 280;
    --inst-arrow-w: 84px;          /* стрелка на кнопку ⋯ Safari внизу справа */
    --inst-arrow-h: 52px;
    --inst-arrow-stroke: 2.6px;
    --inst-pill-edge: 4px;         /* «Встановити» в строке «Про тебе»: нарисовано 36, коробка 44 */

    /* имя на экране кода доступа (доска 27-entry) */
    --brand-lockup-w: 242px;       /* lockup-horizontal.svg с полями файла: сам знак с именем около 223 */
    --brand-lockup-ratio: 887.41 / 220;
  }
  /* «Менше руху»: платье не качается, экран уходит простым затуханием 150 мс */
  @media (prefers-reduced-motion: reduce) {
    :root { --dur-splash-sway: 0ms; --dur-splash-out: var(--dur-fade-in); }
  }
  :root[data-motion="reduce"] { --dur-splash-sway: 0ms; --dur-splash-out: var(--dur-fade-in); }
}

/* ========================================================================== components */
@layer components {
  /* ---------- экран загрузки ---------- */
  #splash {
    position: fixed;
    inset: 0;
    z-index: var(--splash-z);
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity var(--dur-splash-out) var(--ease-fade);
  }
  #splash.is-done { opacity: 0; pointer-events: none; }
  .splash__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--splash-gap);
    transform: translateY(var(--splash-y));
  }
  .splash__col img { display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .splash__mark {
    width: var(--splash-mark-w);
    height: var(--splash-mark-h);
    transform-origin: var(--splash-pivot);
    animation: dress-sway var(--dur-splash-sway) 1 both;
  }
  .splash__name { width: var(--splash-name-w); height: var(--splash-name-h); }
  /* Платье только что повесили на штангу: +3°, -1,6°, +0,6°, покой (BRAND.md, таблица ключей); текст стоит. */
  @keyframes dress-sway {
    0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
    25%  { transform: rotate(3deg);    animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    53%  { transform: rotate(-1.6deg); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    80%  { transform: rotate(0.6deg);  animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
    100% { transform: rotate(0deg); }
  }
  :root[data-motion="reduce"] .splash__mark { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .splash__mark { animation: none; }
  }

  /* ---------- лист «Постав значок на екран» (install-guide.js, доски 27-install-ios и 27-install-android) ---------- */
  .inst .k-sheet__body { padding-top: 0; }
  /* подзаголовок в начале прокрутки; прокрутила - под шапкой черта */
  .inst-lead { margin: 0 0 var(--sp-4); font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui); color: var(--ink-2); }
  .inst > .k-sheet__head { border-bottom: 1px solid transparent; transition: border-color var(--dur-state) var(--ease-fade); }
  .inst.is-scrolled > .k-sheet__head { border-bottom-color: var(--line); }
  .inst:has(.k-sheet__foot[hidden]) .k-sheet__body { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  .inst .k-sheet__foot > .k-btn { max-width: none; }
  .inst-steps { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
  /* шаг: номер и текст; с картинкой - картинка слева, номер в её углу, текст справа */
  .inst-step {
    display: grid;
    grid-template-columns: var(--inst-num) minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
  }
  .inst-step--pic { grid-template-columns: minmax(0, var(--inst-thumb-w)) minmax(0, 1fr); }
  .inst-step__pic { position: relative; }
  .inst-step__pic > .inst-num { position: absolute; left: var(--inst-num-inset); top: var(--inst-num-inset); }
  .inst-num {
    display: grid;
    place-items: center;
    width: var(--inst-num);
    height: var(--inst-num);
    border-radius: var(--r-pill);
    background: var(--acc);
    color: var(--acc-ink);
    font: 600 var(--fs-caption)/1 var(--font-ui);
  }
  .inst-num--ok { background: var(--olive-soft); color: var(--olive-ink); }
  .inst-num .k-icon { width: var(--inst-num-ic); height: var(--inst-num-ic); }
  .inst-step__text { min-width: 0; padding-top: var(--inst-text-top); }
  .inst-step__t { margin: 0; font: 400 var(--fs-body-s)/1.35 var(--font-ui); color: var(--ink); }
  .inst-step__note { margin: var(--inst-note-gap) 0 0; font: 400 var(--fs-caption)/var(--lh-hint) var(--font-ui); color: var(--ink-2); }
  .inst-pic {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--inst-pic-ratio);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  .inst-done { margin-top: var(--sp-5); }
  /* запасной путь после шагов (iPhone), под ним черта и «Готово» */
  .inst-fallback {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .inst-fallback + .inst-done { margin-top: var(--sp-4); }
  .inst-fallback__t { margin: 0; font: 400 var(--fs-body-s)/1.35 var(--font-ui); color: var(--ink); }
  .inst-fallback .k-btn { max-width: none; }
  .inst-fail { margin: 0; font: 400 var(--fs-hint)/var(--lh-hint) var(--font-ui); color: var(--danger); }
  .inst-steps + .inst-fail { margin-top: var(--sp-4); }
  /* стрелка на ⋯ Safari поверх низа листа, пока виден первый шаг */
  .inst-arrow {
    position: absolute;
    right: var(--sp-4);
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    width: var(--inst-arrow-w);
    height: var(--inst-arrow-h);
    overflow: visible;
    pointer-events: none;
    transition: opacity var(--dur-state) var(--ease-fade);
  }
  .inst-arrow.is-gone { opacity: 0; }
  /* fix-ui-27 (QA-27): пока видна стрелка, низ листа - её полоса: прокрутка шагов кончается над стрелкой, и та не
     закрывает текст шага (на 402 × 874 она лежала на «вгорі» шага 5). */
  .inst:has(> .inst-arrow:not(.is-gone)) > .k-sheet__body { margin-bottom: calc(var(--inst-arrow-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
  .inst-arrow__line { fill: none; stroke: var(--acc); stroke-width: var(--inst-arrow-stroke); stroke-linecap: round; }
  .inst-arrow__head { fill: var(--acc); }

  /* ---------- имя: экран кода доступа (first-run.js) ---------- */
  .fr-code__brand {
    display: block;
    width: var(--brand-lockup-w);
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--brand-lockup-ratio);
    margin: 0 0 var(--sp-4) var(--sp-1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }
  /* последняя карточка «Що нового»: вторичная «Як поставити на телефон» / «Встановити» над «Почати» (first-run.js chrome) */
  .fr__foot > .fr-alt { margin-bottom: var(--sp-2); }

  /* ---------- строка «Значок на екрані телефона» в «Про тебе» (доски 27-install-where, 27-install-android) ---------- */
  .inst-row .k-row__sub { color: var(--acc); font-weight: 600; }
  .inst-row.is-done .k-row__sub { color: var(--olive-ink); }
  .inst-row > .inst-row__ok { flex: none; width: var(--inst-ok-ic); height: var(--inst-ok-ic); }
  /* сильнее about.css (.ab__col .k-group .k-row > .k-icon: чернила), галочка оливковая, как на доске */
  .k-group .inst-row.is-done > .inst-row__ok.k-icon { color: var(--olive); }
  /* компьютер: «Встановити» / «Як додати» справа акцентным цветом; под именем короткий путь (Safari на Mac) */
  .inst-row--value .k-row__value { color: var(--acc); font-weight: 600; }
  .inst-row--value > .k-row__chev { color: var(--acc); }
  .inst-row--value .k-row__sub { color: var(--ink-2); font-weight: 400; }
  /* браузер дал окно установки: маленькая главная «Встановити» прямо в строке */
  .inst-row__btn {
    flex: none;
    border: var(--inst-pill-edge) solid transparent;
    border-radius: var(--r-pill);
    background-clip: padding-box;
    font-size: var(--fs-body-s);
  }
}

/* ========================================================================== layouts */
@layer layouts {
  /* «Що нового» ещё решается (first-run.js закрывает вкладку пустым гидом .fr.is-cover): пока виден экран
     загрузки, эта заслонка и её фон прозрачны, и вместо пустого экрана остаётся экран загрузки (js/splash.js). */
  #splash ~ .fr.is-cover,
  #splash ~ .fr.is-cover::backdrop { background: transparent; }
}