/* LOADING-PATTERN-1 (docs/mockups/loading-pattern). One mark, one skeleton, one progress
   block, one failed block. Community, the share sheet, and — once they take it — the
   activity page and Coach. No fade-in: a wait is on screen in the frame it starts. */

.ox-spin { display: inline-block; flex: none; animation: ox-turn 3s linear infinite; }
.ox-spin path { fill: none; }
@keyframes ox-turn { to { transform: rotate(360deg); } }

.ox-sk { display: block; background: rgba(60, 60, 67, .09); border-radius: 6px; position: relative; overflow: hidden; }
html[data-theme="dark"] .ox-sk { background: rgba(235, 235, 245, .14); }
.ox-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-30%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: ox-sheen 1.4s ease-in-out infinite; }
@keyframes ox-sheen { to { transform: translateX(100%); } }

.ox-line { display: flex; align-items: center; gap: 8px; color: var(--ink-secondary); font-size: 13px; margin: 2px 0 10px; }
.ox-post { padding: 12px 0 16px; border-top: 1px solid rgba(60, 60, 67, .12); }
.ox-row { display: flex; gap: 10px; align-items: center; }
.ox-grow { flex: 1; min-width: 0; }
.ox-av { width: 36px; height: 36px; border-radius: 50%; }
.ox-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ox-tile { height: 46px; border-radius: 12px; }
.ox-media { height: 150px; margin-top: 10px; border-radius: 14px; }

.ox-block { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 22px 16px; min-height: 120px; background: var(--card); border-radius: 18px; }
.ox-block.ox-tall { min-height: 150px; }
.ox-label { font-size: 15px; color: var(--ink); font-weight: 500; margin: 0; }
.ox-bar { display: block; flex: none; width: 280px; max-width: 80%; height: 4px; border-radius: 2px;
  background: rgba(60, 60, 67, .18); overflow: hidden; margin: 0; padding: 0; }
html[data-theme="dark"] .ox-bar { background: rgba(235, 235, 245, .18); }
.ox-fill { display: block; height: 4px; background: var(--accent); border-radius: 2px; }
.ox-cap { font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

.ox-pill { display: flex; align-items: center; gap: 8px; margin: 0 auto 10px; width: max-content;
  padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08); font-size: 13px; color: var(--ink-secondary); }
.ox-early { display: none; }
html.feed-cached .ox-early { display: flex; }
html.feed-cached [data-feed-skel] { display: none !important; }

.ox-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 100%; text-align: center; padding: 24px 16px; }
.ox-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 16px; }
.ox-fail b { font-size: 17px; font-weight: 600; color: var(--ink); }
.ox-fail p { margin: 0; color: var(--ink-secondary); font-size: 14px; max-width: 320px; }
.ox-acts { display: flex; gap: 8px; margin-top: 6px; justify-content: center; }
.ox-banner { margin: 0 0 10px; font-size: 13px; color: var(--ink-secondary); text-align: center; }
.ox-banner button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .ox-spin { animation: none; }
  .ox-sk::after { animation: none; display: none; }
}