/*
 * The lock (LocksHelper#lock_tag): a link naming the account that unlocks
 * what is behind it. Two variants and no more — "Free account" in the link
 * colour on the raised surface, "Powerpack" in the accent on its tint
 * (approved at M03 owner ask 1). Colour is never the only cue: the words and
 * the padlock carry it too.
 *
 *   <a class="lock lock--powerpack" aria-label="Available with Powerpack">…</a>
 *
 * Inline in a sentence or a table cell (.lock-cell, shared/_lock_cell), or as
 * the block form: centred in a panel under one sentence (.lock-panel), which
 * is what a gated chart's .chart-locked holds.
 */
@layer components {
  .lock {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0 var(--space-2xs);
    border-radius: var(--radius-xs);
    font-family: var(--font-ui);
    font-size: var(--text-meta-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-meta-xs);
    white-space: nowrap;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .lock--free-account {
    background-color: var(--color-surface-raised);
    color: var(--color-link);
  }

  .lock--powerpack {
    background-color: var(--color-accent-tint);
    color: var(--color-accent-strong);
  }

  .lock-cell {
    white-space: nowrap;
  }

  .lock-panel {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    text-align: center;

    & .lock {
      padding: var(--space-3xs) var(--space-sm);
      font-size: var(--text-ui-sm);
      line-height: var(--leading-ui-sm);

      @media (pointer: coarse) {
        min-block-size: var(--target-min);
      }
    }
  }

  .lock-panel__sentence {
    margin: 0;
    color: var(--color-ink-soft);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
  }

  /* A chart a reader's account does not reach: the mask colour at the
     chart's own height, the block-form lock in the middle of it, rather than
     a blurred blank. */
  .chart-locked {
    display: grid;
    place-items: center;
    block-size: var(--height, 300px);
    border: var(--rule-width) solid var(--color-mask-line);
    border-radius: var(--radius-lg);
    background-color: var(--color-mask);
  }
}