/**
 * The installable-app affordances: the one-time iOS "add to Home Screen" guide
 * card (D35), rendered by src/components/admin/whatsapp/WaInstallCard.vue.
 *
 * Owned by track T2 of the wa-inbox-pwa run. Created empty by T1 so the <link>
 * in index.html could be written once, before any other track opened that file.
 *
 * Linked in index.html after /css/admin-wa-bulk.css and far above
 * /css/admin-person.css. The "admin" prefix is load-bearing: it is the only
 * thing scripts/bundle-css.mjs partitions on, and a differently named file
 * would ship the whole admin panel's CSS to every marketing visitor.
 *
 * ── WHY THIS WEARS THE SHELL'S PALETTE, NOT THE INBOX'S ───────────────────
 *
 * The card is mounted by AdminLayout as a sibling of the confirm dialog, so it
 * lives OUTSIDE `.wai-page` and the WDS tokens (D9/D10) are deliberately not in
 * scope for it. It is chrome about the WINDOW rather than about the inbox
 * screen, so it is drawn from the Glass Campus tokens on `.admin-layout` -
 * --adm-ink, --adm-line, --adm-accent - exactly like the confirm dialog next
 * to it. Do not reach into the inbox palette from here: those tokens do not
 * resolve at this point in the tree and would silently paint transparent.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   The card
   ═══════════════════════════════════════════════════════════════════════════

   Fixed and anchored to the bottom edge, because it is describing a control
   that lives there: Safari's share button is in the bottom toolbar on iPhone,
   and an instruction that points down should sit next to what it points at.

   Z-ladder: 1016, one step above the bottom tab bar (1015) so the card floats
   clear of it, and below the drawer scrim (1020) so an open menu covers it.
   Never above a sheet (1040) or the confirm dialog.

   It carries no backdrop-filter on purpose. Any filter, transform, perspective,
   contain or will-change here would make this element a containing block, and
   the shell's fixed-position surfaces are exactly where that has bitten before.
   The near-opaque phone-chrome fill (decision F5) is the sanctioned stand-in.
*/
.wai-install {
  position: fixed;
  z-index: 1016;
  inset-inline: 12px;
  inset-block-end: calc(16px + env(safe-area-inset-bottom));
  /* An iPad in Safari sees this card too, and a 1000px-wide instruction about a
     phone-sized share sheet reads as a banner. Capping the width over-constrains
     the two inline insets, so the box keeps its inline-START edge - the physical
     right in this RTL shell - which is where the thumb is. Done with a cap
     rather than a `min-width` media query on purpose: this repo has exactly two
     breakpoints, 1024px and 767px, and a card that needs a third has the wrong
     shape. */
  max-inline-size: 420px;
  padding: 16px 18px 18px;
  border: 1px solid var(--adm-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 60, 130, 0.16);
  /* The shell is RTL, so this island needs nothing said about direction. The
     ONE thing it does need is a ceiling: on a short landscape phone an
     unbounded card would cover the list it is advising you about. */
  max-block-size: 60dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The tab bar exists only at phone width, so only there does the card have to
   clear it. Above 767px the bar is not rendered and the extra 56px would be a
   hole under the card. 767px is one of this repo's two breakpoints; do not add
   a third here. */
@media (max-width: 767px) {
  .wai-install {
    inset-block-end: calc(var(--adm-tabbar-h) + env(safe-area-inset-bottom) + 12px);
  }
}

.wai-install__close {
  position: absolute;
  inset-block-start: 6px;
  /* inline-END, which in this RTL shell is the physical LEFT. The close button
     belongs at the corner the reading eye leaves last. */
  inset-inline-end: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 36px painted, taken to a 44px target by the halo below - the same
     compromise the inbox chips make, for the same reason: a 44px painted box
     in this corner would collide with the title. */
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--adm-ink-3);
  font-size: 16px;
  cursor: pointer;
}

.wai-install__close::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: -4px;
}

.wai-install__close:hover {
  background: rgba(25, 26, 35, 0.06);
  color: var(--adm-ink);
}

.wai-install__title {
  /* Logical, not `margin-right`: the close button sits at the inline END, which
     is the physical LEFT in this RTL shell, so a physical rule would clear the
     wrong side and the title would run under the button. */
  margin-block: 0 4px;
  margin-inline: 0 44px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--adm-ink);
}

.wai-install__lead {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--adm-ink-2);
}

.wai-install__steps {
  display: grid;
  gap: 10px;
  margin: 0;
  /* RTL list indentation is padding-RIGHT (padding-inline-start resolves to it
     here, and the logical form is what survives a future LTR island). */
  padding-inline-start: 0;
  list-style: none;
  counter-reset: wai-install-step;
}

.wai-install__steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--adm-ink);
}

.wai-install__steps li i {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background: rgba(0, 113, 227, 0.1);
  color: var(--adm-accent);
  font-size: 14px;
}

/* The Latin app name and the host names inside these sentences are read
   left-to-right inside a right-to-left paragraph. Without isolation the bidi
   algorithm reorders the trailing punctuation of a Latin run, which reads as a
   data bug rather than as a rendering one. */
.wai-install__steps li span,
.wai-install__host {
  unicode-bidi: isolate;
}

.wai-install__host {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 163, 4, 0.12);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--adm-ink);
}