/*
 * enw-promo.css — the share card, and the page that builds one.
 *
 * A page-local sheet, loaded last (h2.php's $ebnExtraCss) and only by
 * promo.php. It is separate from enw.css for the reason h2.php gives: this is
 * one rectangle with its own geometry — a 2:3 cover, a price set large, a brand
 * strip — that no other page repeats, and every page on the site pays for every
 * rule in the design system.
 *
 * Two rules about this file, both inherited from the design system:
 *
 *   · **Tokens only, no literals.** Every colour here is an --enw-* custom
 *     property, so the card follows the reader's palette and the dark theme
 *     without this file knowing either exists. A hex value in here would be a
 *     colour no palette can reach — which is exactly how the site's footer ended
 *     up dark green in all nine palettes.
 *   · **The card must be legible at 320px and inside a 360px iframe.** The grid
 *     collapses to one column below 900px (from .enw-split), and the card itself
 *     never scrolls sideways: the cover keeps its 2:3 box, the title wraps, and
 *     nothing is clipped.
 */

/* ── the card ─────────────────────────────────────────────────────────────── */

.enw-promo-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-xl);
  background: linear-gradient(160deg, var(--enw-primary-tint), var(--enw-surface) 55%);
  color: var(--enw-text);
  text-decoration: none;
}

.enw-promo-card__brand {
  margin: 0;
  padding: var(--enw-sp-4) var(--enw-sp-5);
  border-block-end: 1px solid var(--enw-border);
  /*
   * INK, NOT THE BRAND FILL. The card is pinned to the default palette and to
   * light, and there the panel behind this line is `--enw-primary-tint`
   * (#EAF1FF) fading to the surface — so `--enw-primary` (#2F6FED, a colour
   * chosen to be a BUTTON) measured 4.01:1 against its own tint, under the 4.5
   * floor for text this size. `--enw-ink` is the same hue tuned to be read ON
   * that wash (#1F52C4, ~6.8:1); it is the token this design system already
   * uses for "the brand, as text" — the drawer links, the tab bar and the
   * searchband all colour themselves with it. */
  color: var(--enw-ink);
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.enw-promo-card__body {
  display: grid;
  grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
  gap: var(--enw-sp-5);
  padding: var(--enw-sp-5);
  align-items: start;
}

.enw-promo-card__cover {
  aspect-ratio: 2 / 3;
  width: 100%;
  height: auto;
  border-radius: var(--enw-r-md);
  box-shadow: var(--enw-shadow-md);
  object-fit: cover;
  background: var(--enw-surface-2);
}

.enw-promo-card__facts {
  display: grid;
  gap: var(--enw-sp-2);
  align-content: start;
  min-inline-size: 0;   /* so a long title wraps instead of widening the card */
}

.enw-promo-card__title {
  margin: 0;
  font-family: var(--enw-font-display);
  font-size: var(--enw-fs-xl);
  font-weight: 700;
  line-height: var(--enw-lh-tight);
  overflow-wrap: anywhere;
}

.enw-promo-card__author {
  margin: 0;
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-sm);
}

.enw-promo-card__price {
  margin: 0;
  color: var(--enw-accent-ink);
  font-size: var(--enw-fs-2xl);
  font-weight: 800;
  line-height: 1.1;
}

.enw-promo-card__rating {
  margin: 0;
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-sm);
}

.enw-promo-card__cta {
  margin: var(--enw-sp-3) 0 0;
  /* Ink, not the fill — see `.enw-promo-card__brand` above. */
  color: var(--enw-ink);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
}

/* A phone holds this at 320px: one column, cover capped, so the title stays
   readable rather than squeezed into 90px beside a cover. */
@media (max-width: 419px) {
  .enw-promo-card__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .enw-promo-card__cover {
    max-inline-size: 160px;
  }

  .enw-promo-card__facts {
    justify-items: center;
  }
}

/* ── the embed: the card, and nothing else ────────────────────────────────── */

.enw-promo-embed {
  display: block;
  margin: 0;
  padding: var(--enw-sp-3);
}

/* h2.php always marks the body as carrying the tab bar, because every other
   page does. An iframe has no tab bar, so the reserved 56px would be dead space
   under the card. The body class is passed in by the page for exactly this. */
body.enw-promo-body {
  padding-block-end: 0;
  background: var(--enw-bg);
}

body.enw-promo-body .enw-promo-card--embed {
  border-radius: var(--enw-r-lg);
}

/* The two lines the reader may add, and the price the checkbox controls. */

.enw-promo-card__top {
  margin: 0;
  /* Ink, not the fill — see `.enw-promo-card__brand` above. */
  color: var(--enw-ink);
  font-size: var(--enw-fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.enw-promo-card__bottom {
  margin: 0;
  color: var(--enw-ink);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
}

.enw-promo-market {
  margin: var(--enw-sp-4) 0 0;
  font-size: var(--enw-fs-xs);
}

/* ── the builder ─────────────────────────────────────────────────────────── */

/*
 * The palette swatches.
 *
 * `data-enw-palette` sits on the DOT, not on the button, and that is the whole
 * trick: enw-palettes.css defines its tokens on any element carrying the
 * attribute, so the dot inherits "its" palette's --enw-primary while the label
 * beside it keeps the page's own text colour. On the button, the label would take
 * a dark palette's light text and vanish on this page's light background.
 */
.enw-promo-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--enw-sp-2);
  margin-block-start: var(--enw-sp-4);
}

.enw-promo-swatch {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-2);
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-pill);
  background: var(--enw-surface);
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-xs);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.enw-promo-swatch[aria-pressed='true'],
.enw-promo-swatch.is-on {
  border-color: var(--enw-primary);
  color: var(--enw-text);
  box-shadow: 0 0 0 2px var(--enw-primary-tint);
}

.enw-promo-swatch__dot {
  flex: 0 0 auto;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 50%;
  background: var(--enw-primary);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

/* The label wraps rather than widening the grid — "Blue — the app's own" is the
   longest of the nine and must not push a column past its track. */
.enw-promo-swatch__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/*
 * The slide list: one row per frame.
 *
 * The text field takes the room and the timing keeps a fixed width, because the
 * text is the part that varies — a row that reflows as somebody types a sentence
 * is a row that moves the button they were about to press.
 */
.enw-promo-slides {
  display: grid;
  gap: var(--enw-sp-2);
  margin-block-start: var(--enw-sp-4);
}

.enw-promo-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: var(--enw-sp-2);
  align-items: center;
}

/*
 * The up/down pair, on every row of a sequence.
 *
 * A small vertical stack rather than two flat buttons: the pair reads as a single
 * "move" control, which is what it is, and it keeps the row's own actions (PNG,
 * Remove) as the visually larger targets beside it. It is the same markup on a
 * book row and on a text row, so a list moves as one thing.
 */
.enw-promo-move {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.enw-promo-move__btn {
  inline-size: 1.5rem;
  block-size: 1.05rem;
  padding: 0;
  line-height: 1;
  font-size: 0.55rem;
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface);
  color: var(--enw-text-muted);
  cursor: pointer;
}

.enw-promo-move__btn:hover {
  border-color: var(--enw-primary);
  color: var(--enw-ink, #1a7a45);
}

.enw-promo-slide__text {
  min-inline-size: 0;
}

.enw-promo-slide__time {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-xs);
}

.enw-promo-slide__time .enw-input {
  inline-size: 4.5rem;
  text-align: center;
}

/* Below 420px a row is two lines rather than three columns; the timing field is
   4.5rem and the Remove button is wider than the whole text field at 320px. */
@media (max-width: 419px) {
  .enw-promo-slide {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .enw-promo-slide__time {
    grid-column: 1;
  }
}

/*
 * The book list: one row per frame, on the list side of the builder.
 *
 * Deliberately the same grid as the slide rows above, one column wider, because it
 * answers the same question — "what is frame 4, and how long is it held": cover,
 * the book, the timing, and the two buttons that act on THIS book. The cover keeps a
 * fixed 2:3 box so twelve rows of different covers still line up, and the facts column
 * is the one that flexes.
 */
.enw-promo-books {
  display: grid;
  gap: var(--enw-sp-3);
  margin: var(--enw-sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.enw-promo-book {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto;
  gap: var(--enw-sp-2);
  align-items: center;
  padding-block-end: var(--enw-sp-3);
  border-block-end: 1px solid var(--enw-border);
}

/*
 * WHICH GIF A FRAME BELONGS TO, AND THE COLOUR THAT SAYS SO.
 *
 * A long list is several files, and the editor's own request was to be able to see
 * at a glance which slide was filed under which file. So each row carries a GIF
 * number, and once the list spans more than one file every row is tinted in its
 * group's colour — a rule down the leading edge and the group's colour on the tag.
 * The tint is on the row rather than on the card preview because the ROWS are what
 * the reader is scanning when they wonder where the fourth slide went; the card
 * itself carries the same colour (see paintCard), so the file and the editor agree.
 */
.enw-promo-book.is-grouped {
  border-inline-start: 3px solid var(--enw-gif-tint, var(--enw-primary));
  padding-inline-start: var(--enw-sp-3);
}

.enw-promo-gif {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

.enw-promo-gif__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 1.4rem;
  padding-inline: 0.35rem;
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface-2);
  color: var(--enw-text-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.enw-promo-book.is-grouped .enw-promo-gif__tag {
  background: var(--enw-gif-tint, var(--enw-primary));
  color: #fff;
}

.enw-promo-gif__input {
  inline-size: 2.6rem;
  text-align: center;
  padding-inline: 0.2rem;
}

/*
 * The "which GIF?" chooser drawn beside the add-slide button.
 *
 * One chip per file the list already has, each in that file's own colour, plus a
 * chip for a new one. It is a row of buttons rather than a dialog because the
 * question is small and the answer is one click; and it is drawn beside the button
 * that raised it rather than in a modal so the row it is about stays on screen.
 */
.enw-promo-gif-ask {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: var(--enw-sp-2);
  inline-size: 100%;
}

.enw-promo-gif-ask__lead {
  font-size: var(--enw-fs-xs);
  color: var(--enw-text-muted);
}

.enw-promo-gif-ask__chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--enw-border);
  border-radius: 999px;
  background: var(--enw-surface);
  color: var(--enw-text);
  font-size: var(--enw-fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.enw-promo-gif-ask__chip:not(.is-new) {
  border-color: var(--enw-gif-tint, var(--enw-primary));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--enw-gif-tint, var(--enw-primary)) 18%, transparent);
}

.enw-promo-gif-ask__chip:hover {
  border-color: var(--enw-primary);
  color: var(--enw-ink, #1a7a45);
}

.enw-promo-gif-ask__chip.is-new {
  border-style: dashed;
  color: var(--enw-text-muted);
}

/*
 * The per-GIF colour pickers.
 *
 * One swatch per file: the file's name, its colour, and the platform's own colour
 * input. The native input is left unstyled on purpose — it opens the system picker,
 * which is the one colour chooser a reader already knows how to use — and the swatch
 * around it is tinted in the colour it holds so the row reads as "GIF 2 is orange".
 */
.enw-promo-gif-colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enw-sp-2);
}

.enw-promo-gif-color {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--enw-border);
  border-inline-start: 4px solid var(--enw-gif-tint, var(--enw-primary));
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface);
}

.enw-promo-gif-color__name {
  font-size: var(--enw-fs-xs);
  font-weight: 700;
}

.enw-promo-gif-color__input {
  inline-size: 2rem;
  block-size: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/*
 * A text slide in a book's sequence.
 *
 * The same row as a book — it is one list — with its cover box replaced by a mark,
 * so a text frame and a book frame line up column for column and the two arrows sit
 * in the same place whichever kind of frame they belong to. The mark takes the
 * cover's exact box (2.75rem × 4.125rem) rather than a small icon, which is what
 * keeps a mixed list from stepping in and out as it is read.
 */
.enw-promo-book.enw-promo-seq-slide {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
}

.enw-promo-seq-slide__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 4.125rem;
  border-radius: var(--enw-r-sm);
  background: var(--enw-primary-tint);
  color: var(--enw-ink, #1a7a45);
  font-size: 1.1rem;
  font-weight: 800;
}

.enw-promo-seq-slide__text {
  min-inline-size: 0;
}

.enw-promo-book:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.enw-promo-book__cover {
  inline-size: 2.75rem;
  block-size: 4.125rem;   /* 2:3, so twelve covers are twelve identical boxes */
  object-fit: cover;
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface-2);
}

/* A book with no cover still gets its box, so the row does not jump. */
.enw-promo-book__cover--none {
  display: block;
  border: 1px dashed var(--enw-border);
}

.enw-promo-book__facts {
  display: grid;
  gap: 0.15rem;
  min-inline-size: 0;
}

.enw-promo-book__title {
  font-size: var(--enw-fs-sm);
  font-weight: 700;
  /* Two lines at most: a list of twelve long titles is a list nobody scans. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enw-promo-book__by {
  font-size: var(--enw-fs-xs);
}

.enw-promo-book__time {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-xs);
}

.enw-promo-book__time .enw-input {
  inline-size: 4.5rem;
  text-align: center;
}

/* On a narrow column the two buttons drop under the book rather than squeezing the
   title to two words a line — the row is read, and then acted on. */
@media (max-width: 640px) {
  .enw-promo-book {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
  }

  .enw-promo-book__time {
    grid-column: 3;
  }
}

/*
 * The text-colour chips.
 *
 * A row of pills, each a dot and a name, plus a custom-colour swatch that opens the
 * system picker. The dot is the only part that carries the colour — the label keeps
 * the page's own ink, so "White" is legible on a light page as a word even though
 * the colour it names is invisible there.
 */
.enw-promo-colours {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enw-sp-2);
  margin-block-start: var(--enw-sp-2);
}

.enw-promo-colour {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-pill);
  background: var(--enw-surface);
  color: var(--enw-text-muted);
  font-size: var(--enw-fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.enw-promo-colour.is-on,
.enw-promo-colour[aria-pressed='true'] {
  border-color: var(--enw-primary);
  color: var(--enw-text);
  box-shadow: 0 0 0 2px var(--enw-primary-tint);
}

.enw-promo-colour__dot {
  flex: 0 0 auto;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

/* "Banner's own" is not one colour, so it is not one dot. */
.enw-promo-colour__dot--auto {
  background: linear-gradient(135deg, var(--enw-primary), var(--enw-accent-ink));
}

.enw-promo-colour--custom {
  padding-inline-start: 0.4rem;
}

.enw-promo-colour--custom input[type='color'] {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: 1px solid var(--enw-border);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

/* The animated preview. A canvas is an inline element by default, so it sits a
   few pixels low inside its box unless it is told otherwise. */
.enw-promo-slideshow {
  display: block;
  margin-block-start: var(--enw-sp-4);
  inline-size: 100%;
  block-size: auto;
  max-block-size: 32rem;
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-md);
  background: var(--enw-surface-2);
}

/* ── the buttons, the snippets, the form ──────────────────────────────────── */

.enw-promo-share {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--enw-sp-2);
}

.enw-promo-share__btn {
  justify-content: flex-start;
  width: 100%;
}

.enw-promo-snippet {
  margin: var(--enw-sp-3) 0;
  padding: var(--enw-sp-3);
  border: 1px solid var(--enw-border);
  border-radius: var(--enw-r-sm);
  background: var(--enw-surface-2);
  color: var(--enw-text);
  font-family: var(--enw-font-mono);
  font-size: var(--enw-fs-xs);
  overflow-wrap: anywhere;
}

/* The code block scrolls inside its own box — a wide iframe line must not make
   the page scroll sideways, which is the one layout failure that feels broken. */
.enw-promo-snippet--code {
  max-block-size: 9rem;
  overflow: auto;
  white-space: pre-wrap;
}

.enw-promo-download {
  margin-block-start: var(--enw-sp-4);
}

.enw-promo-layout {
  align-items: start;
}

/* The two tiny layout utilities this page uses, defined here rather than in
   enw.css because only this page needs them, and named after the design
   system's own .enw-stack-4 so the pattern is obvious. */
.enw-stack-2,
.enw-stack-3 {
  display: grid;
  gap: var(--enw-sp-3);
  align-content: start;
}

.enw-stack-2 {
  gap: var(--enw-sp-2);
}

.enw-label {
  display: block;
  color: var(--enw-text);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
}

/* The clipboard confirmation. Created by enw-promo.js, positioned so it is
   visible on a phone with the keyboard up, and never in the tab order. */
.enw-promo-toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--enw-sp-6) + var(--enw-safe-bottom));
  margin-inline: auto;
  z-index: var(--enw-z-toast);
  width: max-content;
  max-inline-size: calc(100% - var(--enw-sp-8));
  padding: var(--enw-sp-3) var(--enw-sp-5);
  border-radius: var(--enw-r-pill);
  background: var(--enw-ink);
  color: var(--enw-bg);
  font-size: var(--enw-fs-sm);
  font-weight: 700;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .enw-promo-toast {
    animation: enw-promo-toast-in var(--enw-t-fast) var(--enw-ease) both;
  }

  @keyframes enw-promo-toast-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Keyboard focus must be visible on a share button — it is the whole interface
   of this page for someone who cannot use a mouse. */
.enw-promo-share__btn:focus-visible,
.enw-promo-card:focus-visible {
  outline: 3px solid var(--enw-primary);
  outline-offset: 2px;
}

/* ── a list's GIFs, one link each ────────────────────────────────────────────
   Several files cannot be saved from a single click — a browser blocks a page
   that fires more than one download on its own — so a long list lands here as
   one link per file, each a click the reader made. */
.enw-promo-gif-files {
  display: grid;
  gap: var(--enw-sp-2);
  justify-items: start;
}

.enw-promo-gif-files .enw-btn {
  max-inline-size: 100%;
  text-align: start;
  white-space: normal;
}