/* =========================================================
   Utilities
   ========================================================= */
.container {
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; padding: 0 2rem; } }

.container-sm { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-sm { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-sm { padding: 0 2rem; } }

.container-md { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-md { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-md { padding: 0 2rem; } }

.container-lg { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container-lg { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-lg { padding: 0 2rem; } }

.divider { height: 1px; background: var(--color-slate-200); margin: 1.5rem 0; }

/* Grid utilities (page layout) */
.grid-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .grid-stats { grid-template-columns: repeat(4, 1fr); } }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.prose { color: var(--color-slate-700); line-height: 1.7; }
.prose h2 { margin: 1.5rem 0 0.75rem; font-size: 1.5rem; }
.prose h3 { margin: 1.25rem 0 0.5rem; font-size: 1.25rem; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--color-primary-600); text-decoration: underline; }

.divide-y > * + * { border-top: 1px solid var(--color-slate-200); }
.divide-x > * + * { border-left: 1px solid var(--color-slate-200); }

.ring { box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3); }
.ring-primary { box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3); }

.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06); }

.skeleton {
    background: linear-gradient(90deg, var(--color-slate-200) 0%, var(--color-slate-100) 50%, var(--color-slate-200) 100%);
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
    border-radius: var(--radius);
}
@keyframes skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.spinner {
    width: 1rem; height: 1rem;
    border: 2px solid var(--color-slate-200);
    border-top-color: var(--color-primary-600);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }