/* MISSION 66 / W1-F -- R920 generic screen states (banner, skeleton, empty
   state, submitting guard). Colours follow the R920 mockups: info blue for
   loading/empty, warning yellow for gate_blocked / error_retry / stale /
   submitting / unknown_reconcile / permission_denied, success green for
   confirmed. Dark-mode pairs follow the same two selectors site.css uses. */
/* MISSION 72: --pb-state-* / --pb-skeleton-* are defined per theme in pb-tokens.css */
/* MISSION 72: theme block removed -- pb-tokens.css owns light / dark (R3101) */
/* MISSION 72: theme block removed -- pb-tokens.css owns light / dark (R3101) */

.pb-state {
    border: 1px solid var(--pb-state-info-border);
    background: var(--pb-state-info-bg);
    color: var(--pb-state-info-text);
    border-radius: var(--radius-card, 12px);
    padding: 14px 18px;
    margin: 12px 0 16px;
    max-width: 100%;
}
.pb-state--warning { border-color: var(--pb-state-warning-border); background: var(--pb-state-warning-bg); color: var(--pb-state-warning-text); }
.pb-state--success { border-color: var(--pb-state-success-border); background: var(--pb-state-success-bg); color: var(--pb-state-success-text); }
.pb-state-title { margin: 0; font-weight: 700; font-size: 1.05rem; color: inherit; }
.pb-state-body { margin: 6px 0 0; color: inherit; }
.pb-state-note { margin: 6px 0 0; }
.pb-state-rid { white-space: nowrap; }
.pb-state-rid code { font-family: inherit; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.pb-state-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pb-state .pb-btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.pb-state .pb-btn-outline:hover { background: rgba(0, 0, 0, 0.05); }

/* submitting: the primary button is disabled while the request is in flight */
button[data-pb-submitting], input[data-pb-submitting] { opacity: 0.65; cursor: progress; }
.pb-state--submitting ~ form .pb-btn, form[data-pb-submitting="1"] .pb-btn { cursor: progress; }

/* loading: skeleton rows (shown by PB.initInfiniteScroll through .pb-infinite-active) */
.pb-skeleton { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: var(--radius-card, 12px); background: var(--surface); }
.pb-skeleton-row {
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--pb-skeleton-a) 25%, var(--pb-skeleton-b) 50%, var(--pb-skeleton-a) 75%);
    background-size: 200% 100%;
    animation: pb-shimmer 1.2s linear infinite;
}
.pb-skeleton-row--short { width: 60%; margin-inline-start: auto; }
.pb-skeleton-label { text-align: center; }
@keyframes pb-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pb-skeleton-row { animation: none; } }

/* empty state: title + hint + one action */
.pb-empty-title { font-weight: 700; color: var(--text-primary); margin: 0 0 6px; font-size: 1.05rem; }
.pb-empty-body { margin: 0; }