/* ================================================================
   ACCESS GATE (tcn_render_access_gate, inc/tcn-gate-render.php) — the lock
   screen / unlock card used on locked pages, in the popup and quick-view.
   Moved out of wp_head; tokens: tcn-base.css section 0.
   ================================================================ */
.tcn-gate{ --gate-accent: var(--accent); }
.tcn-gate--page{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:48px 20px; background:var(--clr-bg,#fff); }
.tcn-gate-card{ width:100%; max-width:520px; margin:0 auto; background:var(--clr-surface,#f7f7f8); border:1px solid var(--clr-border,rgba(0,0,0,.08)); border-radius:14px; overflow:hidden; box-shadow:0 20px 50px -20px rgba(0,0,0,.18); }
/* Embedded in the cinematic modal, the modal's own panel already IS the
   card — this strips the gate's standalone card chrome (border, shadow,
   own background, corner radius, max-width) so the gate reads as part
   of that one surface instead of a second box nested inside it. */
.tcn-gate-card--embedded{ max-width:none; background:transparent; border:0; border-radius:0; box-shadow:none; }
.tcn-gate-preview{ position:relative; background:var(--clr-surface-light,#f0f1f3); }
.tcn-gate-preview--art{ aspect-ratio:16/9; overflow:hidden; }
/* Background lives on its own layer so the anon-only blur never touches
   the lock icon / play button sitting on top of it — same reasoning as
   the card-grid artwork fix: CSS filter blurs an element's whole
   subtree, not just the background, regardless of child z-index. A
   logged-in viewer sees the real thumb even when locked; only an
   anonymous viewer (no credentials to even attempt purchase) gets the
   blur. */
.tcn-gate-preview-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.tcn-gate-art-lock{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; }
.tcn-gate-art-lock svg{ filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.tcn-gate-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.tcn-gate-play::before{ content:''; width:64px; height:64px; border-radius:50%; background:var(--panel); box-shadow:0 8px 24px rgba(0,0,0,.28); position:absolute; transition:transform .15s ease; }
.tcn-gate-play svg{ position:relative; color:var(--ink); }
.tcn-gate-play:hover::before{ transform:scale(1.08); }
.tcn-gate-play.is-playing::before{ background:var(--accent); }
.tcn-gate-play.is-playing svg{ color: var(--on-accent); }
.tcn-gate-body{ padding:24px 26px 28px; text-align:center; }
.tcn-gate-badge{ display:inline-block; font-size:.62rem; font-weight:800; letter-spacing:.12em; padding:.3rem .8rem; border-radius:20px; margin-bottom:12px; }
.tcn-gate-badge.is-locked{ background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.2); }
.tcn-gate-badge.is-members{ background:rgba(var(--dept-rgb,13,148,136),.1); color:var(--gate-accent); border:1px solid rgba(var(--dept-rgb,13,148,136),.25); }
.tcn-gate-title{ font-size:1.35rem; font-weight:900; color:var(--clr-text-main,#0a0a0a); margin:0 0 4px; letter-spacing:-.02em; line-height:1.2; }
.tcn-gate-src{ font-size:.75rem; font-weight:700; color:var(--gate-accent); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px; }
.tcn-gate-msg{ font-size:.9rem; color:var(--clr-text-muted,#6b7280); margin:0 auto 18px; max-width:24rem; line-height:1.5; }
.tcn-gate-field{ text-align:left; max-width:24rem; margin:0 auto; }
.tcn-gate-label{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--clr-text-muted,#6b7280); margin-bottom:7px; }
.tcn-gate-row{ display:flex; gap:8px; }
.tcn-gate-input{ flex:1; background:var(--panel); border:2px solid var(--clr-border,rgba(0,0,0,.12)); border-radius:10px; padding:.8rem 1rem; font-size:1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center; color:var(--clr-text-main,#0a0a0a); font-family:'Courier New',monospace; transition:border-color .2s,box-shadow .2s; }
.tcn-gate-input:focus{ outline:none; border-color:var(--gate-accent); box-shadow:0 0 0 3px rgba(var(--dept-rgb,13,148,136),.14); }
.tcn-gate-input::placeholder{ color:var(--clr-text-muted,#9ca3af); font-weight:500; letter-spacing:.05em; }
.tcn-gate-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:.85rem 1.4rem; border:none; border-radius:10px; font-size:.9rem; font-weight:800; letter-spacing:.02em; cursor:pointer; text-decoration:none; transition:background .15s,transform .1s,border-color .15s; }
.tcn-gate-btn:active{ transform:scale(.99); }
.tcn-gate-btn--primary{ background:var(--ink); color:var(--inverse); }
.tcn-gate-btn--primary:hover{ background:var(--accent); color: var(--on-accent); }
.tcn-gate-btn--inline{ width:auto; white-space:nowrap; padding:.85rem 1.5rem; }
.tcn-gate-btn--ghost{ background:transparent; color:var(--clr-text-main,#0a0a0a); border:1px solid var(--clr-border,var(--line)); margin-top:8px; }
.tcn-gate-btn--ghost:hover{ border-color:var(--gate-accent); color:var(--gate-accent); }
.tcn-gate-btn--buy{ background:var(--accent); color: var(--on-accent); }
.tcn-gate-btn--buy:hover{ filter:brightness(.94); }
.tcn-gate-or{ position:relative; max-width:24rem; margin:14px auto; text-align:center; }
.tcn-gate-or::before{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--clr-border,var(--line)); }
.tcn-gate-or span{ position:relative; background:var(--clr-surface,#f7f7f8); padding:0 12px; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--clr-text-muted,#9ca3af); }
.tcn-gate-feedback{ margin-top:10px; padding:.6rem .9rem; border-radius:8px; font-size:.82rem; font-weight:600; text-align:center; }
.tcn-gate-feedback.is-success{ background:rgba(var(--dept-rgb,13,148,136),.1); color:var(--gate-accent); }
.tcn-gate-feedback.is-error{ background:rgba(239,68,68,.1); color:#dc2626; }
.tcn-gate-note{ font-size:.75rem; color:var(--clr-text-muted,#9ca3af); margin:14px auto 0; max-width:24rem; line-height:1.5; }
.tcn-gate-note a{ color:var(--gate-accent); font-weight:700; }
.tcn-gate-more{ display:inline-block; margin-top:16px; font-size:.75rem; font-weight:700; color:var(--clr-text-muted,#9ca3af); text-decoration:none; }
.tcn-gate-more:hover{ color:var(--gate-accent); }
@media(max-width:520px){ .tcn-gate-row{ flex-direction:column; } .tcn-gate-btn--inline{ width:100%; } }

.tcn-gate-title { font-family: var(--dp-serif); font-weight: 400; font-size: 2rem; letter-spacing: .015em; text-transform: uppercase; }
.tcn-gate-badge { letter-spacing: .15em; font-weight: 600; }
.tcn-gate-btn, .tcn-gate-input { border-radius: 999px; }
.tcn-gate-input { border-width: 1px; }