/* Small progressive-enhancement layer on top of Tailwind CDN. */
:root { color-scheme: light dark; }

/* Logical-property helpers for guaranteed RTL correctness. */
.text-start { text-align: start; }
.text-end { text-align: end; }
.ms-auto { margin-inline-start: auto; }
.float-start { float: inline-start; }

/* Tables keep readable direction even inside RTL pages. */
table { direction: initial; }
[dir="rtl"] table .num, .num { direction: ltr; unicode-bidi: embed; text-align: end; }

/* Entry card hover */
.entry-card { transition: transform .15s ease, box-shadow .15s ease; }
.entry-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(2,6,23,.12); }

/* Focus ring for accessibility (WCAG 2.1 AA) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Stepper */
.stepper::before {
    content: '';
    position: absolute;
    inset-block-start: 1.1rem;
    inset-inline: 10%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

/* v3 interactive design ratings — logical properties keep RTL working */
.star-rating { display: inline-flex; align-items: center; gap: 0.15rem; }
.star-rating__star {
    background: none; border: 0; padding: 0.1rem; font-size: 1.35rem; line-height: 1;
    color: rgb(203 213 225); cursor: pointer; transition: color 0.15s ease, transform 0.1s ease;
}
.star-rating__star.is-active { color: rgb(245 158 11); }
.star-rating__star:hover, .star-rating__star:focus-visible { transform: scale(1.12); outline: none; }
.star-rating__star:focus-visible { box-shadow: 0 0 0 2px rgb(99 102 241 / 0.6); border-radius: 4px; }

/* v4: native-details navigation dropdowns (replace Alpine x-show) */
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] .nav-dropdown__menu { display: block; }
.nav-dropdown__menu { display: none; }
.nav-dropdown__menu a { display: block; }

/* Theme toggle icons: show moon in light mode, sun in dark mode */
.theme-icon { display: inline-flex; }
html.dark .theme-icon--moon { display: none; }
html:not(.dark) .theme-icon--sun { display: none; }

/* v5: admin dashboard charts (self-hosted Chart.js) */
.chart-box { position: relative; height: 17rem; }
.chart-box--doughnut { max-width: 22rem; margin-inline: auto; }
@media (max-width: 640px) { .chart-box { height: 14rem; } }