/* Строка синхронизации. Владелец: таск 28.

   Два размера одной строки: `.syncline-side` — подвал сайдбара 248 px,
   `.syncline-top` — шапка телефона во всю ширину. Разница между ними
   только в раскладке; цвет, знак и подпись у обеих одни и те же.

   Ни одно из семи состояний не берёт --risk и --risk-soft: акцент занят высоким
   риском сорвать приём пищи, и тревога здесь передаётся словами и знаком
   (История 141). Единственное состояние с заливкой — «есть обновление»:
   она зовёт нажать, а не пугает, и потому зелёная. */

.syncline {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Подпись читаемая, поэтому --ink-2, а не третья ступень (поправка D06). */
  color: var(--ink-2);
  font: 400 var(--fs-body)/1.35 var(--font-text);
}

.syncline-text { min-width: 0; }

/* Знак строки — на той же ступени, что и текст: он дублирует слово, а не спорит
   с ним. Свой цвет есть только у «есть обновление», и он ниже. */
.syncline-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--ink-2);
}

/* --------------------------- подвал сайдбара --------------------------- */

.syncline-side {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  font-family: var(--font-caption);
}

/* Строка с действием нажимается целиком: кнопке в подвале 248 px негде стоять
   рядом с текстом, а уводить действие в другое место значит его потерять. */
.syncline-strip {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.syncline-strip:hover { background: var(--sage-soft); }

/* ---------------------------- шапка телефона ---------------------------- */

.syncline-top {
  padding: 10px max(var(--pad), env(safe-area-inset-left)) 10px
    max(var(--pad), env(safe-area-inset-right));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Кнопка прижата к правому краю: в макете между подписью и ею пусто, и это
   единственное, что отличает телефонную строку от подвала сайдбара. */
.syncline-top .syncline-action {
  margin-left: auto;
  flex: 0 0 auto;
}

/* --------------------------- «есть обновление» --------------------------- */

/* Единственное состояние с заливкой. Зелёная, а не красная: это приглашение
   нажать, а не отказ. */
.syncline.is-update-ready {
  background: var(--sage-soft);
  color: var(--ink);
}

.syncline.is-update-ready .syncline-mark { color: var(--sage-deep); }

@media (prefers-color-scheme: dark) {
  /* В тёмной теме --sage-deep уходит в тон заливки, и знак пропадает. */
  .syncline.is-update-ready .syncline-mark { color: var(--sage); }
}