/**
 * House style bridge — Tailwind utility overrides & inline-gradient fixes.
 * Scoped to body.tt-house so legacy pages can opt in explicitly.
 */
body.tt-house {
  font-family: var(--font-sans);
  color: var(--ios-ink);
  overflow-x: hidden;
}

/* Mobile — prevent horizontal scroll on public + app shells */
@media (max-width: 639px) {
  body.tt-house .landing-hero {
    overflow-x: hidden;
    max-width: 100vw;
  }

  body.tt-house .landing-hero h1,
  body.tt-house .landing-hero p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.tt-house .tt-public-header > div {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Brand gradients used in inline style attributes */
body.tt-house [style*="ede9fe"]:not(.tt-auth-btn-primary),
body.tt-house [style*="f5f3ff"]:not(.tt-auth-btn-primary),
body.tt-house [style*="e8e0ff"]:not(.tt-auth-btn-primary),
body.tt-house [style*="ddd6fe"]:not(.tt-auth-btn-primary),
body.tt-house [style*="c4b5fd"]:not(.tt-auth-btn-primary) {
  background: linear-gradient(135deg, var(--ios-cream-warm) 0%, var(--ios-gold-soft) 50%, #ebe4d4 100%) !important;
}

/* Auth modal — white button, gold text, navy outline */
body.tt-house .tt-auth-btn-primary {
  background: #ffffff !important;
  color: var(--ios-gold-deep) !important;
  border: 2px solid var(--ios-navy) !important;
  box-shadow: 0 2px 10px rgba(10, 30, 63, 0.08) !important;
}

body.tt-house .tt-auth-btn-primary:hover:not(:disabled) {
  background: var(--ios-cream) !important;
  border-color: var(--ios-navy-mid) !important;
  color: var(--ios-gold-deep) !important;
}

body.tt-house .tt-auth-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Homepage hero — Live Battles stat (brighter than default emoji) */
body.tt-house .hero-stat-battle-icon {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(240, 200, 92, 0.9)) saturate(1.4) brightness(1.2);
  transform: scale(1.12);
}

body.tt-house .feature-icon-battle {
  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 45%, #fcd34d 100%) !important;
  border: 1px solid rgba(212, 168, 67, 0.45);
}

body.tt-house .bg-\[\#fafaff\] {
  background-color: var(--ios-cream) !important;
}

body.tt-house .hero-headline-accent,
body.tt-house .tt-text-gradient {
  background: linear-gradient(135deg, var(--ios-gold-bright) 0%, var(--ios-gold) 45%, var(--ios-navy-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

body.tt-house .border-purple-100,
body.tt-house .border-purple-50,
body.tt-house .border-purple-200 {
  border-color: rgba(212, 168, 67, 0.35) !important;
}

body.tt-house .border-indigo-100 {
  border-color: rgba(10, 30, 63, 0.12) !important;
}

body.tt-house .hover\:bg-purple-50:hover {
  background-color: var(--ios-gold-soft) !important;
}

body.tt-house .bg-indigo-50 {
  background-color: rgba(10, 30, 63, 0.06) !important;
}

body.tt-house .text-indigo-100 {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.tt-house .shadow-purple-500\/30,
body.tt-house .shadow-purple-500\/40 {
  --tw-shadow-color: rgba(212, 168, 67, 0.35);
}

body.tt-house .from-purple-500 {
  --tw-gradient-from: var(--ios-gold) var(--tw-gradient-from-position);
}

body.tt-house .to-indigo-600 {
  --tw-gradient-to: var(--ios-navy-soft) var(--tw-gradient-to-position);
}

body.tt-house .from-purple-100 {
  --tw-gradient-from: var(--ios-gold-soft) var(--tw-gradient-from-position);
}

body.tt-house .to-indigo-100 {
  --tw-gradient-to: rgba(10, 30, 63, 0.08) var(--tw-gradient-to-position);
}

/* Landing hero mesh — navy/gold ambient */
body.tt-house .landing-hero {
  background: var(--ios-navy) !important;
  color: var(--ios-white);
}

body.tt-house .hero-gradient-mesh {
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(212, 168, 67, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(59, 130, 196, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 70% 80%, rgba(31, 59, 114, 0.35) 0%, transparent 50%) !important;
}

body.tt-house .hero-grid {
  background-image:
    linear-gradient(rgba(212, 168, 67, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 168, 67, 0.06) 1px, transparent 1px) !important;
}

body.tt-house .floating-orb.orb-1 {
  background: linear-gradient(135deg, rgba(212, 168, 67, 0.45), rgba(31, 59, 114, 0.35)) !important;
}

body.tt-house .floating-orb.orb-2 {
  background: linear-gradient(135deg, rgba(240, 200, 92, 0.4), rgba(20, 42, 85, 0.35)) !important;
}

body.tt-house .floating-orb.orb-3 {
  background: linear-gradient(135deg, rgba(59, 130, 196, 0.35), rgba(212, 168, 67, 0.25)) !important;
}

body.tt-house .study-tracks-header .bg-indigo-700,
body.tt-house .hero-mobile-full.bg-indigo-700 {
  background: linear-gradient(135deg, var(--ios-navy) 0%, var(--ios-navy-soft) 100%) !important;
}

body.tt-house .tt-brand-serif em,
body.tt-house .tt-serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ios-gold-bright);
}

/* Shared logo — gold mark, navy wordmark (default / app header) */
body.tt-house .tt-brand-mark {
  background: linear-gradient(145deg, var(--ios-gold-bright), var(--ios-gold));
  border-radius: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ios-navy);
  box-shadow: 0 0 20px var(--ios-gold-glow);
}

body.tt-house .tt-brand-name {
  color: var(--ios-navy);
}

body.tt-house .tt-brand-and {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ios-gold-deep);
}

body.tt-house .tt-brand-tagline {
  color: var(--ios-ink-muted);
}

body.tt-house .tt-app-header .tt-brand-name,
body.tt-house .tt-app-header .tt-brand-and {
  color: var(--ios-navy);
}

body.tt-house .tt-app-header .tt-brand-and {
  color: var(--ios-gold-deep);
}

/* Homepage hero — white wordmark on navy */
body.tt-house .landing-hero .tt-brand-name {
  color: var(--ios-white) !important;
}

body.tt-house .landing-hero .tt-brand-and {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .landing-hero .tt-brand-tagline {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Legacy class hooks (older logo markup) */
body.tt-house .landing-hero .tt-brand .text-indigo-900,
body.tt-house .landing-hero .tt-brand > div > span.font-serif {
  color: var(--ios-white) !important;
}

body.tt-house .landing-hero .tt-brand .text-purple-600 {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .landing-hero .tt-brand .text-slate-500 {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.tt-house .landing-hero nav a.text-slate-500,
body.tt-house .landing-hero nav a.text-slate-600 {
  color: rgba(255, 255, 255, 0.88) !important;
}

body.tt-house .landing-hero nav a.text-slate-500:hover,
body.tt-house .landing-hero nav a.text-slate-600:hover {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .landing-hero .hero-eyebrow-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(212, 168, 67, 0.45);
}

body.tt-house .landing-hero .hero-eyebrow-badge span {
  color: var(--ios-gold-bright) !important;
}

/* Dark CTA band at bottom of homepage */
body.tt-house .home-cta-band,
body.tt-house .home-cta-band h2 {
  color: var(--ios-white) !important;
}

body.tt-house .home-cta-band .text-purple-300 {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .home-cta-band p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Public static pages — shared header + content panels */
body.tt-house .tt-public-header .tt-brand {
  min-width: 0;
}

body.tt-house .tt-public-page {
  background: var(--ios-cream, #faf8f3);
}

body.tt-house .about-hero-panel,
body.tt-house .tt-hero-panel {
  background: #fff;
  color: var(--ios-ink);
  border: 1px solid rgba(212, 168, 67, 0.45);
  box-shadow:
    0 0 0 1px rgba(10, 30, 63, 0.04),
    0 4px 24px -6px rgba(10, 30, 63, 0.1),
    0 12px 40px -16px rgba(212, 168, 67, 0.2);
}

/* User guide — welcome hero (navy + white + gold) */
body.tt-house .guide-welcome-hero {
  background: linear-gradient(135deg, var(--ios-navy) 0%, var(--ios-navy-mid) 55%, var(--ios-navy-soft) 100%);
  color: var(--ios-white);
  border: 1px solid rgba(212, 168, 67, 0.35);
  box-shadow: 0 12px 40px -12px rgba(10, 30, 63, 0.45);
}

body.tt-house .guide-welcome-hero h1,
body.tt-house .guide-welcome-hero p,
body.tt-house .guide-welcome-hero strong {
  color: inherit;
}

body.tt-house .guide-welcome-eyebrow {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .guide-welcome-accent {
  color: var(--ios-gold-bright) !important;
}

body.tt-house .guide-welcome-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(212, 168, 67, 0.35);
}