/* static/theme.css — design tokens: spacing, type ramp, semantic color aliases.
   Loaded after dashboard.css so semantic vars can reference its raw palette. */
:root {
    /* spacing scale (4px base) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
    /* font-size ramp (2 steps beyond body's existing 14px base in dashboard.css) */
    --fs-sm: 11px;   /* meta/labels — matches the dominant 11px used across owner/*.js */
    --fs-md: 13px;   /* body text inside cards — matches the dominant 12-13px */
    /* semantic color aliases (map onto dashboard.css's raw palette) */
    --ok:     var(--green);
    --warn:   var(--orange);
    --danger: var(--red);
    --accent: var(--red);
}

.skel-card {
    border-radius: var(--radius);
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 37%, var(--bg-2) 63%);
    background-size: 400% 100%;
    animation: skel-shimmer 1.4s ease infinite;
}
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.skel-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Mobile table-collapse (Owner panel) — E26 ────────────────────────────── */
@media (max-width: 640px) {
    .txn-table.mobile-collapse, .txn-table.mobile-collapse thead,
    .txn-table.mobile-collapse tbody, .txn-table.mobile-collapse th,
    .txn-table.mobile-collapse td, .txn-table.mobile-collapse tr {
        display: block;
    }
    .txn-table.mobile-collapse thead { position: absolute; left: -9999px; } /* visually hidden, not removed (a11y) */
    .txn-table.mobile-collapse tbody tr {
        display: grid;
        grid-template-columns: max-content 1fr;
        gap: 2px var(--sp-3, 12px);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: var(--sp-3, 10px);
        margin-bottom: var(--sp-2, 8px);
        background: var(--bg-2);
    }
    .txn-table.mobile-collapse tbody tr td {
        display: contents; /* let the label/value become two grid cells via ::before */
    }
    .txn-table.mobile-collapse tbody td::before {
        content: attr(data-label);
        font-size: var(--fs-sm, 11px);
        color: var(--text-3);
        align-self: center;
    }
    .txn-table.mobile-collapse tbody td:empty::before { content: none; }
    .txn-table.mobile-collapse td { white-space: normal !important; }
}

/* ── Micro-transitions (Owner panel) — E31 ────────────────────────────────── */
/* Card hover-lift — scoped to `.settings-panel[onclick]` (already-interactive
   cards, e.g. portfolio faction cards) and the explicit `.card-hoverable`
   opt-in class, NOT a bare `[onclick]` selector, so it doesn't double up on
   buttons that already have their own hover states. */
.settings-panel[onclick], .card-hoverable {
    transition: transform .15s ease, box-shadow .15s ease;
}
.settings-panel[onclick]:hover, .card-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.35));
}

/* Tab / view crossfade — every ownerRenderX() function replaces the
   `.owner-root` wrapper's contents wholesale (no vdom diffing), so this is a
   fade-in on the freshly-inserted content rather than a true old/new
   crossfade. Re-triggers automatically on each innerHTML replace since the
   browser sees a freshly-inserted element every time. */
@keyframes owner-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.owner-root > * { animation: owner-fade-in .18s ease; }

@media (prefers-reduced-motion: reduce) {
    .owner-root > * { animation: none; }
    .settings-panel[onclick]:hover, .card-hoverable:hover { transform: none; }
}