/* Layout only. Every visual value resolves to a design token — no hex, no raw px
   for colour/radius/spacing, no font names. */

.vbs-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--spacing-32) var(--spacing-24) var(--spacing-60);
}

.vbs-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-32);
}

.vbs-title {
  font-family: var(--font-family-accent);
  font-size: var(--font-size-3xl);
  line-height: var(--font-line-height-3xl);
  color: var(--content-primary);
  margin: 0;
}

.vbs-sub {
  color: var(--content-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  margin: var(--spacing-4) 0 0;
}

.vbs-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--content-secondary);
  font-size: var(--font-size-sm);
}

.vbs-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--spacing-24);
  align-items: start;
}

@media (max-width: 900px) {
  .vbs-grid { grid-template-columns: minmax(0, 1fr); }
}

.vbs-stack { display: grid; gap: var(--spacing-16); }
.vbs-stack-lg { display: grid; gap: var(--spacing-24); }

.vbs-section-label {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--content-secondary);
  margin: 0 0 var(--spacing-12);
}

.vbs-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.vbs-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }

/* toggle chips built on .pl-tag */
.vbs-chip { cursor: pointer; user-select: none; }
.vbs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vbs-chip[data-on="true"] {
  background: var(--interaction-primary-bg);
  color: var(--interaction-primary-content);
  border-color: var(--interaction-primary-bg);
}

/* drop zone */
.vbs-drop {
  display: grid;
  place-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-32) var(--spacing-24);
  border: 1px dashed var(--form-border);
  border-radius: var(--radius-base);
  background: var(--bg-secondary);
  color: var(--content-secondary);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.vbs-drop:hover, .vbs-drop[data-over="true"] {
  border-color: var(--form-border-hover);
  background: var(--bg-hover);
}
.vbs-drop strong { color: var(--content-primary); }

.vbs-meta {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs-long);
  color: var(--content-secondary);
}

/* focus picker */
.vbs-focus { position: relative; display: block; line-height: 0; cursor: crosshair; }
.vbs-focus video, .vbs-focus img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-base);
  display: block;
  background: var(--bg-wash);
}
.vbs-focus-dot {
  position: absolute;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin: calc(var(--spacing-8) * -1) 0 0 calc(var(--spacing-8) * -1);
  border-radius: var(--radius-pill);
  border: 2px solid var(--content-pure);
  box-shadow: var(--shadow-md);
  background: var(--accent-badge);
  pointer-events: none;
}

/* the output column tracks the form on tall screens */
@media (min-width: 901px) {
  .vbs-sticky { position: sticky; top: var(--spacing-24); }
}

/* preview tiles */
.vbs-previews { display: grid; gap: var(--spacing-24); }
.vbs-preview-card { display: grid; gap: var(--spacing-8); }
.vbs-preview-card img,
.vbs-preview-card canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-base);
  background: var(--bg-wash);
}
.vbs-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
  font-size: var(--font-size-xs);
  color: var(--content-secondary);
}

.vbs-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: var(--spacing-32);
  border-radius: var(--radius-base);
  background: var(--bg-secondary);
  color: var(--content-secondary);
  text-align: center;
}

/* progress */
.vbs-bar {
  height: var(--spacing-6);
  border-radius: var(--radius-pill);
  background: var(--bg-border);
  overflow: hidden;
}
.vbs-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--interaction-primary-bg);
  transition: width 200ms ease;
}

.vbs-results { display: grid; gap: var(--spacing-12); }
.vbs-result {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-sm);
}
.vbs-result img {
  width: 96px;
  height: auto;
  border-radius: var(--radius-xs);
  display: block;
  flex: none;
  background: var(--bg-wash);
}
.vbs-result a:has(img) { flex: none; line-height: 0; }
.vbs-result-body { flex: 1 1 auto; min-width: 0; }
.vbs-result-actions { display: flex; gap: var(--spacing-6); flex: none; }
.vbs-result-name {
  font-size: var(--font-size-sm);
  color: var(--content-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vbs-notice {
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm-long);
}
.vbs-notice--error { background: var(--accent-alert-light); color: var(--content-primary); }
.vbs-notice--info { background: var(--bg-secondary); color: var(--content-secondary); }
.vbs-notice[hidden] { display: none; }

.vbs-range { width: 100%; accent-color: var(--interaction-primary-bg); }

.vbs-ar input, .vbs-ar textarea { direction: rtl; text-align: right; font-family: var(--font-family-default-ar); }

/* sign-in */
.vbs-signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--spacing-24);
}
.vbs-signin-card { width: 100%; max-width: 420px; }