/* TCS Engage popup: dark card, TheCivilStudies orange. */
.tcse-wrap {
  --tcse-accent: var(--theme-palette-color-1, #e65616);
  --tcse-bg: #1b1b1b;
  --tcse-panel: #262626;
  --tcse-line: #383838;
  --tcse-ink: #e8e8e8;
  --tcse-muted: #a3a3a3;
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  padding: 16px; font-size: 16px; line-height: 1.5; color: var(--tcse-ink);
}
.tcse-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.tcse-card {
  position: relative; width: min(440px, 100%); padding: 28px 24px 20px; border-radius: 18px;
  background: var(--tcse-bg); border: 1px solid var(--tcse-line);
  background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--tcse-accent) 28%, transparent), transparent 60%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.98); opacity: 0; transition: transform .28s ease, opacity .28s ease;
}
.tcse-wrap.is-open .tcse-backdrop { opacity: 1; }
.tcse-wrap.is-open .tcse-card { transform: none; opacity: 1; }
.tcse-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--tcse-panel); color: var(--tcse-ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.tcse-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: color-mix(in srgb, var(--tcse-accent) 18%, transparent); color: var(--tcse-accent); }
.tcse-card h2 { margin: 10px 0 10px; font-size: 1.35rem; line-height: 1.25; color: #fff; text-wrap: balance; }
.tcse-points { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .93rem; color: var(--tcse-ink); }
.tcse-points li { padding-left: 24px; position: relative; }
.tcse-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--tcse-accent); font-weight: 800; }
.tcse-form { display: flex; gap: 8px; }
.tcse-form input[type=email] { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; border-radius: 10px; border: 1px solid #4a4a4a; background: #fff; color: #111; font: inherit; }
.tcse-form input[type=email]::placeholder { color: #6b7280; opacity: 1; }
.tcse-form input[type=email]:focus { outline: 2px solid var(--tcse-accent); outline-offset: 1px; }
.tcse-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--tcse-accent); color: #fff !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none; }
.tcse-btn:disabled { opacity: .6; cursor: wait; }
.tcse-btn:focus-visible, .tcse-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tcse-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.tcse-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tcse-msg { margin: 8px 0 0; min-height: 1.2em; font-size: .88rem; }
.tcse-msg.bad { color: #f87171; font-weight: 600; }
.tcse-fine { margin: 6px 0 0; font-size: .76rem; color: var(--tcse-muted); }
.tcse-fine a { color: var(--tcse-muted); text-decoration: underline; }
.tcse-done { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, #4ade80 18%, transparent); color: #4ade80; font-size: 1.4rem; font-weight: 800; }
.tcse-lead { margin: 0 0 10px; color: var(--tcse-ink); }

/* Phones: bottom sheet instead of a centred modal. */
@media (max-width: 640px) {
  .tcse-wrap { place-items: end stretch; padding: 0; }
  .tcse-card { width: 100%; border-radius: 18px 18px 0 0; padding: 24px 18px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
  .tcse-form { flex-direction: column; }
  .tcse-card h2 { font-size: 1.2rem; padding-right: 30px; }
}
@media (prefers-reduced-motion: reduce) { .tcse-card, .tcse-backdrop { transition: none; } }