﻿/* Shared v2 state components (grok 2026-10-17, v3 stage 3b): hero rhythm, loading, empty, error.
   Styling hooks only; ids/data-* and JS selectors unchanged. Loads after page CSS. */
.ui-hero{position:relative}
.ui-hero::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:2px;background:linear-gradient(180deg,#ff8a45,#ff8a4500)}
.ui-loading{color:#bdb7ac}
.ui-loading::after{content:"";display:inline-block;width:1.2em;height:.18em;margin-left:.4em;vertical-align:middle;border-radius:2px;background:linear-gradient(90deg,#ff8a45 0 33%,#3a3c42 33% 100%);background-size:300% 100%;animation:ui-load 1.1s steps(3) infinite}
@keyframes ui-load{to{background-position:-150% 0}}
.ui-empty{display:block;padding:18px 20px;border-radius:12px;border:1px dashed #5a5d64;background:#15161a;color:#bdb7ac;text-align:center;font-weight:600}
.ui-error{display:block;padding:14px 16px;border-radius:12px;border:1px solid #ff5a5a;border-left-width:4px;background:#1f1517;color:#ffd2cc;font-weight:600}
@media (prefers-reduced-motion:reduce){.ui-loading::after{animation:none;background:#ff8a45}}
@media (forced-colors:active){.ui-empty,.ui-error{border-color:CanvasText}.ui-hero::before{background:CanvasText}}
