/* Dig Virtual — shared design-system layer.
   Loaded via a plain <link> (not injected by site-chrome.js) so it has no
   effect on that file's careful Tailwind/header/footer readiness timing.
   Pure presentation: skeleton loaders, empty states, focus rings, the
   dv-reveal scroll-in effect (previously duplicated per-page), and a
   progressive-enhancement cross-page view transition. Nothing here should
   ever need a class name that a hook template's htmx swap or a page's own
   script also depends on for behavior — those stay exactly as they are. */

/* ---------- Scroll-reveal (was inline-duplicated on index.html) ---------- */
.dv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.dv-reveal.dv-in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Card hover lift (already used ad-hoc via dv-card-hover) ---------- */
.dv-card-hover {
    transition: transform .25s ease, box-shadow .25s ease;
}
.dv-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -14px rgba(0, 83, 147, 0.22);
}

/* ---------- Skeleton loaders (replaces plain "Loading…" text states) ---------- */
.dv-skeleton {
    position: relative;
    overflow: hidden;
    background: #eef1f4;
    border-radius: 0.75rem;
}
.dv-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: dv-shimmer 1.5s ease-in-out infinite;
}
@keyframes dv-shimmer {
    100% { transform: translateX(100%); }
}

.dv-skeleton-card {
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    background: #fff;
}
.dv-skeleton-card .dv-skeleton-thumb {
    height: 8rem;
    border-radius: 0;
}
.dv-skeleton-card .dv-skeleton-line {
    height: 0.75rem;
    margin: 0.9rem;
    width: 70%;
}
.dv-skeleton-card .dv-skeleton-line + .dv-skeleton-line {
    margin-top: -0.35rem;
    width: 45%;
}

/* ---------- Empty state ---------- */
.dv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    color: #9ca3af;
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 1rem;
}
.dv-empty .material-symbols-outlined {
    font-size: 2.25rem;
    color: #d1d5db;
    margin-bottom: 0.5rem;
}
.dv-empty p {
    font-size: 0.875rem;
    color: #6b7280;
}
.dv-empty p.dv-empty-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

/* ---------- Shared form-field look (.dv-input/.dv-select/.dv-textarea) ----------
   Several form templates (e.g. pb_hooks/templates/upsert-job-outer.html)
   style their fields with these classes. Defining them here, once, means
   any page that links this stylesheet gets working field styling instead
   of depending on that particular page also carrying its own local
   duplicate of this same rule (some legacy pages still do — that's
   harmless, this just gives every OTHER page the same base for free). */
.dv-input, .dv-select, .dv-textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    background: #fff;
}
.dv-input:focus, .dv-select:focus, .dv-textarea:focus {
    outline: none;
    border-color: #005393;
    box-shadow: 0 0 0 3px rgba(0, 83, 147, 0.12);
}

/* ---------- Accessible focus ring (keyboard-only, every interactive elt) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #005393;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .dv-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .dv-card-hover:hover {
        transform: none;
    }
    .dv-skeleton::after {
        animation: none;
    }
}

/* ---------- Native cross-document view transitions ----------
   Progressive enhancement only: supporting browsers (Chromium-based) get a
   soft cross-fade when navigating between pages (e.g. a browse grid to a
   detail page); everywhere else this block is simply ignored and navigation
   behaves exactly as it does today. No JS, no router, nothing to break. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}