/* ════════════════════════════════════════════════════════════════════════
   VideoOS — shared UI primitives. Load AFTER videoos-tokens.css.
   3 button roles, skeleton loader, chip, card. Class-prefixed (.vo-) so they
   never collide with a page's existing styles — adopt incrementally.
   ════════════════════════════════════════════════════════════════════════ */
.vo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--vo-radius-sm);padding:11px 18px;
  font:700 14px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:transform .15s var(--vo-ease),box-shadow .25s var(--vo-ease),background .15s,border-color .15s,color .15s}
.vo-btn:focus-visible{outline:2px solid var(--vo-accent);outline-offset:2px}
.vo-btn[disabled]{opacity:.5;cursor:not-allowed}
.vo-btn--primary{background:linear-gradient(180deg,var(--vo-accent2),var(--vo-accent));color:#1a0c06;box-shadow:0 8px 22px -8px rgba(255,106,61,.35)}
.vo-btn--primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(255,106,61,.5)}
.vo-btn--outline{background:transparent;border-color:var(--vo-line2);color:var(--vo-text)}
.vo-btn--outline:hover{border-color:var(--vo-accent);color:var(--vo-accent)}
.vo-btn--ghost{background:var(--vo-card2);border-color:var(--vo-line);color:var(--vo-text2)}
.vo-btn--ghost:hover{background:var(--vo-card);color:var(--vo-text)}

.vo-skeleton{position:relative;overflow:hidden;background:var(--vo-card2);border-radius:var(--vo-radius-sm)}
.vo-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:vo-shimmer 1.3s infinite}
@keyframes vo-shimmer{100%{transform:translateX(100%)}}

.vo-chip{display:inline-flex;align-items:center;gap:6px;background:var(--vo-card2);
  border:1px solid var(--vo-line);border-radius:999px;padding:5px 12px;font-size:12.5px;
  color:var(--vo-text2);cursor:pointer;transition:.15s}
.vo-chip:hover{border-color:var(--vo-text3);color:var(--vo-text)}
.vo-chip.on{border-color:var(--vo-accent);background:var(--vo-accent-soft);color:var(--vo-text)}

.vo-card{background:var(--vo-card);border:1px solid var(--vo-line);border-radius:var(--vo-radius);padding:var(--vo-s4)}

@media (prefers-reduced-motion: reduce){.vo-skeleton::after{animation:none}}

/* ════════════════════════════════════════════════════════════════════════
   VideoOS BRAND LOCKUP — single source (mark + shimmer wordmark).
   Requires Space Grotesk 500/600/700 loaded on the page. Dark surfaces use
   .wordmark (Flow); light surfaces (OG/favicon/print/future) add .on-light.
   Keep .wordmark stops in sync with preview-e (the hero source of truth).
   ════════════════════════════════════════════════════════════════════════ */
.vo-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.03em}
.vo-brand .logomark{display:inline-flex;filter:drop-shadow(0 0 13px rgba(255,106,61,.45))}
.vo-brand .logomark svg{display:block}
.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-.04em;
  background:linear-gradient(105deg,#ff6a32 0%,#ff7e3a 35%,#ffe2b0 50%,#ff7e3a 65%,#ff6a32 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:wmflow 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 1px 1px rgba(4,4,6,.55)) drop-shadow(0 0 3px rgba(4,4,6,.45))}
@keyframes wmflow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.wordmark.on-light{background-image:linear-gradient(100deg,#7c2d12,#9a3412 22%,#b3300a 50%,#9a3412 78%,#7c2d12);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;filter:none}
@media (prefers-reduced-motion:reduce){
  .wordmark{animation:none;background:none;-webkit-text-fill-color:#ff7a3c;color:#ff7a3c;filter:drop-shadow(0 1px 1px rgba(4,4,6,.55))}
  .wordmark.on-light{background:none;-webkit-text-fill-color:#7c2d12;color:#7c2d12;filter:none}}