/*
 * css/components/tier-gating.css
 * 18 Aug 2026 v3
 *
 * v3 - Spacing. The dashed border introduced in v2 sat hard against the
 *   text on all sides. Padding added to the wrapper, and spacing between
 *   stacked paragraphs. Seen on device, not in a gate: nothing asserts
 *   that a box looks like it contains its contents rather than traps
 *   them, and nothing sensibly could.
 *
 * v2 - A11Y-LOCK. Two faults, both systemic, both found on-device
 *   18 Aug in My Programme's "What Personal adds" block and then
 *   confirmed to affect EVERY locked surface in the product.
 *
 *   1. opacity: 0.55 on the wrapper dimmed the TEXT, not just the
 *      chrome. --color-text-secondary reads 5.97:1 on --color-bg-card
 *      at full strength and 2.95:1 composited at 0.55. Even
 *      --color-text at 9.45:1 fell to 4.11:1. Every locked tile,
 *      duration, session type and preview block failed WCAG 2.2 AA
 *      1.4.3, and the failure was invisible because each surface
 *      looked deliberately styled.
 *
 *      Locked state is now carried by a dashed primary border and the
 *      badge, never by reduced contrast. Encoding a state in lowered
 *      legibility fails the people this product is built for first.
 *
 *   2. .locked-badge is absolutely positioned with no space reserved
 *      beneath it. On a short tile it landed in whitespace and looked
 *      fine; on a full-width paragraph it landed ON the first line of
 *      text. Reserved right-hand space is now claimed on a leading
 *      <p>, which is the text-shaped case, leaving card and tile
 *      layouts untouched.
 *
 * Locked-feature wrapper — used by js/auth.js's lockedFeature() helper.
 * Every variable below confirmed against css/base/variables.css before
 * use, not copied blindly from the 9 May spec (which predates this
 * design system's current token names in places).
 */

.locked-feature-wrap {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-primary);
  transition: background-color 150ms ease;

  /* v3, 18 Aug 2026. The dashed border was drawn hard against the text
     on both sides -- the first line started on the border and the last
     line ran into it. A border with no breathing room reads as a box
     that has trapped the content rather than one that contains it, and
     it was the first thing Graeme saw on device.

     Padding on the WRAP, not the inner, so it applies wherever this
     component is used without any call site knowing about it. Card- and
     tile-shaped content already carries its own internal padding, so
     this adds a consistent outer margin to every locked surface rather
     than doubling anything up. */
  padding: var(--space-3);
}

.locked-feature-wrap:hover,
.locked-feature-wrap:focus-visible {
  background: var(--color-bg-hover);
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

.locked-feature-inner {
  pointer-events: none;
  user-select: none;
}

/* Reserve room for the badge on text-shaped locked content. A leading
   <p> is the paragraph case (My Programme's preview block); cards and
   tiles lead with a span or a div and are deliberately not matched, so
   their layout is unchanged. */
.locked-feature-inner > p:first-child,
.locked-feature-inner > div:first-child > p:first-child {
  padding-right: 7.5rem;
}

/* v3. Paragraphs after the first were running the full width into the
   right-hand border. The badge only occupies the first line, so they do
   not need the full 7.5rem reserve -- they need the same breathing room
   as everything else. */
.locked-feature-inner > p + p {
  margin-top: var(--space-2);
}

.locked-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.locked-badge-icon {
  font-size: var(--text-xs);
}

@media (prefers-reduced-motion: reduce) {
  .locked-feature-wrap {
    transition: none;
  }
}

/* Windows High Contrast / forced-colours: a dashed border survives,
   a background tint does not. Nothing here depends on the tint. */
@media (forced-colors: active) {
  .locked-feature-wrap {
    border: 1px dashed CanvasText;
  }
}