/* ═══════════════════════════════════════════════════════════════════════════
   tw-shim.css — substitui o cdn.tailwindcss.com (Play CDN) por CSS estático.
   O Play CDN compila utilitários em runtime e fica VIGIANDO o DOM com um
   MutationObserver, recompilando a cada mudança de atributo/elemento. Isso
   engasga ao arrastar o divisor da ref, desfazer, contar o tempo, etc.
   (o próprio navegador avisa: "should not be used in production").

   Aqui ficam: (1) um preflight equivalente ao do Tailwind v3 (o app foi feito
   em cima dele), e (2) só os utilitários que o sketch-aura realmente usa.
   Carregar isto ANTES do <style> da página deixa o CSS próprio sobrescrever.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Preflight (subset do Tailwind v3) ── */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: currentColor; }
::before, ::after { --tw-content: ''; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
button { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none; }
p, blockquote, figure { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }

/* ── Utilitários usados pelo sketch-aura (só estes) ── */
/* .hidden esconde TUDO (modais, overlays, loader). O app togglava esta classe
   contando com o Tailwind. !important pra vencer .overlay/.screen etc. (o motor
   usa a mesma convenção). SEM isto, ~48 elementos escondidos aparecem. */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
.relative { position: relative; }
.overflow-auto { overflow: auto; }
.rounded-lg { border-radius: 0.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.p-5 { padding: 1.25rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.hover\:bg-\[var\(--cream\)\]:hover { background-color: var(--cream); }