/* ── The shortfall card ────────────────────────────────────────────────────
   Markup: templates/_partials/shortfall.html
   Engine: static/js/shortfall.js
   Plan:   docs/plans/SHORTFALL-UPSELL-PLAN.md

   The brief was "reserved but powerful". So: no colour block, no badge, no
   icon, no shadow. A hairline card on the page's own parchment with a single
   rose-gold rule down its left edge, which is the same weight the rest of the
   product uses to mark something worth reading. The numbers carry the volume,
   which is why they are the only thing set in mono.

   Every colour here is a token, so dark mode needs no rules of its own.
   ──────────────────────────────────────────────────────────────────────── */

.fe-sf {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--rose-gold-deep);
  border-radius: var(--radius-sm);
}

.fe-sf[hidden] { display: none; }

/* Revealed by script, so the entrance is the only motion in the component.
   Short and small: it should read as the page settling, never as an arrival. */
.fe-sf--in { animation: fe-sf-rise 220ms ease-out both; }

@keyframes fe-sf-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fe-sf--in { animation: none; }
}

/* ── The sentence ─────────────────────────────────────────────────────── */

.fe-sf__line {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;   /* ~65 real characters; see the ch note in CLAUDE.md */
}

/* The problem is the account's own situation, so it gets the darker ink.
   The answer is ours and sits one step back. */
.fe-sf__problem {
  color: var(--text-primary);
  font-weight: 500;
}

.fe-sf__answer { color: var(--text-secondary); }

.fe-sf__problem:not(:empty) + .fe-sf__answer::before { content: " "; }

/* Numbers are wrapped by the engine, never by hand, and never through
   innerHTML. Mono plus tabular figures so a count does not shift the line
   when it changes under a recalculation. */
.fe-sf__n {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 0.94em;
}

/* ── The actions ──────────────────────────────────────────────────────── */

.fe-sf__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.fe-sf__buy { margin: 0; }

.fe-sf__go {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  /* White on rose-gold measures about 2.2:1 and fails WCAG. The deep brand ink
     is the only correct label colour on this background, in BOTH themes. */
  color: var(--text-on-rose-gold);
  background: var(--rose-gold);
  border: 1px solid var(--rose-gold);
  border-radius: var(--radius-xs);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fe-sf__go:hover,
.fe-sf__go:focus-visible {
  background: var(--rose-gold-hover);
  border-color: var(--rose-gold-hover);
}

.fe-sf__alt {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fe-sf__alt:hover,
.fe-sf__alt:focus-visible {
  color: var(--rose-gold-deep);
  border-bottom-color: var(--rose-gold);
}

/* The way out is always visible and never the loudest thing here. */
.fe-sf__dismiss {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  transition: color 0.15s ease;
}

.fe-sf__dismiss:hover,
.fe-sf__dismiss:focus-visible { color: var(--text-primary); }

.fe-sf :focus-visible {
  outline: 2px solid var(--rose-gold-deep);
  outline-offset: 2px;
}

/* Narrow screens: the trial link and the way out ended up side by side with
   twelve pixels between two touch targets. The dismiss takes its own row
   instead, still right-aligned and still the quietest thing in the card. */
@media (max-width: 480px) {
  .fe-sf__actions { gap: var(--space-2) var(--space-3); }
  .fe-sf__dismiss {
    margin-left: auto;
    flex-basis: 100%;
    text-align: right;
    padding: 0.5rem 0 0.2rem;
  }
}