/* OposicionAI — small custom layer on top of Tailwind (MVP). */

html { -webkit-font-smoothing: antialiased; }

/* Reliable responsive app navigation.
 * The Tailwind Play CDN can emit `.hidden` after `.md:block`, so the `hidden
 * md:block` / `md:hidden` twin classes are unreliable. These rules own the
 * sidebar/bottom-nav visibility directly (until we swap the CDN for a build). */
.opoai-sidebar { display: none !important; }
.opoai-bottomnav { display: grid !important; }
@media (min-width: 768px) {
	.opoai-sidebar { display: flex !important; }
	.opoai-bottomnav { display: none !important; }
}

/* Fill available height for immersive study views (tests, flashcards). */
.opoai-stage { min-height: calc(100vh - 8rem); }
@media (min-width: 768px) { .opoai-stage { min-height: calc(100vh - 6rem); } }

/* Flashcard flip helper (used later by the flashcards view). */
.opoai-card { perspective: 1000px; }
.opoai-card__inner { transition: transform .5s; transform-style: preserve-3d; }
.opoai-card.is-flipped .opoai-card__inner { transform: rotateY(180deg); }
.opoai-card__face { backface-visibility: hidden; }
.opoai-card__face--back { transform: rotateY(180deg); }

/* Long-form text pages (legal pages, etc.): <div class="prose"> … </div>.
   Tailwind's preflight resets headings and lists, so restore readable defaults. */
.prose { color: #334155; font-size: 1rem; line-height: 1.75; }
.prose h1 { color: #0f172a; font-size: 2.25rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.prose h2 { color: #0f172a; font-size: 1.375rem; line-height: 1.35; font-weight: 700; margin: 2.25rem 0 .75rem; }
.prose h3 { color: #0f172a; font-size: 1.125rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .35rem 0; }
.prose li::marker { color: #6366f1; }
.prose a { color: #4338ca; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #312e81; }
.prose strong { color: #0f172a; font-weight: 600; }
.prose code { font-size: .875em; background: #f1f5f9; padding: .1em .35em; border-radius: .25rem; }
.prose em { color: #64748b; }

/* Audioclase player: seek bar on the brand card + synced transcript.
   --p (0–100) is the played percentage, set from app.js. */
.opoai-seek { -webkit-appearance: none; appearance: none; background: transparent; height: 1.25rem; cursor: pointer; --p: 0; }
.opoai-seek::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #fff calc(var(--p) * 1%), rgba(255,255,255,.3) calc(var(--p) * 1%)); }
.opoai-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.3); }
.opoai-seek::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255,255,255,.3); }
.opoai-seek::-moz-range-progress { height: 6px; border-radius: 999px; background: #fff; }
.opoai-seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.opoai-seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.opoai-par { border-left: 3px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
.opoai-par[data-start]:hover { background: #f8fafc; }
.opoai-par.is-active, .opoai-par.is-active:hover { background: #eef2ff; border-left-color: #4f46e5; color: #0f172a; }