/* ================================================================
   AUTH PAGES — /login/ (tcn-login.php) and /register/ (page-register.php).
   Moved out of the templates. Tokens: tcn-base.css section 0.
   ================================================================ */
/* from tcn-login.php */
.tcn-auth-wrap{max-width:460px;margin:0 auto;padding:130px 20px 120px}
.tcn-auth-box{background:var(--clr-surface,#f7f7f8);border:1px solid var(--clr-border,var(--line));border-radius:var(--radius-lg,14px);padding:48px 40px;position:relative;overflow:hidden}
.tcn-auth-logo{text-align:center;margin-bottom:32px}
.tcn-auth-logo span{display:block;font-family:var(--dp-serif);font-size:2rem;color:var(--clr-text-main);margin-top:8px;letter-spacing: .015em; text-transform: uppercase; }
.tcn-auth-tabs{display:flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:32px}
.tcn-auth-tab{flex:1;text-align:center;padding:10px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-text-muted,#6b7280);cursor:pointer;transition:background .2s,color .2s;border:none;background:none}
.tcn-auth-tab.active{background:var(--ink);color:var(--inverse)}
.tcn-auth-tab:hover{color:var(--clr-text-main,#0a0a0a)}
.tcn-auth-error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:var(--clr-accent,#dc2626);padding:12px 16px;border-radius:var(--radius-md,10px);font-size:.85rem;margin-bottom:20px;text-align:center}
.tcn-auth-field{margin-bottom:20px}
.tcn-auth-field label{display:block;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--clr-text-muted,#6b7280);text-transform:uppercase;margin-bottom:8px}
.tcn-auth-field input{width:100%;padding:14px 16px;
rgba(255,255,255,.04);border:1px solid var(--clr-border,var(--line));border-radius:var(--radius-md,10px);color:var(--clr-text-main,#0a0a0a);font-size:.95rem;outline:none;transition:border-color .2s;box-sizing:border-box}
.tcn-auth-field input:focus{border-color:var(--clr-primary,#0d9488)}
.tcn-auth-field input::placeholder{color:var(--clr-text-muted,#6b7280);opacity:.6}
.tcn-auth-remember{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:.85rem;color:var(--clr-text-muted,#6b7280)}
.tcn-auth-remember input{width:16px;height:16px;accent-color:var(--clr-primary,#0d9488)}
.tcn-auth-btn{width:100%;padding:16px;background:var(--ink);color:var(--inverse);border:none;border-radius:999px;font-family:var(--dp-sans);font-size:.85rem;font-weight:800;letter-spacing:.05em;cursor:pointer;transition:background .2s}
.tcn-auth-btn:hover{background:var(--accent);color: var(--on-accent)}
.tcn-auth-divider{text-align:center;color:var(--clr-text-muted,#6b7280);font-size:.75rem;margin:24px 0;position:relative}
.tcn-auth-divider::before,.tcn-auth-divider::after{content:'';position:absolute;top:50%;width:35%;height:1px;background:var(--clr-border,var(--line))}
.tcn-auth-divider::before{left:0}
.tcn-auth-divider::after{right:0}
.tcn-auth-footer{text-align:center;margin-top:24px;font-size:.85rem;color:var(--clr-text-muted,#6b7280)}
.tcn-auth-footer a{color:var(--clr-primary,#0d9488);text-decoration:none;font-weight:700}
.tcn-auth-panel{display:none}
.tcn-auth-panel.active{display:block}

/* from page-register.php */
/* ─── Register Page ─── */
.tcn-reg-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 20px 80px;background:var(--clr-bg)}
.tcn-reg-box{width:100%;max-width:480px;background:var(--clr-surface,#f7f7f8);border:1px solid var(--clr-border,var(--line));border-radius:var(--radius-lg,14px);padding:48px 36px;position:relative;overflow:hidden}
.tcn-reg-heading{font-family:var(--dp-serif);font-weight:400;letter-spacing: .015em;font-size:clamp(2rem,3.4vw,2.8rem);text-align:center;margin-bottom:6px;color:var(--clr-text-main,#0a0a0a); text-transform: uppercase; }
.tcn-reg-sub{color:var(--clr-text-muted,#6b7280);text-align:center;font-size:.85rem;margin-bottom:28px;line-height:1.5}
.tcn-reg-label{display:block;font-size:.75rem;font-weight:800;color:var(--clr-text-muted,#6b7280);letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.tcn-reg-input{width:100%;
rgba(255,255,255,.04);border:1px solid var(--clr-border,var(--line));border-radius:var(--radius-md,10px);padding:14px 16px;color:var(--clr-text-main,#0a0a0a);font-size:.95rem;font-weight:600;outline:none;transition:border-color .2s;box-sizing:border-box}
.tcn-reg-input:focus{border-color:var(--clr-primary,#0d9488)}
.tcn-reg-input::placeholder{color:var(--clr-text-muted,#6b7280);opacity:.6}
.tcn-reg-code-input{font-family:var(--font-mono,'JetBrains Mono',monospace);letter-spacing:.15em;text-transform:uppercase;font-size:1rem;text-align:center}
.tcn-reg-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-md,10px);font-weight:800;font-size:.9rem;letter-spacing:.08em;cursor:pointer;transition:background .2s,border-color .2s;text-transform:uppercase}
.tcn-reg-btn-primary{background:var(--ink);color:var(--inverse);border-radius:999px}
.tcn-reg-btn-primary:hover{background:var(--accent);color: var(--on-accent)}
.tcn-reg-btn-primary:disabled{opacity:.4;cursor:not-allowed}
.tcn-reg-msg{margin-top:12px;padding:10px 14px;border-radius:var(--radius-sm,6px);font-size:.8rem;font-weight:600;text-align:center;display:none}
.tcn-reg-msg.err{display:block;background:rgba(220,38,38,.08);color:var(--clr-accent,#dc2626);border:1px solid rgba(220,38,38,.16)}
.tcn-reg-msg.ok{display:block;background:var(--clr-primary-soft,rgba(13,148,136,.10));color:var(--clr-primary,#0d9488);border:1px solid var(--clr-primary-soft-border,rgba(13,148,136,.25))}
.tcn-reg-footer{text-align:center;margin-top:20px;font-size:.85rem;color:var(--clr-text-muted,#6b7280)}
.tcn-reg-footer a{color:var(--clr-primary,#0d9488);text-decoration:underline}
.tcn-reg-field{margin-bottom:16px}

/* ─── Code section (collapsible) ─── */
.tcn-reg-code-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:var(--clr-text-muted,#6b7280);font-size:.7rem;font-weight:700;letter-spacing:.1em}
.tcn-reg-code-divider::before,.tcn-reg-code-divider::after{content:'';flex:1;height:1px;background:var(--clr-border,var(--line))}
.tcn-reg-code-toggle{cursor:pointer;color:var(--clr-text-muted,#6b7280);font-size:.8rem;font-weight:700;background:none;border:1px solid var(--clr-border,var(--line));border-radius:12px;min-height:44px;padding:0 16px;width:100%;text-align:center;transition:border-color .2s,color .2s;letter-spacing:.06em}
.tcn-reg-code-toggle:hover{border-color:var(--clr-primary-soft-border,rgba(13,148,136,.25));color:var(--clr-text-main,#0a0a0a)}
.tcn-reg-code-toggle .arrow{display:inline-block;transition:transform .3s;margin-left:6px}
.tcn-reg-code-toggle.open .arrow{transform:rotate(180deg)}
.tcn-reg-code-section{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.tcn-reg-code-section.open{max-height:250px;opacity:1}
.tcn-reg-code-inner{padding-top:16px}
.tcn-reg-code-row{display:flex;gap:10px;align-items:stretch}
.tcn-reg-code-row .tcn-reg-input{flex:1}
.tcn-reg-code-verify{background:var(--line);color:var(--clr-text-muted,#6b7280);border:1px solid var(--clr-border,var(--line));border-radius:var(--radius-md,10px);padding:0 20px;font-weight:800;font-size:.75rem;letter-spacing:.08em;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;text-transform:uppercase}
.tcn-reg-code-verify:hover{
rgba(255,255,255,.04);color:var(--clr-text-main,#0a0a0a)}
.tcn-reg-code-verify:disabled{opacity:.4;cursor:not-allowed}
.tcn-reg-code-status{margin-top:10px;font-size:.8rem;font-weight:600;text-align:center;min-height:20px}
.tcn-reg-code-status.valid{color:var(--clr-primary,#0d9488)}
.tcn-reg-code-status.invalid{color:var(--clr-accent,#dc2626)}

/* ─── Unlock preview ─── */
.tcn-reg-unlock-info{background:var(--clr-primary-soft,rgba(13,148,136,.10));border:1px solid var(--clr-primary-soft-border,rgba(13,148,136,.25));border-radius:var(--radius-md,10px);padding:14px;margin-top:12px;text-align:center;display:none}
.tcn-reg-unlock-info.show{display:block}
.tcn-reg-unlock-info .dept-name{color:var(--clr-primary,#0d9488);font-weight:800;font-size:.95rem}
.tcn-reg-unlock-info .chan-name{color:var(--clr-cat-green,#16a34a);font-size:.75rem;font-weight:600;opacity:.8;margin-top:4px}
.tcn-reg-unlock-info .lock-icon{font-size:1.2rem;margin-bottom:4px}

@media (max-width:480px){
    .tcn-reg-box{padding:32px 24px}
    .tcn-reg-heading{font-size:1.2rem}
}

/* layout system: links inside the auth cards are real touch targets; fields 16px (no iOS zoom) */
.tcn-auth-field input,.tcn-reg-input,.tcn-auth-card input[type=text],.tcn-auth-card input[type=email],.tcn-auth-card input[type=password]{min-height:var(--tap,44px);font-size:16px}
.tcn-auth-card a,.tcn-reg-card a{display:inline-flex;align-items:center;min-height:var(--tap,44px)}
.tcn-auth-footer a,.tcn-reg-footer a{display:inline-flex;align-items:center;min-height:var(--tap,44px);padding:0 4px}


/* ---------- Register as the start of a plan (?plan=): what you are getting into, then the steps ---------- */
.tcn-reg-steps { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.tcn-reg-steps li { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted, #6f7078); font: 700 12px/1.2 var(--dp-sans); }
.tcn-reg-steps li span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eeeef2; font-size: 12px; }
.tcn-reg-steps li.is-on { color: var(--ink, #0b0b0d); }
.tcn-reg-steps li.is-on span { background: var(--accent, #313de0); color: #fff; }

.tcn-reg-hint { margin: 6px 0 0; min-height: 1em; color: var(--muted, #6f7078); font: 600 13px/1.3 var(--dp-sans); }
.tcn-reg-hint b { color: var(--ink, #0b0b0d); }
.tcn-reg-hint.ok { color: #0f6b46; }
.tcn-reg-hint.bad { color: #a8281c; }
select.tcn-reg-input { min-height: 52px; background: #fff; }


/* ---------- Sign-up: the banner on top, the form card rising out of it, brand colors ---------- */
.pg-head + .tcn-reg-page { min-height: 0; padding: 56px 16px 112px; margin-top: 0; position: relative; z-index: 2; align-items: flex-start; }
@media (max-width: 520px) { .pg-head + .tcn-reg-page { padding: 32px 16px 88px; } }
.pg-head ~ .tcn-reg-page .tcn-reg-box { box-shadow: 0 18px 44px rgba(27, 26, 99, .18); border-color: transparent; }

.tcn-reg-btn-primary { background: var(--plan-channel_plus); color: #fff; }
.tcn-reg-btn-primary:hover { filter: brightness(1.08); background: var(--plan-channel_plus); color: #fff; }
.tcn-reg-input:focus { border-color: var(--accent, #313de0); box-shadow: 0 0 0 3px rgba(49, 61, 224, .14); }
.tcn-reg-code-divider { color: var(--accent, #313de0); }
.pg-head:not(.ga-head):has(+ .tcn-reg-page) { padding-bottom: 76px; }

/* the banner wears the plan's colorway */
.pg-head.plan-bg--channel { background: var(--plan-channel); }
.pg-head.plan-bg--channel_plus { background: var(--plan-channel_plus); }
.pg-head.plan-bg--own_network { background: var(--plan-own_network); }


/* Lost password: the gate card (same family as the members-only popup) under the page banner */
.pg-head + .tcn-reg-page .tcn-gcard { max-width: 520px; box-shadow: 0 18px 44px rgba(27, 26, 99, .18); border-color: transparent; background: #fff; }
.tcn-lp-form { display: grid; gap: 8px; max-width: 24rem; margin: 0 auto 8px; text-align: left; }
.tcn-lp-form .tcn-gate-label { margin: 8px 0 0; }
.tcn-lp-form .tcn-gate-btn { margin-top: 12px; }
.tcn-gcard .tcn-gate-btn--ghost { max-width: 24rem; margin-inline: auto; }
.tcn-gcard .tcn-gate-body { padding: 40px 32px 44px; }
@media (max-width: 520px) { .tcn-gcard .tcn-gate-body { padding: 32px 20px 36px; } }

/* Review page: one inviting card per place (logo tile, five gold stars, one button) */
.tcn-rv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 760px; }
@media (max-width: 640px) { .tcn-rv { grid-template-columns: minmax(0, 1fr); } }
.tcn-rv-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(27, 26, 99, .18); color: var(--ink, #0b0b0d); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tcn-rv-card:hover { transform: translateY(-3px); box-shadow: 0 24px 52px rgba(27, 26, 99, .26); }
.tcn-rv-logo { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 140px; padding: 24px; font: 800 28px/1 var(--dp-sans); }
.tcn-rv-card--google .tcn-rv-logo { background: #f4f6fb; color: #3c4043; }
.tcn-rv-card--yelp .tcn-rv-logo { background: #d32323; color: #fff; text-transform: lowercase; font-size: 34px; letter-spacing: -.02em; }
.tcn-rv-logo b { font-weight: 800; }
.tcn-rv-body { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 24px 28px; }
.tcn-rv-stars { display: flex; gap: 4px; color: #f5b301; }
.tcn-rv-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--ink, #0b0b0d); color: #fff; font: 800 15px/1 var(--dp-sans); white-space: nowrap; }
.tcn-rv-card:hover .tcn-rv-btn { background: var(--accent, #313de0); }

/* Thank-you page: the video in a card, then two equal buttons */
.ty-card { width: 100%; max-width: 760px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(27, 26, 99, .18); }
.ty-video { position: relative; aspect-ratio: 16 / 9; background: #0b0b1e; }
.ty-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ty-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 24px; }
.ty-actions .tcn-gate-btn { margin: 0; max-width: none; }
@media (max-width: 520px) { .ty-actions { grid-template-columns: minmax(0, 1fr); padding: 18px; } }

/* Social page: where to start, then where to follow */
.sc-card { width: 100%; max-width: 520px; padding: 32px 28px; border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(27, 26, 99, .18); }
.sc-start { display: grid; gap: 10px; }
.sc-start .tcn-gate-btn { margin: 0; max-width: none; }
.sc-label { margin: 28px 0 12px; color: #4a5160; font: 800 12px/1 var(--dp-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.sc-follow { display: grid; gap: 12px; }
@media (max-width: 520px) { .sc-card { padding: 24px 18px; } }