/*
 * ui-kit/ui.css - Before/After-derived primitives for 100 Tasks videos.
 *
 * This kit is extracted from the approved Startup Magic Before & After visual
 * template. The old generic ui-* component catalog was intentionally removed.
 * Use these vui-* classes for reusable ad visuals, then adapt locally when a
 * specific scene needs different copy, geometry, or motion.
 */

:where(.vui-scope, [data-vui-scope]) {
  --vui-left-panel:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklab, var(--text-primary) 3%, transparent) 100%
    ),
    color-mix(in oklab, var(--bg-surface) 90%, var(--text-primary) 3%);
  --vui-right-panel: var(--bg-flat);
  --vui-route-active: var(--color-brand);
  --vui-route-muted: color-mix(in oklab, var(--text-primary) 14%, transparent);
  --vui-copy-soft: color-mix(in oklab, var(--text-primary) 57%, transparent);
  --vui-copy-muted: color-mix(in oklab, var(--text-primary) 39%, transparent);
  --vui-grid-line: color-mix(in oklab, var(--text-primary) 5%, transparent);
  --vui-card-shadow: 0 18px 44px color-mix(in oklab, var(--text-primary) 8%, transparent);
  --vui-badge-shadow: 0 12px 32px color-mix(in oklab, var(--text-primary) 6%, transparent);
  --vui-caption-side: 50px;
  --vui-caption-bottom: 475px;
  --vui-caption-width: 620px;
  --vui-caption-font-size: 34px;
  --vui-caption-line-height: 1.585;
  --vui-caption-bg: color-mix(in oklab, var(--text-primary) 98%, var(--bg-flat));
  --vui-pip-size: 224px;
  --vui-pip-right: 12px;
  --vui-pip-bottom: 470px;
  --vui-radius-card: 5px;
  --vui-radius-pill: 999px;
  font-family: var(--font-display, "Montserrat", sans-serif);
  color: var(--text-primary);
}

:where(.vui-scope, [data-vui-scope]),
:where(.vui-scope, [data-vui-scope]) * {
  box-sizing: border-box;
}

.vui-frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-flat);
  color: var(--text-primary);
  font-family: var(--font-display, "Montserrat", sans-serif);
}

.vui-frame--reels {
  width: 1080px;
  height: 1920px;
}

.vui-safe-band {
  position: absolute;
  inset: var(--scene-safe-top, 270px) var(--scene-safe-side, 50px) var(--scene-safe-bottom, 450px);
  pointer-events: none;
}

.vui-caption-layer {
  position: absolute;
  right: var(--vui-caption-side);
  bottom: var(--vui-caption-bottom);
  left: var(--vui-caption-side);
  z-index: 20;
  display: flex;
  min-height: 122px;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.vui-caption-line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: min(100%, var(--vui-caption-width));
  max-width: var(--vui-caption-width);
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bg-flat);
  text-align: center;
  text-shadow: none;
  text-wrap: balance;
  -webkit-text-stroke: 0 transparent;
  font-size: var(--vui-caption-font-size);
  font-weight: var(--weight-regular, 400);
  line-height: var(--vui-caption-line-height);
  letter-spacing: 0;
  opacity: 0;
}

.vui-caption-line-text {
  display: inline;
  padding: 5px 14px 7px;
  border-radius: 2px;
  background: var(--vui-caption-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.vui-caption-line--tracked {
  overflow: visible;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 10px 16px 12px;
  border-radius: 2px;
  background: var(--vui-caption-bg);
  line-height: 1.1;
  white-space: nowrap;
}

.vui-speaker-pip {
  position: absolute;
  right: var(--vui-pip-right);
  bottom: var(--vui-pip-bottom);
  z-index: 24;
  width: var(--vui-pip-size);
  height: var(--vui-pip-size);
  overflow: hidden;
  border-radius: var(--radius-pill, var(--vui-radius-pill));
  background: transparent;
  box-shadow: 0 16px 44px color-mix(in oklab, var(--text-primary) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, border-radius, opacity;
}

.vui-speaker-pip-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vui-split-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.vui-split-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.vui-split-panel--before::before {
  content: "";
  position: absolute;
  inset: 190px 34px 250px;
  background-image:
    linear-gradient(var(--vui-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vui-grid-line) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 86%, transparent 100%);
  opacity: 0.32;
  transform: rotate(-1deg) scale(1.04);
}

.vui-split-panel--before {
  background: var(--vui-left-panel);
}

.vui-split-panel--after {
  background: var(--vui-right-panel);
}

.vui-split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  z-index: 6;
  width: 2px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklab, var(--text-primary) 12%, transparent) 18%,
      color-mix(in oklab, var(--vui-route-active) 58%, transparent) 52%,
      color-mix(in oklab, var(--text-primary) 10%, transparent) 84%,
      transparent 100%
    );
}

.vui-panel-heading {
  position: absolute;
  top: var(--vui-heading-top, 270px);
  left: var(--vui-heading-left, 62px);
  z-index: 4;
  display: grid;
  gap: 12px;
  max-width: var(--vui-heading-width, 385px);
}

.vui-panel-title {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--vui-title-size, 74px);
  line-height: 0.94;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-title-marker {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--vui-radius-pill);
  line-height: 1;
}

.vui-title-marker svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vui-title-marker--error {
  background: color-mix(in oklab, var(--color-error) 12%, var(--bg-flat));
  color: var(--text-primary);
}

.vui-title-marker--route {
  background: color-mix(in oklab, var(--vui-route-active) 14%, var(--bg-flat));
  color: var(--text-primary);
}

.vui-title-marker--bare-emoji {
  width: 62px;
  height: 62px;
  background: transparent;
  border-radius: 0;
  color: inherit;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 62px;
  line-height: 0.94;
  transform: translateY(-2px);
}

.vui-panel-subtitle {
  max-width: 365px;
  margin: 0;
  color: var(--vui-copy-soft);
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-artifact-card {
  position: absolute;
  top: var(--vui-card-y, auto);
  left: var(--vui-card-x, auto);
  z-index: 3;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  width: var(--vui-card-width, 250px);
  min-height: var(--vui-card-min-height, 88px);
  padding: 15px 17px;
  border: 0;
  border-radius: var(--vui-radius-card);
  background: color-mix(in oklab, var(--bg-flat) 96%, var(--text-primary) 4%);
  color: var(--text-primary);
  box-shadow: var(--vui-card-shadow);
  transform: rotate(var(--vui-card-rotate, 0deg));
}

.vui-artifact-card--ordered {
  --vui-card-width: 368px;
  --vui-card-min-height: 92px;
  background: color-mix(in oklab, var(--bg-flat) 96%, var(--color-brand-light1) 4%);
}

.vui-artifact-card--quiet {
  background: color-mix(in oklab, var(--bg-flat) 96%, var(--text-primary) 3%);
}

.vui-artifact-card--warn .vui-icon-tile {
  background: color-mix(in oklab, var(--color-warning) 13%, var(--bg-flat));
  color: var(--text-primary);
}

.vui-artifact-card--error .vui-icon-tile {
  background: color-mix(in oklab, var(--color-error) 10%, var(--bg-flat));
  color: var(--text-primary);
}

.vui-artifact-card--ordered .vui-icon-tile {
  background: color-mix(in oklab, var(--bg-flat) 68%, var(--color-brand-light1) 32%);
  color: var(--text-primary);
}

.vui-icon-tile {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 0;
  border-radius: var(--vui-radius-card);
  background: color-mix(in oklab, var(--bg-flat) 74%, var(--text-primary) 13%);
  color: var(--text-primary);
  font-size: 28px;
  line-height: 1;
  font-weight: var(--weight-medium, 500);
}

.vui-icon-tile svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vui-artifact-card__copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.vui-artifact-card__title {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 25px;
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-artifact-card__meta {
  overflow-wrap: anywhere;
  color: var(--vui-copy-muted);
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-stage-badge {
  position: absolute;
  top: var(--vui-badge-y, auto);
  left: var(--vui-badge-x, 108px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  height: 46px;
  padding: 0 15px 0 9px;
  border-radius: var(--vui-radius-pill);
  background: color-mix(in oklab, var(--bg-flat) 88%, var(--text-primary) 3%);
  color: var(--text-primary);
  box-shadow: var(--vui-badge-shadow);
}

.vui-stage-badge__marker {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: var(--vui-radius-pill);
  background: var(--vui-route-active);
  color: var(--text-on-brand, #ffffff);
  font-size: 15px;
  line-height: 1;
  font-weight: var(--weight-medium, 500);
}

.vui-stage-badge__label {
  color: var(--text-primary);
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
  white-space: nowrap;
}

.vui-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: var(--vui-radius-pill);
  background: color-mix(in oklab, var(--bg-flat) 88%, var(--text-primary) 4%);
  color: var(--vui-copy-soft);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  color: var(--text-primary);
  font-size: var(--vui-wordmark-size, 64px);
  line-height: 0.96;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
}

.vui-wordmark__accent {
  color: var(--vui-route-active);
}

/* Named default designed-scene handoff cover. Pair with
 * __vuiTransitions.handoffWash() from ui-kit/transitions.js;
 * owner doc: skills/video-creation/references/transitions.md. */
.vui-handoff-wash {
  position: absolute;
  inset: -180px -120px;
  z-index: var(--vui-wash-z, 17);
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in oklab, var(--bg-flat) 74%, var(--color-brand) 6%) 34%,
      color-mix(in oklab, var(--bg-flat) 92%, var(--color-brand) 3%) 50%,
      color-mix(in oklab, var(--bg-flat) 74%, var(--color-brand) 6%) 66%,
      transparent 100%
    );
  transform: translate3d(0, 840px, 0) rotate(-3deg);
  will-change: transform, opacity;
}