/*
 * App promotion: the /inicio/ card, the Recall session-end prompt and the
 * `app` page. See includes/promo-ui.php and STYLING.md › App promotion surfaces.
 *
 * Every token reference carries a literal fallback where the theme might not
 * have shipped it yet (STYLING.md › Progress Bar Fills).
 */

/* ===========================================================================
 * The /inicio/ card
 * ======================================================================== */

/*
 * The slot sits directly above the scorecard, inside the /inicio/ section,
 * whose own 24px top padding is the space under the header. Below it, 24px,
 * the gap every block in that column is spaced by (STYLING.md › The dashboard
 * column), owned here entirely: the scorecard has no top padding. Qualified
 * with .ct-container to outrank Blocksy's
 * `:is(.is-layout-flow, .is-layout-constrained) > *` 1.5em bottom margin,
 * which ties a single class.
 */
.pp-app-promo-slot.ct-container {
  margin-block-end: 24px;
}

/*
 * The attention surface (STYLING.md › Attention surface): a launch promotion
 * has to stand apart from the steel-1 panels around it, or it reads as one more
 * piece of the dashboard's furniture. --pp-attention-fill is steel-7 into the
 * accent with a light-teal glow; the fallback drops the glow and keeps the
 * gradient. No shadow: the fill does the separating (STYLING.md › steel-7 as a
 * dark surface). Not a disclosure: it is shown or it is dismissed.
 */
.pp-app-promo {
  position: relative;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--pp-attention-fill, linear-gradient(135deg, #1F3C4A 0%, #006d91 60%, #0a789d 100%));
  color: #fff;
}

/* The text holds the instructional panel's 480px reading measure. */
.pp-app-promo__text {
  max-width: 480px;
}

/* A launch badge (STYLING.md › Launch / "New" Badges), the light extreme on a
   dark host. Temporary: delete it, rule and markup, once the app is not new. */
.pp-app-promo__new {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--theme-palette-color-8, #f9f9f9);
  color: var(--pp-steel-7);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The dashboard-block heading step, white on the fill (rule 7). The right
   margin clears the corner × (16px inset + 32px disc). */
.pp-app-promo__title,
.pp-app-promo__why {
  /* No one-word last line at any width (unsupported browsers wrap as before). */
  text-wrap: balance;
}

.pp-app-promo__title {
  margin: 0 40px 8px 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* Secondary text on the attention surface: white at 0.9 (STYLING.md ›
   Attention surface). AA at every stop. */
.pp-app-promo__why {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/*
 * The one action, inverted for the dark ground: a light fill with the accent
 * label (5.5:1), the same pairing as an email card's button. No shadow, which
 * is invisible on a dark fill; hover lifts and steps to steel-1. 44px tall:
 * it stands alone. Its href goes through /app/, which counts the tap.
 */
.pp-app-promo a.pp-app-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--theme-palette-color-8, #f9f9f9);
  color: var(--theme-palette-color-5, #006d91);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.pp-app-promo a.pp-app-promo__cta:hover,
.pp-app-promo a.pp-app-promo__cta:focus {
  background: var(--pp-steel-1);
  color: var(--theme-palette-color-5, #006d91);
  transform: translateY(-1px);
}

/* The house ring, offset onto the fill. Faint on a dark ground, which
   STYLING.md › The dismiss cross already flags as an open question. */
.pp-app-promo a.pp-app-promo__cta:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/*
 * The dismiss cross, dialog tier, solid-dark-ground recipe (STYLING.md › The
 * dismiss cross): a faint light disc, the muted-on-dark glyph stepping to
 * palette-8. 16px from the top and right; 44px hit area, standalone.
 * Element-qualified, because the theme styles <button> itself.
 */
.pp-app-promo button.pp-app-promo__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--pp-steel-1-rgb), 0.12);
  color: rgba(var(--pp-steel-1-rgb), 0.72);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pp-app-promo button.pp-app-promo__close::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.pp-app-promo button.pp-app-promo__close:hover,
.pp-app-promo button.pp-app-promo__close:focus {
  background: rgba(var(--pp-steel-1-rgb), 0.2);
  color: var(--theme-palette-color-8, #f9f9f9);
}

.pp-app-promo button.pp-app-promo__close:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-app-promo__close svg {
  width: 16px;
  height: 16px;
}

/*
 * The computer variant: the text, then the QR code right after it rather than
 * at the far edge of a ~1370px panel, where the two would read as unrelated.
 * The right padding keeps the code clear of the corner × on a narrow desktop.
 */
.pp-app-promo--qr {
  display: grid;
  grid-template-columns: minmax(0, 480px) auto;
  justify-content: start;
  align-items: center;
  column-gap: 32px;
  padding-right: 64px;
}

.pp-app-promo__qr {
  width: 128px;
}

@media (max-width: 768px) {
  .pp-app-promo {
    padding: 16px;
  }

  .pp-app-promo a.pp-app-promo__cta {
    width: 100%;
  }
}

/* ===========================================================================
 * The QR code, wherever it appears
 * ======================================================================== */

/*
 * A pale tile with dark modules, which is what a scanner wants: the tile is
 * --theme-palette-color-8, light on the card's dark fill and against the `app`
 * page alike; the modules take --pp-steel-7 through
 * currentColor, the scale's dark end, at ~11:1 on the tile. The quiet zone a
 * scanner needs is inside the SVG (4 modules), so the tile has no padding.
 */
.pp-app-qr {
  box-sizing: border-box;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 8px;
  background: var(--theme-palette-color-8, #f9f9f9);
  color: var(--pp-steel-7);
  line-height: 0;
}

.pp-app-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ===========================================================================
 * The Recall prompt, on Active Recall's finished card
 * ======================================================================== */

/*
 * STYLING.md § A question inside a card for its place and its two-button row,
 * on the attention surface (§ Attention surface) rather than bare on the card:
 * bare, it read as part of the summary. It lands in the card's summary slot in
 * the 320px column the scores sit in. Recall's own "Back to dashboard" steps
 * down to an outline while the slot has content; that rule is smart-review's.
 * push-notifications' in-app question uses the same slot and never meets this
 * one, which never renders in the app.
 */
.pp-app-recall-ask {
  max-width: 320px; /* the column .pp-sr-summary above it sits in */
  margin: 0 auto 18px; /* the host card's own stack step */
  padding: 20px;
  border-radius: 14px;
  background: var(--pp-attention-fill, linear-gradient(135deg, #1F3C4A 0%, #006d91 60%, #0a789d 100%));
  color: #fff;
  /* Left, like the /inicio/ card: the badge reads as a label on the block
     rather than floating over the middle of it. */
  text-align: left;
}

/* The same launch badge as the /inicio/ card. Temporary: remove with it. */
.pp-app-recall-ask__new {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--theme-palette-color-8, #f9f9f9);
  color: var(--pp-steel-7);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pp-app-recall-ask__title,
.pp-app-recall-ask__note {
  /* No one-word last line at any width: the browser evens the lines out.
     Unsupported browsers wrap as before. */
  text-wrap: balance;
}

.pp-app-recall-ask__title {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 600;
  /* A heading's leading, not the body's: inherited, two lines of it read as
     two separate lines. */
  line-height: 1.3;
}

.pp-app-recall-ask__note {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  line-height: 1.5;
}

.pp-app-recall-ask__actions {
  display: flex;
  gap: 8px;
}

/* Element-qualified, since the theme styles <button> and links. The
   affirmative is a link, since it leaves for /app/; the dismissal is a button. */
.pp-app-recall-ask button.pp-app-recall-ask__btn,
.pp-app-recall-ask a.pp-app-recall-ask__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

/* The inverted primary on a dark ground, as on the /inicio/ card. */
.pp-app-recall-ask a.pp-app-recall-ask__btn--yes {
  background: var(--theme-palette-color-8, #f9f9f9);
  color: var(--theme-palette-color-5, #006d91);
}

.pp-app-recall-ask a.pp-app-recall-ask__btn--yes:hover,
.pp-app-recall-ask a.pp-app-recall-ask__btn--yes:focus {
  background: var(--pp-steel-1);
  color: var(--theme-palette-color-5, #006d91);
  transform: translateY(-1px);
}

/* The secondary button on a dark ground: the faint light fill the dismiss
   cross also takes there (STYLING.md › The dismiss cross, solid dark ground). */
.pp-app-recall-ask button.pp-app-recall-ask__btn--no {
  background: rgba(var(--pp-steel-1-rgb), 0.12);
  color: var(--theme-palette-color-8, #f9f9f9);
}

.pp-app-recall-ask button.pp-app-recall-ask__btn--no:hover,
.pp-app-recall-ask button.pp-app-recall-ask__btn--no:focus {
  background: rgba(var(--pp-steel-1-rgb), 0.2);
  color: var(--theme-palette-color-8, #f9f9f9);
}

.pp-app-recall-ask button.pp-app-recall-ask__btn:focus-visible,
.pp-app-recall-ask a.pp-app-recall-ask__btn:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* ===========================================================================
 * The `app` page
 * ======================================================================== */

/*
 * One card in the middle of the page, with the documented outer breathing
 * room for a surface (STYLING.md › Spacing): the page's whole content is this
 * card, so without the room it sat flush under the header.
 */
.pp-app-page {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 0;
}

/* STYLING.md › Elevated card surface: a card the reader looks at. */
.pp-app-page__card {
  padding: 28px;
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    var(--theme-palette-color-8, #f9f9f9) 0%,
    rgba(var(--pp-steel-1-rgb), 0.6) 100%
  );
  box-shadow:
    0 1px 2px rgba(var(--pp-steel-7-rgb), 0.06),
    0 6px 22px rgba(var(--pp-steel-7-rgb), 0.1);
}

/* The page has no visible title of its own, so the card carries it, at the
   modal/dialog title step: the card owns the surface the same way. */
.pp-app-page__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pp-steel-7);
  text-wrap: balance;
}

/* Prose under the title: the card's secondary text size and muted tone. */
.pp-app-page__lead {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pp-steel-5);
}

/* Each platform is a row, separated by the standard hairline. */
.pp-app-page__platform {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

/* A row heading, in normal case (uppercase turns "iPhone" into "IPHONE",
   which is not the product's name). 1rem in the heading tone, so it stays
   above the 0.9375rem text under it rather than reading weaker than it. */
.pp-app-page__label {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--pp-steel-7);
}

.pp-app-page__note {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pp-steel-7);
}

/* The badge and, on a computer, the QR code beside it; stacked when narrow. */
.pp-app-page__get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/*
 * Google's badge artwork (STYLING.md › Store badges), trimmed of its
 * transparent padding and never recoloured or redrawn. 43px, the page size,
 * where the badge is the page's purpose: the same height as Apple's beside it.
 */
.pp-app-page__badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.pp-app-page__badge img {
  display: block;
  width: auto;
  height: 43px;
}

.pp-app-page__badge:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-app-page__scan {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-app-page__qr {
  flex: none;
  width: 112px;
}

.pp-app-page__caption {
  max-width: 160px;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pp-steel-5);
}

/* Apple's badge, verbatim (STYLING.md › Store badges), shown while iOS is
   live: the page size, 43px, like Google's. */
.pp-app-page__apple {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.pp-app-page__apple img {
  display: block;
  width: auto;
  height: 43px;
}

.pp-app-page__apple:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-app-page__legal {
  margin: 16px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  color: var(--pp-steel-5);
}

/*
 * Both apps live, on a computer: the platform rows give way to one block under
 * the lead's hairline, the homepage app section's arrangement (STYLING.md ›
 * Marketing page sections › The way to get the app on a light ground): the
 * QR code at the page size, and beside it the caption over both badges, Apple
 * first, at the page's badge size. Wraps below the code in a narrow window.
 */
.pp-app-page__both {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-app-page__both-qr {
  flex: none;
  width: 160px;
}

/* The caption over the badges, 12px apart, as in the homepage app section. */
.pp-app-page__both-get {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-app-page__both-caption {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pp-steel-5);
}

.pp-app-page__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Apple's credit line and Google's, one under the other. */
.pp-app-page__legal + .pp-app-page__legal {
  margin-top: 4px;
}

@media (max-width: 768px) {
  .pp-app-page__card {
    padding: 18px;
  }
}

/* ===========================================================================
 * Reduced motion: the buttons' lift is decoration, so it goes.
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pp-app-promo a.pp-app-promo__cta,
  .pp-app-promo button.pp-app-promo__close,
  .pp-app-recall-ask button.pp-app-recall-ask__btn,
  .pp-app-recall-ask a.pp-app-recall-ask__btn {
    transition: none;
  }

  .pp-app-promo a.pp-app-promo__cta:hover,
  .pp-app-promo a.pp-app-promo__cta:focus,
  .pp-app-recall-ask a.pp-app-recall-ask__btn--yes:hover,
  .pp-app-recall-ask a.pp-app-recall-ask__btn--yes:focus {
    transform: none;
  }
}