/* ============================================================================
   AOA TEST CENTER — FREEMIUM LOCK PRIMITIVES (metered model, 2026-06-14)
   The single-gate-at-50% lock vocabulary. Screen-level composition ONLY —
   every color, font, radius, shadow and motion value is inherited from
   test-center-system.css. No new tokens, no new colors.

   THE MODEL (Chris-final): a free signed-in member gets the first 50% of any
   test FULLY unlocked with a quiet "unlocked for now" hint; at 50% it LOCKS.
   The locked content is NEVER sent to the client — these primitives only ever
   blur a DECORATIVE PLACEHOLDER band, never real data (Lock Law #9).

   Three primitives, all minted by AOA helpers in app.js:
     · .fz-lockpill   — the small warm "unlocked for now" pill  (AOA.previewHint)
     · .fz-lockcard   — the one quiet CTA card per screen        (AOA.lockCard)
     · .fz-blur       — blur applied ONLY to a .fz-placeholder band

   Discipline carried over from marked-review.css: orange is a scalpel
   (the single accent), the frame is an invitation not a guilt wall, ink not
   red, motion is named and collapses under reduced-motion.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   "UNLOCKED FOR NOW" PILL — reads as a gift, not a timed trial.
   A small warm pill that rides beside a paid feature while still inside the
   free half. Calm: warm charcoal ink, one orange dot, no countdown, no clock.
   -------------------------------------------------------------------------- */
.fz-lockpill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3) 3px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--orange-soft);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange-text);            /* AA text-role orange on the tint */
  white-space: nowrap;
  vertical-align: middle;
}
/* The leading dot — the one orange fill (a dot is decorative, so --orange). */
.fz-lockpill::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

/* ----------------------------------------------------------------------------
   THE LOCK CARD — one quiet card per screen, sitting OVER a placeholder band.
   480px, orange LEFT border (the house idiom — see app.js calmFailure), warm
   charcoal heading, a single "Unlock Full Access" primary CTA. Mentor tone.
   -------------------------------------------------------------------------- */
.fz-lock {
  /* the positioning context: the CTA card floats centered over the blurred
     placeholder band beneath it. */
  position: relative;
  isolation: isolate;
}

/* The decorative placeholder band — fake bars that stand in for the locked
   content the server NEVER sent. Only this band is ever blurred. */
.fz-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  min-height: 168px;
  overflow: hidden;
  user-select: none;
}
.fz-placeholder__bar {
  height: 13px;
  border-radius: var(--r-pill);
  /* warm charcoal at low alpha — a ghost of text, never real text */
  background: rgba(22, 19, 18, 0.07);
}
.fz-placeholder__bar:nth-child(odd)  { width: 92%; }
.fz-placeholder__bar:nth-child(even) { width: 74%; }
.fz-placeholder__bar:last-child      { width: 58%; }

/* THE BLUR — applied ONLY to the decorative placeholder, never to real data. */
.fz-blur {
  filter: blur(6px);
  opacity: 0.7;
  pointer-events: none;
}

/* The CTA card overlaid on the placeholder. */
.fz-lockcard {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - var(--s-8)));
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);   /* the brand-correct accent */
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated);
  padding: clamp(20px, 4.5vw, 28px) clamp(20px, 4.5vw, 28px);
  text-align: left;
}
/* When a lock card is used inline (no placeholder to float over), it can stand
   on its own as a flow element. */
.fz-lockcard--inline {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  margin: var(--s-4) auto 0;
  box-shadow: var(--shadow-card);
}

.fz-lockcard__eyebrow {
  margin: 0 0 var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-text);
}
.fz-lockcard__lock {
  flex: none;
  display: inline-flex;
  color: var(--orange);                   /* icon role → --orange */
}
.fz-lockcard__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 2.4vw, 1.3rem);
  line-height: 1.22;
  color: var(--ink);                      /* warm charcoal */
  text-wrap: pretty;
}
.fz-lockcard__line {
  margin: 0 0 var(--s-5);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--body-text);
  text-wrap: pretty;
  max-width: 46ch;
}
.fz-lockcard__cta {
  /* leans on .btn-primary from the system sheet; this only handles layout */
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

/* ----------------------------------------------------------------------------
   FOCUS — keyboard users land cleanly on the one action that unlocks. Reuses
   the system focus ring (orange glow) so it can never drift from house style.
   -------------------------------------------------------------------------- */
.fz-lockcard__cta:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------------------------
   MOTION — the card settles in once; honors reduced-motion (ship-blocker rule
   in test-center-system.css). The placeholder/blur never animate.
   -------------------------------------------------------------------------- */
.fz-lockcard {
  animation: fzLockIn var(--brief) var(--ease-cinematic) both;
}
@keyframes fzLockIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
.fz-lockcard--inline {
  animation-name: fzLockInInline;
}
@keyframes fzLockInInline {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fz-lockcard,
  .fz-lockcard--inline {
    animation: none;
  }
}