/* Source stylesheet. Compiled to public/assets/css/app.css by: npm run build:css */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Self-hosted fonts (copied by npm run vendor) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/playfair-600.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/playfair-700.woff2') format('woff2'); }

/* Design-system extras that Tailwind utilities don't cover. */
:root {
    --navy: #0F2A4A;
    --gold: #C9A227;
    --success: #1E8E5A;
    --danger: #C0392B;
    --warning: #D68910;
    --info: #2E86C1;
    --canvas: #F7F8FA;
    --line: #E3E6EA;
    --ink: #1C1F23;
    --muted: #6B7280;
}

[x-cloak] { display: none !important; }

/* Grid items default to min-width:auto, so a wide table would stretch the whole
   track and push the page sideways on phones. Let them shrink; tables scroll inside. */
.grid > * { min-width: 0; }

/* Figures line up in tables and stat cards. */
.tabular-nums, table td, table th, .num { font-variant-numeric: tabular-nums; }

/* Visible, consistent focus ring for keyboard users (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Skeleton shimmer */
.skeleton {
    background: linear-gradient(90deg, #EEF0F3 25%, #F6F7F9 37%, #EEF0F3 63%);
    background-size: 400% 100%;
    animation: skeleton 1.4s ease infinite;
    border-radius: 6px;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Prose for CMS / description HTML */
.prose-portal p { margin: 0 0 .9em; line-height: 1.7; }
.prose-portal ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 .9em; }
.prose-portal li { margin: .25em 0; }
.prose-portal a { color: var(--info); text-decoration: underline; }

/* Thin scrollbar for the sidebar */
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }