/*
  notify-invite.css — the "shall we let you know?" card.

  Tokens with a fallback, same contract as the consent banner and the header
  cluster: a theme with a palette maps a handful of variables and the card
  follows. Written after the dark-theme incident where a shared piece carried
  #1e293b into a black site.

  The fallbacks are PALETTE-NEUTRAL (neutral greys at low alpha, an outlined
  button) rather than the core's light values, because this card is the one
  piece of the family a theme is likeliest to take without mapping anything —
  it is included at a moment, not in a layout, so it never shows up in a
  layout review. It shipped with a fallback that assumed a light palette and
  the client's dark site got a blank button. Neutral means: correct on both,
  perfect on neither, and never invisible.
*/

/*
  `hidden` is the browser stylesheet's `display: none`, and the author `display`
  below overrides it. This card is rendered hidden on purpose and revealed by
  `notify-invite.js` only when there is something to offer — never when the
  permission was already denied, never when the device has neither push nor an
  install path, and never without JavaScript, which cannot honour the offer at
  all. Without this line the card showed in every one of those cases: "an offer
  that cannot be honoured is worse than silence", as its own script says.

  Found by FactoryPartialHiddenTest, which was written for the front bell and
  caught this second one on its first run.
*/
.notify-invite[hidden] { display: none; }

.notify-invite {
  display: flex;
  align-items: flex-start;
  gap: var(--ni-gap, .75rem);
  margin: var(--ni-margin, 1.25rem 0 0);
  padding: var(--ni-pad, 1rem);
  border: 1px solid var(--ni-border, rgba(128, 128, 128, .32));
  border-radius: var(--ni-radius, .6rem);
  background: var(--ni-surface, rgba(128, 128, 128, .10));
  color: var(--ni-ink, inherit);
  text-align: left;
  flex-wrap: wrap;
}

.notify-invite__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--ni-accent, currentColor);
}
.notify-invite__icon svg { width: 22px; height: 22px; }

.notify-invite__text { flex: 1 1 12rem; min-width: 0; }

.notify-invite__title {
  margin: 0 0 .15rem;
  font-weight: 600;
  font-size: var(--ni-title-size, 1rem);
  line-height: 1.3;
}

.notify-invite__body {
  margin: 0;
  font-size: var(--ni-body-size, .875rem);
  line-height: 1.45;
  color: var(--ni-muted, inherit);
  opacity: var(--ni-muted-opacity, .85);
}

/*
  The fallback is OUTLINED on purpose, and this is the one rule in the file worth
  reading twice.

  It shipped as `background: var(--ni-btn-bg, currentColor)` with
  `color: var(--ni-btn-ink, #fff)`. On the core's light theme that reads fine. On
  a dark theme `currentColor` IS white, so the button rendered white text on a
  white slab: a blank rectangle where the call to action should be. It went out
  like that on the client's site and Adán found it on his own phone — the mobile
  bench had measured that same screen at 393 and 390 px the day before and could
  not see it, because that harness asks about overflow, not contrast.

  The lesson is not "pick a better default colour", it is that **a background
  whose fallback is contextual can never guarantee its own contrast**. An
  outlined button is the only style that needs no knowledge of the palette: the
  card's text colour is legible on the card's surface by definition, so ink and
  border inherit it and the surface stays put. Canon: GOV.UK secondary button,
  Material outlined, iOS bordered.

  A theme that wants a solid button declares the PAIR (`--ni-btn-bg` +
  `--ni-btn-ink`) — never one alone, which is exactly how a contrast breaks. The
  border then follows the background unless the theme says otherwise, so nobody
  has to declare a third variable to avoid a ring around a filled button.

  Guarded by tests/App/View/FactoryPartialContrastTest so the class of defect
  cannot come back in this file or in any other shared stylesheet.
*/
.notify-invite__btn {
  flex: 0 0 auto;
  min-height: 44px;              /* WCAG 2.5.5, same as the consent banner */
  padding: 0 1rem;
  border: 1px solid var(--ni-btn-border, var(--ni-btn-bg, currentColor));
  border-radius: var(--ni-radius, .6rem);
  background: var(--ni-btn-bg, transparent);
  color: var(--ni-btn-ink, inherit);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.notify-invite__btn:hover { background: var(--ni-btn-bg-hover, var(--ni-btn-bg, rgba(128, 128, 128, .16))); }
.notify-invite__btn:focus-visible { outline: 2px solid var(--ni-focus, currentColor); outline-offset: 2px; }
.notify-invite__btn[disabled] { opacity: .6; cursor: default; }

/* Not a modal, and not a one-liner that scrolls away: on iPhone the person has
   to read this WHILE hunting for the browser's share button. Same reasoning as
   the install hint. */
.notify-invite__ios {
  flex: 1 1 100%;
  margin: .35rem 0 0;
  font-size: var(--ni-body-size, .875rem);
  line-height: 1.45;
  color: var(--ni-muted, inherit);
}

@media (max-width: 520px) {
  /* The button takes the full width rather than squeezing next to the text:
     below this width the two together leave a 90px target nobody hits. */
  .notify-invite__btn { flex: 1 1 100%; }
}