/* BlockTheCalls app theme — matches blockthecalls.com ("Old Glory" system).
   Drop-in: copy this folder to the app's public/brand/theme/ and link it AFTER the base stylesheet:
   <link rel="stylesheet" href="/brand/theme/btc-theme.css">
   All assets are referenced relatively (same origin), so the existing CSP needs no change.        */

@font-face { font-family: 'Bricolage'; src: url('/app-theme/bricolage-display.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/app-theme/public-sans.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ---------- tokens: brand values + remap of the app's own variables ---------- */
:root, html[data-theme=light] {
  --btc-ink: #0a1f3f; --btc-ink-2: #0f2c57; --btc-blue: #0a3161; --btc-red: #b31942; --btc-red-hover: #93112f; --btc-red-light: #ff7a8f;
  --btc-fog: #eef1f6; --btc-paper: #fff; --btc-mute: #4a5a70; --btc-field: #7d8ca2; --btc-line: rgba(15, 30, 51, .14); --btc-line-dark: rgba(255, 255, 255, .16);
  --btc-display: 'Bricolage', system-ui, sans-serif; --btc-body: 'Public Sans', system-ui, sans-serif;
  --btc-bar: 68px; --btc-form-col: 640px;
  /* app variables (base.css) re-pointed at the brand so every page inherits it */
  --brand-primary: #0a1f3f; --brand-primary-hover: #0f2c57; --brand-accent: #b31942; --brand-ink: #0a1f3f;
  --text-primary: #0a1f3f; --text-strong: #0a1f3f; --text-secondary: #4a5a70; --text-muted: #4a5a70; --text-link: #0a3161;
  --border-interactive: #0a3161; --focus-ring: #b31942; --font-heading: var(--btc-display); --font-body: var(--btc-body);
  --navy: #0a3161; --blue: #0a3161; --ink: #0a1f3f; --muted: #4a5a70; --line: #d3dae5; --bg: #eef1f6; --card: #fff; --err: #b31942; --ok: #1f7a4d; --accent: #b31942;
}
html[data-theme=dark] {
  --btc-fog: #06142a; --btc-paper: #0d2346; --btc-mute: #a9b8cc; --btc-field: #5d7398; --btc-line: rgba(255, 255, 255, .14);
  --text-primary: #eef3fa; --text-strong: #fff; --text-secondary: #a9b8cc; --text-muted: #a9b8cc; --text-link: #9cc3ff;
  --navy: #9cc3ff; --blue: #2f5f9e; --ink: #eef3fa; --muted: #a9b8cc; --line: #2a4168; --bg: #06142a; --card: #0d2346; --surface: #132d55; --err: #ff8fa1; --ok: #86efac;
}

/* ---------- base ---------- */
html body { background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--btc-body); -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3 { font-family: var(--btc-display); font-weight: 700; letter-spacing: -.025em; text-transform: none; color: var(--ink); }
html body a { color: var(--navy); text-underline-offset: .18em; }
html body :focus-visible { outline: 3px solid var(--btc-red); outline-offset: 2px; }
html[data-theme=dark] body :focus-visible { outline-color: var(--btc-red-light); }
html body .skip-link { background: var(--btc-red); color: #fff; border-radius: 999px; z-index: 60; }

/* ---------- toolbar: navy glass with the 2px red rule ---------- */
html body .app-toolbar { background: rgba(10, 31, 63, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 0; box-shadow: inset 0 -2px 0 var(--btc-red); color: #fff; }
html body .app-toolbar-inner { min-height: calc(var(--btc-bar) - 2px); padding-block: 0; width: min(80rem, 100% - 2.5rem); }
html body .app-toolbar .brand-mark { color: #fff; text-decoration: none; gap: .6rem; }
html body .app-toolbar .brand-wordmark { color: #fff; font: 800 1.2rem/1 var(--btc-display); letter-spacing: -.03em; }
html body .app-toolbar .brand-wordmark::after { content: '.com'; color: var(--btc-red-light); }
html body .app-toolbar :focus-visible { outline-color: #fff; }
html body[data-shell=auth] .app-toolbar .brand-wordmark { display: inline; }
html body .site-nav a { font-weight: 500; }
html body .site-nav a[aria-current=page] { box-shadow: inset 0 -2px 0 var(--btc-red-light); }

/* ---------- auth shell: cinematic split, footage left / form right ---------- */
html body[data-shell=auth] main#main:has(> div > .auth-brand) { width: 100%; max-width: none; margin: 0; padding: 0; }
html body main#main > div:has(> .auth-brand) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--btc-form-col)); grid-template-rows: repeat(4, auto) 1fr;
  min-height: calc(100dvh - var(--btc-bar)); margin: 0; padding: 0; gap: 0; background: var(--btc-fog);
  background: linear-gradient(90deg, var(--btc-ink) 0 calc(100% - var(--btc-form-col)), var(--btc-fog) 0); }
/* footage panel (sticks under the toolbar while the form scrolls) */
html body main#main > div:has(> .auth-brand)::before {
  content: ''; grid-column: 1; grid-row: 1 / -1; align-self: start; position: sticky; top: var(--btc-bar); height: calc(100dvh - var(--btc-bar)); min-height: 520px;
  background: linear-gradient(0deg, rgba(10, 31, 63, .96) 0%, rgba(10, 31, 63, .55) 45%, rgba(10, 31, 63, .15) 75%), url('/app-theme/panel.webp') center / cover no-repeat, var(--btc-ink); }
/* headline over the footage, with the 40px red rule above it */
html body main#main > div:has(> .auth-brand)::after {
  content: 'Screen spam calls and scam calls before you answer.'; grid-column: 1; grid-row: 1 / -1; align-self: end; position: sticky; bottom: 0; z-index: 1;
  box-sizing: border-box; max-width: 44rem; padding: 30px clamp(32px, 5vw, 72px) clamp(40px, 6vw, 80px); color: #fff; text-wrap: balance;
  font: 700 clamp(2.4rem, 3.9vw, 4rem)/1.02 var(--btc-display); letter-spacing: -.035em;
  background: linear-gradient(var(--btc-red), var(--btc-red)) left clamp(32px, 5vw, 72px) top 0 / 40px 4px no-repeat; }
html body main#main > div:has(> .auth-brand) > *, html body main#main > div:has(> .auth-brand) > astro-island > * { grid-column: 2; }
/* the toolbar already carries the logo; the duplicate in-page wordmark is decorative */
html body main#main > div:has(> .auth-brand) > .auth-brand { display: none; }

/* form card */
html body .card { background: var(--card); color: var(--ink); border: 0; border-radius: 28px; box-shadow: 0 30px 80px -40px rgba(10, 31, 63, .45), 0 1px 2px rgba(10, 31, 63, .06); gap: .9rem; }
html[data-theme=dark] body .card { box-shadow: 0 0 0 1px var(--btc-line), 0 30px 80px -40px rgba(0, 0, 0, .7); }
html body main#main > div:has(> .auth-brand) > .card, html body main#main > div:has(> .auth-brand) > astro-island > .card { box-sizing: border-box; width: auto; max-width: 540px; margin: clamp(32px, 5vw, 64px) clamp(16px, 3vw, 48px) 0; justify-self: center; padding: clamp(28px, 3.2vw, 44px); }
html body .card h1 { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.02; margin: 0 0 .35rem; }
html body .card h1::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--btc-red); margin-bottom: 20px; }
html body .lede { color: var(--muted); font-size: 1rem; line-height: 1.55; }
html body .card > .lede { margin: 0; }
html body .card > .lede + .lede { margin-top: -.35rem; font-size: .92rem; }
/* links + legal lines below the card */
html body main#main > div:has(> .auth-brand) > .lede, html body main#main > div:has(> .auth-brand) > .auth-alt {
  box-sizing: border-box; width: 100%; max-width: 540px; justify-self: center; margin: 20px 0 0; padding: 0 clamp(16px, 3vw, 48px); text-align: center; color: var(--muted); }
html body main#main > div:has(> .auth-brand) > .auth-legal { margin-top: 4px; font-size: .88rem; }
html body main#main > div:has(> .auth-brand) > :last-child { margin-bottom: 56px; }
html body .auth-alt a, html body .lede a { color: var(--navy); font-weight: 650; }

/* ---------- fields ---------- */
html body .waitlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 10px 0 6px; }
html body .waitlist-field { gap: 6px; }
html body .card label, html body .waitlist-field label { font-weight: 650; font-size: .92rem; color: var(--ink); }
html body input[type='text'], html body input[type='email'], html body input[type='tel'], html body input[type='password'], html body input[type='search'], html body input[type='number'], html body input:not([type]), html body select, html body textarea {
  box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 14px; margin: 0; border: 1.5px solid var(--btc-field); border-radius: 12px; background: var(--card);
  color: var(--ink); font: 400 1rem/1.4 var(--btc-body); transition: border-color .2s, box-shadow .2s; }
html body select { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b31942' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px 8px no-repeat; }
html body input:hover, html body select:hover, html body textarea:hover { border-color: var(--ink); }
html body input:focus, html body select:focus, html body textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10, 49, 97, .18); }
html body input:focus-visible, html body select:focus-visible, html body textarea:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px var(--card), 0 0 0 5px var(--btc-red); }
html body input[aria-invalid=true], html body select[aria-invalid=true] { border-color: var(--err); }

/* consent block */
html body fieldset.consent-options { display: block; border: 0; border-radius: 18px; background: var(--bg); padding: 20px 20px 6px; margin: 6px 0 4px; min-width: 0; }
html body fieldset.consent-options legend { float: left; width: 100%; padding: 0; margin: 0 0 6px; font: 700 1.1rem/1.2 var(--btc-display); letter-spacing: -.015em; color: var(--ink); }
html body fieldset.consent-options > .lede { clear: both; font-size: .92rem; margin: 0 0 8px; }
html body .card label.consent-option, html body .consent-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--btc-line);
  font-weight: 400; font-size: .9rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
html body .consent-option strong { display: block; margin-bottom: 2px; font-size: .97rem; font-weight: 700; color: var(--ink); }
html body input[type='checkbox'], html body input[type='radio'] { width: 22px; min-width: 22px; max-width: 22px; height: 22px; min-height: 22px; accent-color: var(--btc-red); cursor: pointer; }
html body .consent-option input[type='checkbox'] { margin: 1px 0 0; }
html body input[type='checkbox']:focus-visible, html body input[type='radio']:focus-visible { outline: 3px solid var(--btc-red); outline-offset: 2px; box-shadow: none; }

/* ---------- buttons ---------- */
html body button { font-family: var(--btc-body); }
html body button[type='submit'], html body .btn-primary, html body .button-primary {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--btc-red); color: #fff; font: 650 1.05rem/1 var(--btc-body); cursor: pointer; transition: background-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 12px 28px -14px rgba(179, 25, 66, .8); }
html body button[type='submit']:hover:not(:disabled) { background: var(--btc-red-hover); transform: translateY(-1px); }
html body button[type='submit']:focus-visible { outline: 3px solid var(--btc-red); outline-offset: 3px; }
/* disabled (e.g. until human verification completes): calm and legible rather than a washed-out red */
html body button[type='submit']:disabled, html body button[type='submit'][disabled] { opacity: 1; background: #d9dfe8; color: #4a5a70; box-shadow: none; cursor: not-allowed; transform: none; }
html[data-theme=dark] body button[type='submit']:disabled { background: #1c355d; color: #a9b8cc; }
html body button.secondary { background: var(--btc-ink); }
html body .card [aria-label='Human verification']:not(:empty) { min-height: 65px; }

/* status / errors */
html body [data-state=error] .empty-title, html body .error-state .empty-title { color: var(--err); font-family: var(--btc-display); }
html body .warn { border-radius: 12px; }

/* ---------- footer: editorial navy with thirteen-pixel hairline stripes ---------- */
html body .site-footer { position: relative; box-sizing: border-box; width: 100%; background: var(--btc-ink); color: #dfe7f2; text-align: left; justify-items: stretch;
  padding: 72px max(20px, calc((100% - 75rem) / 2)) 36px; margin-top: auto; border: 0; font-size: .95rem; gap: 20px; }
html body .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; background: repeating-linear-gradient(180deg, var(--btc-red) 0 1px, transparent 1px 2px); }
html body .site-footer a { color: #fff; font-weight: 400; min-height: 2.25rem; }
html body .site-footer a:hover { color: var(--btc-red-light); }
html body .site-footer :focus-visible { outline-color: #fff; }
html body .site-footer-cols { gap: 28px 40px; padding-bottom: 32px; border-bottom: 1px solid var(--btc-line-dark); }
html body .site-footer-col { gap: 0; }
html body .site-footer-col > strong { color: var(--btc-red-light); font: 700 .95rem/1.2 var(--btc-body); margin-bottom: 10px; }
html body .site-footer-brand { display: inline-block !important; min-height: 0 !important; margin-bottom: 18px; color: #fff !important; font: 800 clamp(2rem, 3.4vw, 3rem)/1 var(--btc-display) !important; letter-spacing: -.04em; }
html body .site-footer-brand .dot { color: var(--btc-red-light); }
html body .site-footer-nap { color: #dfe7f2; line-height: 1.7; }
html body .site-footer-nap strong { color: #fff; font-family: var(--btc-body); }
html body .site-footer-nap a { min-height: 0; display: inline; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); }
html body .site-footer nav { justify-content: flex-start; gap: 4px 24px; }
html body .site-footer nav a { color: #dfe7f2; font-size: .9rem; }
html body .site-footer > p { color: #b9c6d8; font-size: .9rem; }
html body .site-footer-legal { color: #b9c6d8; border-top: 1px solid var(--btc-line-dark); padding-top: 18px; font-size: .82rem; line-height: 1.6; }

/* ---------- tablet / mobile: stacked ---------- */
@media (max-width: 900px) {
  html body main#main > div:has(> .auth-brand) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; background: var(--btc-fog); }
  html body main#main > div:has(> .auth-brand)::before, html body main#main > div:has(> .auth-brand)::after {
    grid-column: 1; grid-row: 1; position: static; height: auto; min-height: 240px; }
  html body main#main > div:has(> .auth-brand)::before {
    background: linear-gradient(0deg, rgba(10, 31, 63, .96), rgba(10, 31, 63, .3) 75%), url('/app-theme/panel-640.webp') center 35% / cover no-repeat, var(--btc-ink); }
  html body main#main > div:has(> .auth-brand)::after { align-self: end; min-height: 0; max-width: none; padding: 20px 20px 52px; font-size: clamp(1.75rem, 7.4vw, 2.6rem);
    background-position: left 20px top 0; }
  html body main#main > div:has(> .auth-brand) > *, html body main#main > div:has(> .auth-brand) > astro-island > * { grid-column: 1; }
  html body main#main > div:has(> .auth-brand) > .card, html body main#main > div:has(> .auth-brand) > astro-island > .card { justify-self: stretch; max-width: 600px; margin: -28px 16px 0; position: relative; z-index: 2; }
  html body main#main > div:has(> .auth-brand) > .lede, html body main#main > div:has(> .auth-brand) > .auth-alt { max-width: none; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html body main#main > div:has(> .auth-brand) > .card, html body main#main > div:has(> .auth-brand) > astro-island > .card { justify-self: center; width: calc(100% - 32px); }
}
@media (max-width: 600px) {
  html body .waitlist-grid { grid-template-columns: 1fr; }
  html body main#main > div:has(> .auth-brand) > .card, html body main#main > div:has(> .auth-brand) > astro-island > .card { padding: 26px 20px; border-radius: 22px; }
  html body fieldset.consent-options { padding: 16px 16px 4px; }
  html body .site-footer { padding: 56px 20px 28px; }
}
@media (max-width: 699px) {
  html body .site-footer nav { display: flex; flex-wrap: wrap; }
  html body .site-footer nav a { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { transition: none !important; }
}