/* ============================================================
   LingoNews — marketing consent prompt
   css/consent-modal.css
   ------------------------------------------------------------
   Uses the site's own tokens (--navy #1B3A5C, --ochre #EB984E,
   --paper, --cream, --line, --shadow-lg, --font-serif/sans) so it
   inherits the brand rather than restating it.

   Bottom sheet on phones, floating card bottom-right on desktop.
   Deliberately not a full-screen overlay with a scrim: the reader is
   in the middle of an article they just unlocked, and blocking it to
   ask a favour would undo the goodwill the free article just bought.

   Also carries the two other pieces of free-article furniture, since
   they are the same feature and a third stylesheet would be a third
   cache-busting version to keep in step: .ln-free-note (the quiet
   "two free articles left" line under an article) and .ln-free-banner
   (Elliot's announcement at the top of the news pages).
   ============================================================ */

.ln-consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.ln-consent-card {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  padding: 18px 20px;
  background: var(--paper, #FBF8F3);
  border: 1px solid var(--line, rgba(27, 58, 92, 0.14));
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(20, 41, 63, 0.16));
  transform: translateY(14px);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
}

.ln-consent.is-in .ln-consent-card {
  transform: translateY(0);
  opacity: 1;
}

.ln-consent-elliot {
  flex: 0 0 auto;
  width: 52px;
  height: auto;
  margin-top: 2px;
}

.ln-consent-text { min-width: 0; }

.ln-consent-title {
  margin: 0 0 6px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy, #1B3A5C);
}

.ln-consent-body {
  margin: 0 0 14px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, rgba(27, 58, 92, 0.72));
}

.ln-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ln-consent-yes,
.ln-consent-no {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.ln-consent-yes {
  color: #fff;
  background: var(--ochre, #EB984E);
  border: 1px solid var(--ochre, #EB984E);
}

.ln-consent-yes:hover:not(:disabled) {
  background: var(--terra, #CA6F1E);
  border-color: var(--terra, #CA6F1E);
}

.ln-consent-no {
  color: var(--navy, #1B3A5C);
  background: transparent;
  border: 1px solid var(--line, rgba(27, 58, 92, 0.14));
}

.ln-consent-no:hover:not(:disabled) {
  border-color: var(--navy, #1B3A5C);
}

.ln-consent-yes:disabled,
.ln-consent-no:disabled {
  opacity: 0.5;
  cursor: default;
}

.ln-consent-yes:focus-visible,
.ln-consent-no:focus-visible {
  outline: 2px solid var(--navy, #1B3A5C);
  outline-offset: 2px;
}

/* Desktop: tuck it into the corner so the article stays readable. */
@media (min-width: 720px) {
  .ln-consent {
    inset-inline: auto 0;
    justify-content: flex-end;
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-consent-card { transition: opacity 120ms ease; transform: none; }
  .ln-consent.is-in .ln-consent-card { transform: none; }
}

/* ============================================================
   .ln-free-note — the allowance counter, under the article
   ------------------------------------------------------------
   Deliberately quiet: a rule, small caps-free sans, muted colour. It
   is a receipt, not an offer. Inserted by js/paywall.js only after a
   free unlock actually succeeded.
   ============================================================ */

.ln-free-note {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line, rgba(27, 58, 92, 0.14));
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, rgba(27, 58, 92, 0.72));
}

.ln-free-note a {
  color: var(--terra, #CA6F1E);
}

/* ============================================================
   .ln-free-banner — Elliot's announcement, news pages
   ------------------------------------------------------------
   Sits under the news hero. Ochre hairline rather than a filled
   band, so it reads as an editor's note and not an ad.
   ============================================================ */

.ln-free-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: var(--paper, #FBF8F3);
  border: 1px solid var(--ochre, #EB984E);
  border-radius: 12px;
}

.ln-free-banner img {
  flex: 0 0 auto;
  width: 64px;
  height: auto;
}

.ln-free-banner p {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted, rgba(27, 58, 92, 0.72));
}

.ln-free-banner strong {
  display: block;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy, #1B3A5C);
}

@media (max-width: 559px) {
  .ln-free-banner {
    gap: 12px;
    padding: 12px 14px;
  }
  .ln-free-banner img { width: 48px; }
  .ln-free-banner p { font-size: 14px; }
  .ln-free-banner strong { font-size: 16px; }
}


/* Elliot, pointing down at the free-article offer, standing on the
   panel's top edge. He sits ON the lip rather than behind it:
   .paywall-panel is position:relative AND z-index:1, so it forms a
   stacking context, and a child with z-index:-1 still paints after
   the panel's own white background - tucking his legs behind the
   card would mean restructuring the markup around it. Standing on
   the edge with a few pixels of overlap reads the same way and
   changes no layout. Asset is 136x184, drawn here at 120px wide. */
.paywall-elliot { position: absolute; left: 50%; bottom: 100%; width: 120px; height: auto; margin-bottom: -10px; transform: translateX(-50%); pointer-events: none; }

@media (max-width: 559px) { .paywall-elliot { width: 92px; margin-bottom: -8px; } }