/* A LOCKED PREVIEW (locked-preview.js, 2026-09-29): a paid section's shape, blurred and empty, with
   the way to unlock it. Loaded by the props page, the widgets page and the Lineup Generator, after
   each page's own stylesheet. Every colour is a site token (style.css and site.css carry the same
   names), so both themes follow with nothing declared here. */

.lockp {
  position: relative;
  display: grid;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  background: var(--panel);
  isolation: isolate;
}
.lockp[hidden] { display: none; }
.lockp__art {
  padding: 16px;
  filter: blur(3px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

/* ---- the veil: a lock, a heading, one line, the button ---- */
.lockp__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 50%, var(--panel) 0%, transparent 100%),
    linear-gradient(180deg, transparent, var(--panel) 92%);
}
.lockp__icon { width: 28px; height: 28px; color: var(--brass); }
.lockp__h { margin: 0; color: var(--text); font: 700 1.05rem/1.25 var(--display, inherit), sans-serif; }
.lockp__p { margin: 0; max-width: 42ch; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.lockp__do { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.lockp__go { min-height: 44px; }

/* ---- lockBehind: a section's own message over the shape (the Generator's gate card) ---- */
.lockp--behind { place-items: center; padding: 24px 16px; min-height: 360px; }
.lockp--behind > .lockp__art { position: absolute; inset: 0; }
.lockp--behind > :not(.lockp__art) { position: relative; z-index: 1; width: min(100%, 560px); }

/* ---- the shapes ---- */
.lockp__bar, .lockp__dot, .lockp__chip, .lockp__num, .lockp__col, .lockp__meter, .lockp__cta {
  display: block;
  background: var(--line);
  border-radius: 6px;
}
.lockp__bar { height: 12px; }
.lockp__bar--thin { height: 8px; opacity: 0.7; }
.lockp__bar--head { height: 14px; background: var(--brass); opacity: 0.55; margin-bottom: 4px; }
.lockp__bar--field { height: 34px; border-radius: 10px; margin-bottom: 6px; }
.lockp__bar--w12 { width: 12%; }
.lockp__bar--w14 { width: 14%; }
.lockp__bar--w18 { width: 18%; }
.lockp__bar--w22 { width: 22%; }
.lockp__bar--w30 { width: 30%; }
.lockp__bar--w35 { width: 35%; }
.lockp__bar--w40 { width: 40%; }
.lockp__bar--w45 { width: 45%; }
.lockp__bar--w50 { width: 50%; }
.lockp__bar--w55 { width: 55%; }
.lockp__bar--w70 { width: 70%; }
.lockp__bar--w80 { width: 80%; }
.lockp__dot { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.lockp__dot--sm { width: 22px; height: 22px; }
.lockp__dot--lg { width: 58px; height: 58px; }
.lockp__lines { display: grid; gap: 6px; flex: 1 1 auto; min-width: 0; }
.lockp__num { flex: none; width: 34px; height: 24px; }
.lockp__num--lg { width: 64px; height: 36px; }
.lockp__meter { height: 5px; width: 60%; background: var(--brass); opacity: 0.35; }
.lockp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lockp__chip { width: 64px; height: 26px; border-radius: 999px; }
.lockp__tile, .lockp__row, .lockp__hero { display: flex; align-items: center; gap: 10px; }
.lockp__tile { padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.lockp__row { padding: 8px 4px; border-top: 1px solid var(--line-soft, var(--line)); }
.lockp__row .lockp__bar { flex: none; }
.lockp__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lockp__colbox, .lockp__card, .lockp__table, .lockp__rail, .lockp__stage { display: grid; gap: 8px; align-content: start; }
.lockp__leg { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.lockp__tool { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr); gap: 16px; }
.lockp__tool--gen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.lockp__cta { height: 44px; border-radius: 12px; background: var(--brass); opacity: 0.45; }
.lockp__chart { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; }
.lockp__col { flex: 1 1 0; height: 50%; border-radius: 5px 5px 2px 2px; }
.lockp__col:nth-child(3n + 1) { height: 72%; }
.lockp__col:nth-child(4n + 2) { height: 38%; }
.lockp__col:nth-child(5n + 3) { height: 88%; }
.lockp__col:nth-child(7n + 4) { height: 26%; }

@media (max-width: 899px) {
  .lockp__cols { grid-template-columns: 1fr; }
  .lockp__colbox:nth-child(n + 2) { display: none; }
  .lockp__tool, .lockp__tool--gen { grid-template-columns: 1fr; }
  .lockp__tool .lockp__rail { display: none; }
  .lockp__tool--gen .lockp__rail { display: grid; }
  .lockp__tool--gen .lockp__stage { display: none; }
}
@media (max-width: 640px) {
  .lockp__do { width: 100%; }
  .lockp__go { flex: 1 1 auto; justify-content: center; text-align: center; }
}