/* ui_states.css — designed empty states, skeleton kit, and typography rhythm.
   UX B9 (Polish P1-B), 2026-07-13. Loaded once from base.html AFTER the inline
   <style> block so these rules win ties against the legacy .empty-state defaults
   that base.html still carries (.es-icon opacity/font-size). Token-based
   throughout; no hardcoded palette values. */

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state{
    text-align:center;
    max-width:360px;
    margin:0 auto;
    padding:40px 20px;
    color:var(--color-mute);
}
/* 40px glyph centered in a soft-gray 72px circle; icon inherits --color-mute-2
   via currentColor (the _icons.html macro strokes with currentColor). Explicit
   opacity/font-size override base.html's legacy .empty-state .es-icon rule. */
.empty-state .es-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    margin:0 auto 16px;
    border-radius:50%;
    background:var(--color-border-2);
    color:var(--color-mute-2);
    opacity:1;
    font-size:0;
}
.empty-state .es-title{
    font-size:15px;
    font-weight:700;
    color:var(--color-ink);
    margin:0 0 4px;
    line-height:1.3;
}
.empty-state .es-hint{
    font-size:13px;
    color:var(--color-mute);
    max-width:45ch;
    margin:0 auto 16px;
    line-height:1.5;
}
.empty-state .es-cta{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
}

/* ── Skeleton kit (shimmer placeholders; wired lazily by future pages) ─────── */
.skel{
    position:relative;
    overflow:hidden;
    background:var(--color-border-2);
    border-radius:var(--radius-sm);
}
.skel::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-card) 60%,transparent),transparent);
    animation:skelShimmer 1.4s ease-in-out infinite;
}
@keyframes skelShimmer{100%{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){
    .skel::after{animation:none;}
}

/* ── Typography rhythm ─────────────────────────────────────────────────────
   Balanced headline wrapping so h1/h2 break into even lines instead of a lone
   orphan word (progressive enhancement; ignored where unsupported). */
h1,h2{text-wrap:balance;}

/* Tabular figures for count/weight/money columns so digits align in a column.
   Applied per-table via class="tabular-nums" only where numerals misaligned. */
.tabular-nums{font-variant-numeric:tabular-nums;}

/* Canonical uppercase micro-label tracking (.06em) — reuse instead of
   hand-rolling a px letter-spacing per template. */
.u-caps{text-transform:uppercase;letter-spacing:.06em;font-weight:700;}