/* Timesheets & Approvals guide. Scope to its existing hero. */
.ta-preview {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  top: 8px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: 68px;
  overflow: hidden;
  color: #17243b;
  background: #eff4fc;
  border: 1px solid #dbe5f3;
  border-radius: 16px;
  box-shadow: 0 8px 28px #1c335a29;
}
.ta-preview[hidden], .ta-preview [hidden] { display: none; }
.ta-caption-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #33465f;
  border: 1px solid #e2e7ed;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  font: 600 12px Inter, Arial, sans-serif;
  cursor: pointer;
}
.ta-caption-toggle[aria-pressed="true"] { background: #eaf2ff; color: #0866ff; }
.ta-preview-stage { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.ta-preview-screen {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.ta-snapshot { position: relative; width: 100%; }
.ta-preview-screen :is(img, video) { display: block; width: 100%; height: 100%; }
.ta-preview-screen video { object-fit: contain; background: #eff4fc; }
.ta-preview-stage > * { grid-area: 1 / 1; }
.ta-playback-error { margin: 8px; padding: 9px 12px; z-index: 1; border-radius: 8px; background: #fff; color: #17243b; text-align: center; font: 600 13px/1.35 Inter, Arial, sans-serif; }
.ta-captions { grid-area: 1 / 1; align-self: end; z-index: 1; margin: 0 8px 6px; padding: 5px 9px; border-radius: 5px; text-align: center; background: #0f172ae8; color: white; font: 600 13px/1.35 Inter, Arial, sans-serif; pointer-events: none; }

.ta-preview .ta-cue { position: absolute; border-radius: 8px; opacity: 1; }
.ta-preview:fullscreen { height: 100% !important; max-height: none !important; border-radius: 0; }
@media(max-width: 580px) { .ta-preview { padding-bottom: 110px; } }

.ta-preview-screen .ta-media-offscreen { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* A click cue stays anchored to the real control in the fitted desktop frame. */
.ta-navigation-tap {
  position: absolute;
  z-index: 1910;
  width: clamp(13px, 2.2vw, 24px);
  aspect-ratio: 1;
  color: #0866ff;
  pointer-events: none;
  transform: translate(-12%, -10%);
  filter: drop-shadow(0 1px 2px #14254e80);
}
.ta-navigation-tap svg { display: block; width: 100%; }
.ta-navigation-tap path { fill: currentColor; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }