/*
 * The installable site (phase 8.5): install invitation, «new version» toast, offline page,
 * «Работают без интернета» note. Markup: templates/pwa/, behaviour: static/js/pwa.js.
 * Tokens from site.css only; logical properties (RTL).
 */

/* ---------- Install invitation: a small card above the tab bar, never a modal ---------- */
.pwa-banner {
  position: fixed;
  inset-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right));
  bottom: var(--above-dock);
  /* under the cookie banner (90) and the tab bar (92) */
  z-index: 89;
  max-width: 460px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.pwa-banner[hidden],
.pwa-toast[hidden] {
  display: none;
}

.pwa-banner__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.pwa-banner__body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.pwa-banner__text {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.pwa-banner__hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.pwa-banner__hint[hidden] {
  display: none;
}

/* The Share icon inline with the text, as Safari draws it. */
.pwa-share-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-inline: 1px;
  vertical-align: -0.25em;
  fill: none;
  stroke: var(--accent-deep);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pwa-banner__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.pwa-banner .btn {
  padding-inline: 10px;
  font-size: var(--fs-sm);
}

.pwa-banner .btn[hidden] {
  display: none;
}

/* iPhone/iPad: only «Не сейчас» (the hint is the action), at the end of the row. */
.pwa-banner--ios .pwa-banner__actions {
  grid-template-columns: minmax(0, auto);
  justify-content: end;
}

@media (min-width: 861px) {
  .pwa-banner {
    inset-inline: 24px auto;
    bottom: 24px;
    margin: 0;
  }
}

/* A field of the recipe form is being edited (recipe_submit_editor.js): nothing fixed over it. */
body.is-mobile-form-editing .pwa-banner,
body.is-mobile-form-editing .pwa-toast {
  display: none;
}

/* ---------- «Доступна новая версия — Обновить» ---------- */
.pwa-toast {
  position: fixed;
  inset-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right));
  bottom: var(--above-dock);
  z-index: 95;
  max-width: 420px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-md);
}

/* The text wraps next to the button, the button keeps its one line. */
.pwa-toast__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

.pwa-toast__btn {
  appearance: none;
  flex: none;
  min-height: var(--target);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.pwa-toast__btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.pwa-toast__btn:focus-visible {
  outline: 3px solid var(--bg);
  outline-offset: 2px;
}

@media (min-width: 861px) {
  .pwa-toast {
    bottom: 24px;
  }
}

/* ---------- The installed app ---------- */
@media (display-mode: standalone) {
  [data-pwa-install],
  .pwa-banner {
    display: none !important;
  }
}

.is-standalone [data-pwa-install],
.is-standalone .pwa-banner {
  display: none !important;
}

/* ---------- «Работают без интернета» (tools page) ---------- */
.pwa-offline-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.pwa-offline-note[hidden] {
  display: none;
}

.pwa-offline-note .icon {
  width: 20px;
  height: 20px;
}

/* «Без интернета» on a saved recipe the worker keeps (static/js/pwa.js, mockup .off). */
.pwa-offline-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.pwa-offline-badge .icon {
  width: 16px;
  height: 16px;
}

/* ---------- Offline page ---------- */
.offline-page {
  display: grid;
  gap: var(--space-6);
  max-width: 640px;
  margin: var(--space-4) auto 0;
}

.offline-head {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.offline-head__icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--surface-2);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offline-head__title {
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.offline-head__lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.offline-section {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.offline-section__title {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offline-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.offline-list[hidden] {
  display: none;
}

.offline-list > li + li {
  border-block-start: 1px solid var(--line);
}

.offline-list > li[hidden] {
  display: none;
}

.offline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  text-decoration: none;
}

.offline-row__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.offline-row .icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

@media (hover: hover) {
  .offline-row:hover {
    background: var(--surface-2);
  }
}

.offline-empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--muted);
  line-height: 1.5;
}

.offline-empty[hidden] {
  display: none;
}