/* InsuranceMarketplace shell (#693 casca) */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg-app); color: var(--fg-default); }

.mkt-shell { display: flex; flex-direction: column; min-height: 100vh; }

.mkt-header {
    display: flex; align-items: center; gap: var(--s-4);
    background: var(--seg-blue);
    padding: var(--s-5) var(--s-7);
}
.mkt-header-title { font-size: var(--fs-body-4); font-weight: 700; color: var(--white); letter-spacing: .02em; }

.mkt-content { flex: 1; padding: var(--s-9); }

/* 22px: sem degrau exato na escala --fs-* (--fs-h5=20px / --fs-h4=24px), residuo documentado. */
.mkt-section h1 { font-size: 22px; font-weight: 700; color: var(--seg-blue); margin: 0 0 var(--s-2); }
.mkt-section p.mkt-desc { font-size: var(--fs-body-4); color: var(--fg-secondary); margin: 0; }

/* ───── Auth shell (Login) — dogfood 2026-07-12, mesmo padrao usado por
   GamefiedDataCollection/Insights/Portal (classes sn-auth-* duplicadas por app,
   convencao ja existente no repo) ───── */
.sn-auth-shell { display:flex; min-height:100vh; background:var(--bg-app); }
/* 48px: sem degrau exato na escala --s-N (--s-8=32px / --s-9=40px / --s-10=56px), residuo documentado. */
.sn-auth-hero { flex:1.2; background:var(--brand-bg-logo, var(--seg-blue)); position:relative; display:flex; align-items:center; justify-content:center; padding:48px; overflow:hidden; }
.sn-auth-hero-grad { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--seg-green) 15%, transparent), transparent 60%); pointer-events:none; }
/* 360px: largura maxima de conteudo do hero, dimensao estrutural, residuo documentado. */
.sn-auth-hero-content { position:relative; z-index:1; max-width:360px; color:var(--fg-strong); display:flex; flex-direction:column; gap:var(--s-5); }
/* #617 (propagado do fix de Spoc/Admin/Grc/Portal/Gamefied, A5 2026-07-19) — logo carregada
   com Variant="transparent" (sem caixa de fundo); inverte p/ branco só quando o hero fica
   escuro (--brand-bg-logo: branco no light, navy no dark). Sem isso a logo "light" antiga
   trazia retângulo quase-branco colado atrás, visível sobre o hero navy do dark mode. */
:root[data-theme="dark"] .sn-auth-hero-content img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sn-auth-hero-content img { filter: brightness(0) invert(1); }
}
/* 28px: sem degrau exato na escala --fs-* (--fs-h3=32px), residuo documentado. */
.sn-auth-hero-title { font-size:28px; font-weight:700; margin:0; color:var(--fg-strong); }
.sn-auth-hero-sub { font-size:var(--fs-body-4); color:var(--fg-secondary); margin:0; line-height:1.5; }
.sn-auth-body { flex:1; display:flex; align-items:center; justify-content:center; padding:var(--s-8); position:relative; }
/* 420px: largura maxima do card, dimensao estrutural, residuo documentado. */
.sn-auth-card { width:100%; max-width:420px; background:var(--bg-surface); border-radius:var(--radius-card); box-shadow:0 8px 32px color-mix(in srgb, var(--seg-blue) 10%, transparent); padding:var(--s-9); }
.sn-auth-card-header { margin-bottom:var(--s-7); }
.sn-auth-card-title { font-size:var(--fs-h4); font-weight:700; color:var(--fg-strong); margin:0 0 6px; }
.sn-auth-card-sub { font-size:var(--fs-ui); color:var(--fg-secondary); margin:0; }
.sn-auth-card-footer { margin-top:var(--s-6); text-align:center; }

/* 768px: breakpoint literal -- media queries nao aceitam var() (mesma limitacao
   tecnica ja aceita em tokens.css, que define --bp-tablet:768px mas usa o valor
   cru em @media), residuo documentado. */
@media (max-width:768px) {
  .sn-auth-shell { flex-direction:column; }
  /* 200px: altura minima do hero em mobile, dimensao estrutural, residuo documentado. */
  .sn-auth-hero { flex:none; min-height:200px; padding:var(--s-7); }
  .sn-auth-body { padding:var(--s-5); }
  .sn-auth-card { padding:var(--s-7); box-shadow:none; max-width:100%; }
}