@import url("/lib/ui.css");

html { min-height: 100%; background: var(--background); }
body { min-height: 100dvh; margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.12; letter-spacing: -.03em; }
.muted { color: var(--muted-foreground); }

.audience { display: flex; flex-direction: column; gap: 1.5rem; width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); }
.brand-lockup { display: flex; align-items: center; gap: .625rem; }
.brand-symbol { width: 32px; height: 32px; }
.brand-word { font-size: 1rem; font-weight: 700; letter-spacing: -.025em; }
.dot { width: 10px; height: 10px; margin-left: auto; border-radius: 999px; background: var(--destructive); }
.dot[hidden] { display: none; }

[data-screen] { flex: 1; display: flex; flex-direction: column; justify-content: center; }
[data-screen][hidden] { display: none; }

.choices { display: grid; gap: 1rem; }
.choice { min-height: 96px; font-size: 2.5rem; font-weight: 800; border-radius: calc(var(--radius) + .25rem); transition: transform 120ms ease-out, background 120ms ease-out; }
.choice:active { transform: scale(.98); }
.choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }

.text-form { display: grid; gap: .75rem; }
.text-form .ui-button { min-height: 52px; font-size: 1rem; }
.counter { margin: 0; text-align: center; font-size: .8125rem; }

.feedback { min-height: 1.5em; margin: 0; text-align: center; font-weight: 600; }
.feedback.is-ok { color: var(--success-foreground); }
.feedback.is-error { color: var(--destructive-foreground); }
.shake { animation: shake 300ms; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } .choice { transition: none; } }
.prepare-form { display: grid; gap: .75rem; }
.drop { display: grid; place-items: center; min-height: 140px; padding: 1rem; border-style: dashed; text-align: center; cursor: pointer; }
.drop.is-over { border-color: var(--primary); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.report { white-space: pre-line; }
.report .problem { color: var(--destructive-foreground); }
.download[hidden] { display: none; }