:root {
  --aix-primary: #0f172a;
  --aix-accent: #0369a1;
  --aix-border: #e2e8f0;
}

body { color: #020617; min-height: 100vh; }
.app-navbar { background: var(--aix-primary); }
.app-shell { max-width: 1200px; }
.public-trace-content { max-width: 900px; }
.form-select { --bs-form-select-bg-img: url("/static/select-chevron.svg"); }
.login-wrap { min-height: calc(100vh - 3rem); display: grid; place-items: center; }
.login-card { width: min(100%, 440px); }
.form-card { max-width: 640px; }
.eyebrow { color: var(--aix-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.metric-card { border-color: var(--aix-border); transition: border-color 180ms ease, box-shadow 180ms ease; }
.metric-card:hover { border-color: #94a3b8; box-shadow: 0 .5rem 1.25rem rgb(15 23 42 / 8%); }
.empty-cell { color: #475569; padding: 2rem !important; text-align: center; }
details > summary { cursor: pointer; list-style-position: inside; min-height: 48px; display: flex; align-items: center; }
.btn, .form-control, .form-select, .nav-link, summary { min-height: 44px; }
.btn-sm { min-height: 36px; }
.form-control:focus, .form-select:focus, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgb(3 105 161 / 35%); outline-offset: 2px; box-shadow: none; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 1100; background: #fff; color: #020617; padding: .75rem 1rem; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.inspection-item-form [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}