/* Small layer on top of Tailwind for things utilities can't express cleanly */
:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; border-radius: 6px; }
/* Dropdowns: !important because Tailwind's CDN injects .grid/.block AFTER this file and would win otherwise */
[data-dropdown] > .dropdown-panel { display: none !important; }
[data-dropdown].open > .dropdown-panel.grid { display: grid !important; }
[data-dropdown].open > .dropdown-panel:not(.grid) { display: block !important; }

/* Brand display face: Archivo, set condensed like the RBA posters */
.font-display { font-stretch: 80%; letter-spacing: -0.01em; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1.25rem;
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .rail { grid-auto-columns: calc((100% - 3.75rem) / 4); } }

/* Hero: the one orchestrated moment — a revenue line draws itself once */
.hero-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.2s .3s cubic-bezier(.6,.1,.2,1) forwards; }
.hero-dot { opacity: 0; animation: pop .4s 2.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-line { animation: none; stroke-dashoffset: 0; } .hero-dot { animation: none; opacity: 1; } }

.prose-lesson h2, .prose-lesson h3 { font-weight: 600; margin: 1.2em 0 .5em; font-size: 1.15rem; }
.prose-lesson p, .prose-lesson li { line-height: 1.75; margin-bottom: .8em; max-width: 72ch; }
.prose-lesson ul { list-style: disc; padding-left: 1.25rem; }
.prose-lesson ol { list-style: decimal; padding-left: 1.25rem; }
.prose-lesson a { color: rgb(var(--brand)); text-decoration: underline; }
.prose-lesson code { background: #F5F6FA; padding: .1em .35em; border-radius: 4px; font-size: .92em; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(90deg); }
.chev { transition: transform .15s; }

input[type=range].accent { accent-color: rgb(var(--brand)); }
input[type=checkbox], input[type=radio] { accent-color: rgb(var(--brand)); }
.filter-chip-x:hover { background: rgba(0,0,0,.08); }