/* Share and install: the install banner (js/install.js), the visual install
 * guide (js/views/install-guide.js, drawings from js/views/install-art.js)
 * and the app share sheet's hint (js/views/share-sheet.js). Tokens from
 * css/app.css, so both themes follow. */

/* ── Install banner ──
 * A card above the tab bar (and above the outbox banner when that shows).
 * --install-h: its measured height plus a gap, set on body by install.js;
 * it lifts the toasts and sticky buttons and pads the page, as --outbox-h
 * does (css/climber.css). */

.install-banner {
  position: fixed;
  left: max(var(--s4), env(safe-area-inset-left));
  right: max(var(--s4), env(safe-area-inset-right));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s2) + var(--outbox-h, 0px));
  z-index: 24;
  max-width: calc(var(--max-w) - 2 * var(--s4));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-toast);
  animation: install-banner-in 260ms var(--ease);
}

@keyframes install-banner-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .install-banner {
    animation: none;
  }
}

.install-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.install-banner-text {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.install-banner-text strong {
  font-size: var(--fs-md);
  font-weight: 750;
}

.install-banner-text span {
  color: var(--ink-2);
}

.install-banner-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
}

.install-banner-actions .btn-primary {
  min-height: var(--tap);
  font-size: var(--fs-md);
}

body.has-install-banner > .toast-region {
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s3) + var(--outbox-h, 0px) + var(--install-h, 0px));
}

.has-install-banner #app {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s5) + var(--outbox-h, 0px) + var(--install-h, 0px));
}

.has-install-banner .sticky-action {
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s2) + var(--outbox-h, 0px) + var(--install-h, 0px));
}

@media print {
  .install-banner {
    display: none !important;
  }
}

/* ── Install guide ── */

.guide {
  display: grid;
  gap: var(--s3);
}

.guide .sheet-title {
  margin-bottom: 0;
}

.guide-body {
  display: grid;
  gap: var(--s3);
}

.guide-note {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
}

.guide-steps {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-step {
  display: grid;
  grid-template-columns: 36px 64px 1fr;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-card);
  background: var(--bg);
}

.guide-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.guide-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.guide-glyph {
  font-weight: 800;
}

.guide-after {
  display: grid;
  gap: var(--s1);
  font-size: var(--fs-sm);
}

.guide-after p,
.guide-computer p {
  margin: 0;
}

.guide-computer {
  display: grid;
  gap: var(--s2);
}

/* ── Drawings (aria-hidden; the step text carries the meaning) ── */

.art {
  display: block;
  width: 64px;
  height: auto;
  overflow: visible;
}

.art-frame {
  fill: var(--surface);
  stroke: var(--ink-3);
  stroke-width: 2;
}

.art-screen {
  fill: var(--surface-2);
}

.art-bar,
.art-panel {
  fill: var(--surface);
  stroke: var(--line);
}

.art-line {
  fill: var(--line);
}

.art-dot,
.art-glyph-box,
.art-glyph {
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.art-dot {
  fill: var(--ink-2);
  stroke: none;
}

.art-dot-soft {
  fill: var(--ink-3);
}

.art-hit-disc,
.art-pill-hit {
  fill: var(--accent);
}

.art-hit .art-glyph,
.art-hit .art-glyph-box {
  stroke: var(--accent-ink);
}

.art-hit .art-dot {
  fill: var(--accent-ink);
}

.art-row-hit {
  fill: var(--accent-soft);
  stroke: var(--accent-text);
}

.art-row-hit + .art-glyph-group .art-glyph,
.art-row-hit + .art-glyph-group .art-glyph-box {
  stroke: var(--accent-text);
}

.art-line-hit {
  fill: var(--accent-text);
}

.art-pill {
  fill: var(--line);
}

.art-ring {
  fill: none;
  stroke: var(--accent-text);
  stroke-width: 1.5;
  stroke-dasharray: 3 2.5;
}

.art-app {
  fill: var(--brand-green);
}

.art-app-soft {
  fill: var(--line);
}

.art-app-mark {
  fill: var(--surface);
  stroke: none;
}

.art-app + .art-glyph-group .art-glyph,
.art-app + .art-glyph-group .art-glyph-box {
  stroke: var(--surface);
}

/* ── Share RateClimbs ── */

.share-hint {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}